/*
  About 18 — standalone HTML/CSS implementation.
  No build step, no framework, no external dependency: copy this file and
  index.html into any project and open it as-is.
*/

*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
  --background: #ffffff;
  --foreground: #0a0a0a;
  --muted-foreground: #737373;
  --brand: #39ff14;
  --font-sans:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji";
}

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--foreground);
  background-color: var(--background);
  line-height: 1.5;
}

/* Motion — disabled entirely under reduced motion; every element already
   renders at its final, fully visible state outside this media query.
   "Soft parallax entry": the two images use a larger translateY offset, a
   slower duration and a later delay than the surrounding text, so they
   settle into place after and "behind" the copy for a sense of depth. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes al-up {
    from {
      opacity: 0;
      transform: translateY(16px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes al-parallax-1 {
    from {
      opacity: 0;
      transform: translateY(40px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes al-parallax-2 {
    from {
      opacity: 0;
      transform: translateY(56px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .about__eyebrow,
  .about__heading,
  .about__text {
    animation: al-up 750ms cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  .about__heading {
    animation-delay: 80ms;
  }
  .about__text--mid {
    animation-delay: 200ms;
  }
  .about__text--last {
    animation-delay: 320ms;
  }

  .about__image--one {
    animation: al-parallax-1 950ms cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: 120ms;
  }

  .about__image--two {
    animation: al-parallax-2 1150ms cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: 260ms;
  }
}

.about {
  padding: clamp(3.5rem, 3rem + 2.5vw, 5rem) clamp(1rem, 0.3rem + 3vw, 2rem);
}

/* Editorial story grid: mobile stacks the four blocks in reading order
   (intro, image1, continuation, image2) so the second photo lands right
   after the story keeps going rather than tacked on at the very end. At
   1024px it becomes a true two-row, two-column composition — intro copy
   beside the first photo up top, second photo beside the closing copy
   below — so both photographs are visible within the section's initial
   composition instead of one arriving after a long scroll. */
.about__grid {
  max-width: 72rem;
  margin: 0 auto;
  display: grid;
  row-gap: 2rem;
  grid-template-areas: "intro" "image1" "continuation" "image2";
}

.about__intro {
  grid-area: intro;
}

.about__eyebrow {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brand);
}

.about__heading {
  margin: 0.75rem 0 0;
  font-size: clamp(1.875rem, 1.5rem + 1.9vw, 2.75rem);
  line-height: 1.12;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--foreground);
}

.about__text {
  margin: 1.5rem 0 0;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--muted-foreground);
}

.about__intro .about__text {
  margin-top: 1.5rem;
}

.about__continuation {
  grid-area: continuation;
}

.about__continuation .about__text--mid {
  margin-top: 0;
}

.about__continuation .about__text--last {
  margin-top: 1.5rem;
}

.about__image {
  position: relative;
  overflow: hidden;
  border-radius: 1rem;
}

.about__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about__image--one {
  grid-area: image1;
  aspect-ratio: 4 / 3;
  width: 100%;
}

.about__image--two {
  grid-area: image2;
  aspect-ratio: 1 / 1;
  width: 100%;
  max-width: 24rem;
}

@media (min-width: 1024px) {
  .about__grid {
    grid-template-columns: 1fr 1fr;
    column-gap: 3.5rem;
    row-gap: 3rem;
    align-items: center;
    grid-template-areas:
      "intro image1"
      "image2 continuation";
  }

  .about__image--two {
    max-width: none;
  }
}
About 18

Requirements

Dependencies

Usage
