body {
  background: var(--color-paper);
}

/* Desktop */

/* -- Hero -- */

.project-hero {
  min-height: max(100svh, 600px);
  display: grid;
  grid-template-columns: 1fr 1fr;
}

/* Hero Info */
.project-hero__info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-family: var(--font-graphik);
  line-height: 1.2;
  padding-block: min(20vh, 200px) 48px;
}

.project-hero__logo {
  width: 180px;
  height: auto;
}

.project-hero__title {
  margin-top: min(12vh, 120px);
  text-transform: uppercase;
}

.project-hero__roles {
  margin-top: 60px;
}

.project-hero__brand,
.project-hero__roles-heading {
  font-size: inherit;
  font-weight: inherit;
}

.project-hero__roles-heading {
  margin-bottom: 4px;
}

/* Hero Asset */
.project-hero__asset {
  position: relative;
  overflow: hidden;
}

.project-hero__asset img,
.project-hero__asset video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focus, center);
}

/* -- Blocks -- */

.layout-column {
  min-height: max(100svh, 600px);
}

.layout-column .block {
  height: max(100svh, 600px);
}

.layout-column .block--image img,
.layout-column .block--video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focus, center);
}

/* -- Text -- */

.layout-column .block--text,
.layout-column .block--text-quote {
  display: flex;
  flex-direction: column;
  padding: 96px 48px;
}

.layout-column .block--text {
  justify-content: center;
}

.layout-row--full .block--text {
  align-items: center;
  text-align: center;
}

.layout-row--split .block--text {
  align-items: flex-start;
  text-align: left;
}

/* -- Text quote -- */

.layout-column .block--text-quote {
  gap: 48px;
}

.layout-column .block--text-quote > .rich-text {
  margin-block: auto;
}

.text-quote__quote {
  max-width: 50ch;
  font-family: var(--font-graphik);
  line-height: var(--type-reading-line-height);
}

.text-quote__quote figcaption {
  margin-top: 0.75em;
}

/* -- Carousel -- */

.layout-column .carousel {
  position: relative;
  overscroll-behavior-x: contain;
}

.layout-column .swiper-slide {
  height: 100%;
}

.layout-column .swiper-slide--ratio {
  width: auto;
  aspect-ratio: var(--slide-ratio);
}

/* -- Mobile -- */

@media (max-width: 768px) {
  .project-hero {
    grid-template-columns: 1fr;
  }

  .project-hero__info {
    padding-block: 160px 48px;
  }

  .project-hero__logo {
    width: 140px;
  }

  .project-hero__label {
    display: block;
  }

  .project-hero__title {
    margin-top: 80px;
  }

  .project-hero__roles {
    margin-top: 40px;
  }

  .project-hero__asset {
    min-height: 50svh;
  }

  .layout-column:has(> .block--image),
  .layout-column:has(> .block--video),
  .layout-column:has(> .block--carousel) {
    height: auto;
    min-height: 0;
  }

  .layout-column > .block--image,
  .layout-column > .block--video {
    height: auto;
  }

  .layout-column > .block--image img,
  .layout-column > .block--video video {
    height: auto;
  }

  .layout-row .carousel {
    height: auto;
    aspect-ratio: 2 / 3;
  }

  /* lets slide fit into mobile 2/3 aspect ratio */
  .layout-row .swiper-slide .block {
    height: 100%;
  }

  .layout-row .block--text,
  .layout-row .block--text-quote {
    padding: 20px;
  }

  /* Centre between the bottom of the fixed header and the bottom of the
     block, rather than within the full viewport — otherwise the header
     overlaps the top of the box and the text reads as sitting high. */
  .layout-row .block--text,
  .layout-row .block--text-quote {
    padding-top: calc(20px + var(--header-height));
  }

  .layout-row .block--text {
    align-items: center;
    padding-inline: 15%;
    text-align: center;
  }
}