@media screen and (max-width: $sm-breakpoint) {
  .gdoc-nav {
    margin-left: -$menu-width;
    font-size: $font-size-base;

    &__control {
      display: inline-block;
    }
  }

  .gdoc-header {
    svg.gdoc-icon {
      width: $font-size-24;
      height: $font-size-24;
    }
  }

  .gdoc-brand {
    font-size: $font-size-24;
    line-height: $font-size-24;

    &__img {
      display: none;
    }
  }

  .gdoc-menu-header {
    &__items {
      display: none;
    }

    &__control,
    &__home {
      display: flex;
    }
  }

  .gdoc-error {
    padding: $padding-96 $padding-16;

    svg.gdoc-icon {
      width: $font-size-96;
      height: $font-size-96;
    }

    &__message {
      padding-left: $padding-32;
    }

    &__line {
      padding: $padding-4 0;
    }

    &__title {
      font-size: $font-size-32;
    }
  }

  .gdoc-page__header .breadcrumb,
  .hidden-mobile {
    display: none;
  }

  .flex-mobile-column {
    flex-direction: column;
  }

  #menu-control:checked ~ main {
    .gdoc-nav nav,
    .gdoc-page {
      transform: translateX($menu-width);
    }

    .gdoc-page {
      opacity: 0.25;
    }
  }

  #menu-control:checked ~ .gdoc-header .gdoc-nav__control {
    svg.gdoc-icon.gdoc_menu {
      display: none;
    }

    svg.gdoc-icon.gdoc_arrow_back {
      display: inline-block;
    }
  }

  #menu-header-control:checked ~ .gdoc-header {
    .gdoc-brand {
      display: none;
    }

    .gdoc-menu-header {
      &__items {
        display: flex;
      }

      &__control {
        svg.gdoc-icon.gdoc_keyboard_arrow_left {
          display: none;
        }
      }
    }
  }
}