@media only screen and (max-width: 900px) {
  #header header {
    min-height: 3em;
    flex-flow: row-reverse nowrap;
    .socials {
      margin-left: auto;
      margin-right: 1em;
    }
  }

  nav.menu {
    padding: 10px 6%;
    justify-content: flex-end;

    > ul {
      position: fixed;
      flex-flow: column wrap;
      top: 0.5em;
      left: 1em;
      padding: 0 6px;
      border: 1px solid #000a;
      border-radius: 12px;
      box-shadow: 0 0 10px rgb(184 154 137 / 65%);
      background-color: transparent;
      transition: all 0.26s ease;

      @container scroll-state(stuck: top) {
        background-color: var(--c-menu-bg-opaque);
        box-shadow: 0 0 10px var(--c-ink);
      }

      > li:not(.menu-toggle-item) {
        display: none;
        border-right: none;
      }

      > li.menu-toggle-item {
        display: block;
        flex: 0 0 auto;
        padding: 6px 0 10px;
        border-right: none;

        button {
          padding: 6px;
          color: inherit;
          border: none;
          background-color: transparent;
        }
      }
    }

    &.is-open ul {
      justify-content: stretch;
      background-color: #0008;
      border: 1px solid #000a;
      box-shadow: 0 0 10px rgb(184 154 137 / 65%);
      border-radius: 12px;
      padding: 12px;
      min-width: 35vw;

      @container scroll-state(stuck: top) {
        background-color: var(--c-menu-bg-opaque);
        box-shadow: 0 0 10px var(--c-ink);
      }

      li {
        display: block;
        flex: 1 1 100%;
        text-align: left;
        border-top: 1px solid rgba(101, 200, 136, 0.35);
        border-right: none;
        padding: 6px 0;
      }

      li.menu-toggle-item {
        border-top: none;
        padding-top: 0;
        button {
          border: none;
          box-shadow: none;
        }
      }

      li > a {
        display: block;
        padding: 6px 0;
      }

      li:last-child {
        text-align: left;
      }

      li:last-child > a:first-child {
        margin-right: 10px;
      }
    }
  }

  section:not(#header) > * {
    padding: 1.2em;
  }

  section:not(:where(#header, #hero)) {
    height: auto;
  }

  #hero {
    > article {
      align-items: center;

      #when-where {
        display: inline-flex;
        max-width: fit-content;
        white-space: pre-line;
        text-align: center;
      }

      div#short-desc {
        font-size: 1.3em;
        white-space: normal;
      }
    }
  }

  #pricing {
    p {
      max-width: fit-content;
      text-align: justify;
    }
  }

  #workshops .parallel-boxes {
    gap: 1em;
  }

  .parallel-boxes {
    flex-wrap: wrap !important;

    > div {
      min-width: 40vw;
    }
  }

  .timetable {
    max-width: fit-content;
  }
}