/* For mobile-friendly Examples only, not Homepage */
@media screen and (max-width: 768px) {
  .mobile-get-started {
    display: inline-block;
    position: absolute;
    padding: 1.5vw 5vw;
    margin: 0;
    right: 20px;
    top: 20px;
  }
  .main {
    flex-direction: column;
    justify-content: space-between;
  }
  .example__iframe {
    height: 100%;
  }
  .content--body {
    position: absolute;
    bottom: 0;
    left: 0;
    top: 0;
    right: 0;
  }
  .sidebar__wrap,
  .copy__wrap {
    padding: 20px;
  }
  .sidebar,
  .sidebar__wrap {
    height: 150px;
    overflow-x: hidden;
  }
  .sidebar {
    order: 1;
    padding: 0;
    position: relative;
    max-width: 100%;
    width: 100%;
  }
  .sidebar .nav {
    border: 0;
    margin-bottom: 0;
    padding: 20px 0 0;
  }
  .example-nav {
    position: absolute;
    height: 80px;
    bottom: 0;
    left: 0;
    width: 100%;
  }
  #logo {
    display: block;
    height: 35px;
    pointer-events: none;
  }
  .logo__wordmark {
    background-position: 0 50%;
    background-size: contain;
    margin-bottom: 20px;
    width: 100%;
  }
  .example-nav-link {
    border: 0;
    height: 100%;
    font-size: 2rem;
    font-weight: 600;
    width: 50%;
    margin: 0;
    padding: 0.5rem 16px;
    position: absolute;
    bottom: 0;
  }
  .example-nav-link span {
    display: none;
  }
  .example-nav-prev {
    left: 0;
  }
  .example-nav-next {
    right: 0;
  }
  .subnav-item.current {
    padding: 0.5rem 2rem;
    position: absolute;
    top: 75px;
    left: 0;
    right: 0;
    pointer-events: none;
    text-align: center;
    width: 100%;
  }
  .subnav-item.current .subnav-link {
    font-size: 1.4rem;
  }
  .subnav-item:not(.current),
  .page-title {
    display: none;
  }
  .examples-list {
    border: 0;
    padding: 0;
  }
  .example-nav {
    margin-top: 0;
  }
}