/*Scroll Reveal*/
.content-grid {
    --container-max-width: 72.5rem;
    --min-inline-margin: 2rem;
    display: grid;
    grid-template-columns:
      [full-width-start breakout-left-start] minmax(1rem, 1fr)
      [content-start breakout-right-start] min(
        100% - var(--min-inline-margin),
        var(--container-max-width)
      )
      [content-end breakout-left-start] minmax(1rem, 1fr)
      [full-width-end breakout-right-end];
  }
  
  .content-grid > *,
  .full-width > * {
    grid-column: content;
  }
  
  .content-grid > .full-width {
    grid-column: full-width;
  
    display: grid;
    grid-template-columns: inherit;
  }
  
  .breakout-right {
    grid-column: breakout-right;
  }
  
  .breakout-left {
    grid-column: breakout-left;
  }
  
  .scroll-reveal {
    text-align: center;
    padding-block: clamp(8rem, 25vh, 20rem);
  }
  
  .scroll-reveal h2 {
    font-size: 5rem;
    line-height: 1;
  }
  
  .scroll-reveal p {
    font-size: 1.75rem;
    line-height: 1.3;
    max-width: 55ch;
    margin-inline: auto;
  }
  .scroll-reveal > * {
    margin: 0;
  }
  
  @keyframes fade-gradient {
    0% {
      background-image: linear-gradient(90deg, red, blue);
    }
    50% {
      background-image: linear-gradient(90deg, red, blue);
    }
    100% {
      background-image: linear-gradient(90deg, red, blue);
    }
  }
  
  .scroll-reveal span {
    background-clip: text;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    animation: fade-gradient 3s linear forwards;
    color: hsl(0 0% 100% / 0.2);
  }
  
  
  .scroll-reveal h2 span {
    animation-range-start: cover 20vh;
    animation-range-end: cover 30vh;
  }
  
  @keyframes scroll-reveal {
    to {
      background-size: 100% 100%;
    }
  }