._container {
  width: 100%;
  padding: 0 var(--wrap);
  margin: 0;
}

._inner__container {
  width: 100%;
  padding: 0 var(--wrap-1);
  margin: 0;
}

._inner {
  padding-top: 20px;
}

@media (min-width: 1200px) {
  section {
    margin-top: 13.875rem;
  }

  .section-faculty,
  .section-worker {
    margin-top: 2.5rem !important;
  }

  .section-categories {
    margin-top: 3rem;
    margin-bottom: 3rem;
  }

  .front-section {
    margin-top: 4rem;
  }

  section._grey + section:not(._grey),
  section:not(._grey) + section._grey {
    margin-top: 3.75rem;

    margin-bottom: 2rem;
  }
}

@media (min-width: 900px) and (max-width: 1199px) {
  section {
    margin-top: 4.75rem;
  }

  section._grey + section:not(._grey),
  section:not(._grey) + section._grey {
    margin-top: 3.75rem;
  }
}

/* 80px between blocks made a phone page mostly air; the scale's step is 48px. */
@media (max-width: 899px) {
  section {
    margin-top: var(--space-section);
  }

  /* The page's first section also clears the fixed header (56px on a phone)
     with this margin, so it keeps the 80px it had: at 48px the breadcrumbs
     of the programme catalogue went under the header. :where keeps the rule
     as weak as the one above, so a page's own first-section rule still wins. */
  main > :where(section:first-of-type) {
    margin-top: 5rem;
  }

  .home section.front-section {
    margin-top: 3rem;
  }

  section._grey + section:not(._grey),
  section:not(._grey) + section._grey {
    margin-top: 1.5rem;
  }
}

section._first {
  margin-top: 13rem;
}
@media (max-width: 1199px) {
  section._first {
    margin-top: 3rem;
  }
}


.department__container {
  padding: 0 var(--wrap-1);
}

@media (min-width: 1200px) {
  ._margin-top {
    margin-top: 6.25rem;
  }
}

@media (min-width: 900px) and (max-width: 1199px) {
  ._margin-top {
    margin-top: 5rem;
  }
}

@media (max-width: 899px) {
  ._margin-top {
    margin-top: 3.75rem;
  }
}

@media (min-width: 2200px) {
  

  section {
    margin-top: 18rem;
  }

  .section-faculty,
  .section-worker {
    margin-top: 5rem !important;
  }

  .section-categories {
    margin-top: 5rem;
    margin-bottom: 5rem;
  }

  .front-section {
    margin-top: 5rem;
  }

  section._grey + section:not(._grey),
  section:not(._grey) + section._grey {
    margin-top: 6rem;
    margin-bottom: 3.5rem;
  }

  section._first {
    margin-top: 15rem;
  }

  ._margin-top {
    margin-top: 9rem;
  }
}


.wp-block-columns {
    display: flex;
    margin-bottom: 1.75em;
    box-sizing: border-box;
    flex-wrap: wrap;
    gap: 2em;
}
@media (min-width: 782px) {
    .wp-block-columns {
        flex-wrap: nowrap;
    }
}
.wp-block-column {
    flex-grow: 1;
    min-width: 0;
    word-break: break-word;
    overflow-wrap: break-word;
}
@media (max-width: 781px) {
    .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
        flex-basis: 100% !important;
    }
}


.section-faculty,
.section-worker {
  margin-top: 2.5rem !important;
  margin-bottom: 0 !important;
}

/*
 * Safety net for a failed aos.js download: its stylesheet has already hidden
 * every [data-aos] element, and only the script can reveal them. footer.js
 * sets this class when the library is missing, so the content shows up
 * unanimated instead of staying invisible.
 */
html.aos-unavailable [data-aos] {
  opacity: 1;
  transform: none;
}

/*
 * Phones get no scroll reveals at all (footer.js keeps AOS off there). A
 * flick of the thumb outruns a 450ms fade, so lists showed blank gaps that
 * then filled in, and until aos.js arrived on a slow connection whole sections
 * stayed invisible. Here the content is simply there, as on Apple's pages.
 */
@media (max-width: 899px) {
  html [data-aos][data-aos] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

@media (min-width: 2200px) {
  .section-faculty,
  .section-worker {
    margin-top: 4rem !important;
  }
}

/*
 * A news item or event without a cover image shows the university crest
 * (impulse_placeholder_image_url()): whole and centred on a soft plate, not
 * cropped to fill the frame like a photo.
 */
img.is-placeholder {
  object-fit: contain !important;
  padding: 14%;
  background-color: var(--color-bg-secondary);
}

/*
 * Buttons answer the moment they are pressed. The phone's own tap flash is
 * switched off site-wide (variables.css), so without this a tap on most
 * controls showed nothing until the next page loaded. The separate `scale`
 * property stacks on top of any hover transform instead of replacing it.
 */
:is(
  .btn,
  ._btn-colored,
  .wp-block-button__link,
  .header__buttons button,
  .header__buttons a,
  .popup__close,
  .to-top,
  .swiper-button-prev,
  .swiper-button-next,
  .button-prev,
  .button-next,
  button[type="submit"],
  input[type="submit"]
):active:not(:disabled) {
  scale: 0.97;
}

/*
 * Safari on an iPhone zooms the whole page in when a field under 16px gets
 * the focus, and leaves it zoomed after the keyboard closes: the search boxes
 * and filters set at 13-14px made the page jump on every tap. 16px is the
 * smallest size it leaves alone.
 */
@media (max-width: 899px) {
  input:is([type="text"], [type="search"], [type="email"], [type="tel"], [type="number"], [type="url"], [type="password"], :not([type])),
  select,
  textarea {
    font-size: 16px !important;
  }
}