/* =========================================================================
   ABOUT PAGE
   ========================================================================= */

/* ---- INTRO ---------------------------------------------------------- */
.about-intro {
  padding-block: var(--space-xl) var(--space-lg);
}

.about-intro__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  grid-template-areas:
    "about-intro-eyebrow"
    "about-intro-heading"
    "about-intro-image"
    "about-intro-copy";
}

.about-intro__heading {
  font-size: var(--text-xl);
}

.about-intro__copy {
  color: var(--colour-ink-soft);
  max-width: 60ch;
}

.about-intro__image img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift);
}

.about-intro__image {
  margin: 0;
  position: relative;
}

.about-intro__image figcaption {
  position: absolute;
  bottom: var(--space-sm);
  left: var(--space-sm);
}

@media (min-width: 64rem) {
  .about-intro__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-areas:
      "about-intro-eyebrow about-intro-eyebrow about-intro-eyebrow about-intro-eyebrow about-intro-eyebrow about-intro-eyebrow . about-intro-image about-intro-image about-intro-image about-intro-image about-intro-image"
      "about-intro-heading about-intro-heading about-intro-heading about-intro-heading about-intro-heading about-intro-heading . about-intro-image about-intro-image about-intro-image about-intro-image about-intro-image"
      "about-intro-copy about-intro-copy about-intro-copy about-intro-copy about-intro-copy about-intro-copy . about-intro-image about-intro-image about-intro-image about-intro-image about-intro-image";
    column-gap: var(--space-lg);
  }
  .about-intro__image img {
    aspect-ratio: 3 / 4;
    height: auto;
    max-height: 28rem;
    object-fit: cover;
  }
}

/* ---- RBU SECTION ------------------------------------------------------ */
.about-rbu {
  padding-block: var(--space-xl);
  background: var(--colour-paper-sunken);
  scroll-margin-top: 5rem;
}

.about-rbu__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  grid-template-areas:
    "rbu-image"
    "rbu-eyebrow"
    "rbu-heading"
    "rbu-copy"
    "rbu-points";
}

.about-rbu__heading {
  font-size: var(--text-xl);
}

.about-rbu__copy {
  color: var(--colour-ink-soft);
  max-width: 60ch;
}

.about-rbu__image img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

.about-rbu__points {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.about-rbu__points li {
  display: flex;
  gap: var(--space-sm);
}

.about-rbu__points i {
  color: var(--colour-leash);
  font-size: 1.3rem;
  width: 1.6rem;
  flex-shrink: 0;
  margin-top: 0.2em;
}

.about-rbu__points h3 {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 800;
}

.about-rbu__points p {
  margin-top: 0.2em;
  font-size: var(--text-sm);
  color: var(--colour-ink-soft);
}

@media (min-width: 64rem) {
  .about-rbu__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-areas:
      "rbu-image rbu-image rbu-image rbu-image rbu-image . rbu-eyebrow rbu-eyebrow rbu-eyebrow rbu-eyebrow rbu-eyebrow rbu-eyebrow"
      "rbu-image rbu-image rbu-image rbu-image rbu-image . rbu-heading rbu-heading rbu-heading rbu-heading rbu-heading rbu-heading"
      "rbu-image rbu-image rbu-image rbu-image rbu-image . rbu-copy rbu-copy rbu-copy rbu-copy rbu-copy rbu-copy"
      "rbu-image rbu-image rbu-image rbu-image rbu-image . rbu-points rbu-points rbu-points rbu-points rbu-points rbu-points";
    column-gap: var(--space-lg);
  }
  .about-rbu__image img {
    aspect-ratio: 3 / 4;
    height: auto;
    max-height: 26rem;
    object-fit: cover;
  }
}

/* ---- RAW FEEDING SECTION ------------------------------------------------ */
.about-raw {
  padding-block: var(--space-xl);
}

.about-raw__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  grid-template-areas:
    "raw-image"
    "raw-eyebrow"
    "raw-heading"
    "raw-copy"
    "raw-points";
}

.about-raw__heading {
  font-size: var(--text-xl);
}

.about-raw__copy {
  color: var(--colour-ink-soft);
  max-width: 60ch;
}

.about-raw__image img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

.about-raw__points {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  font-weight: 700;
}

.about-raw__points i {
  color: var(--colour-field);
  width: 1.5em;
}

@media (min-width: 64rem) {
  .about-raw__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-areas:
      "raw-eyebrow raw-eyebrow raw-eyebrow raw-eyebrow raw-eyebrow raw-eyebrow . raw-image raw-image raw-image raw-image raw-image"
      "raw-heading raw-heading raw-heading raw-heading raw-heading raw-heading . raw-image raw-image raw-image raw-image raw-image"
      "raw-copy raw-copy raw-copy raw-copy raw-copy raw-copy . raw-image raw-image raw-image raw-image raw-image"
      "raw-points raw-points raw-points raw-points raw-points raw-points . raw-image raw-image raw-image raw-image raw-image";
    column-gap: var(--space-lg);
  }
  .about-raw__image img {
    aspect-ratio: 4 / 5;
    height: auto;
    max-height: 26rem;
    object-fit: cover;
  }
}

/* ---- ABOUT CTA ----------------------------------------------------------- */
.about-cta {
  padding-block: var(--space-lg) var(--space-xl);
}

.about-cta__grid {
  background: var(--colour-field-deep);
  color: var(--colour-paper-raised);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
}

.about-cta__heading {
  color: var(--colour-paper-raised);
  font-size: var(--text-lg);
}