/** At this monitor size it is wider than Figma */
section.feature-section {
  position: relative;
  display: grid;
  grid-template-columns: subgrid;
  grid-column: full-bleed-start / full-bleed-end;
  padding-block-start: 12.5rem;
  padding-block-end: 3rem;

  /* all direct children go into the body area by default */
}
section.feature-section > * {
    grid-column: body-start / body-end;
  }
section.feature-section .image-wrapper {
    grid-column: full-bleed-start / full-bleed-end !important;
    position: absolute;
    inset: 0;
    z-index: -1;
  }
section.feature-section .image-wrapper::after {
      content: "";
      position: absolute;
      inset: 0;
      background: hsla(0, 0%, 0%, 0.55);
    }
section.feature-section .image-wrapper img {
      width: 100%;
      height: 100%;
      -o-object-fit: cover;
         object-fit: cover;
    }
section.feature-section .content-wrapper {
    display: grid;
    grid-template-columns: 1fr;
    align-items: end;
  }
@media (min-width: 50.001rem) {
section.feature-section .content-wrapper {
      grid-template-columns: 3fr 2fr;
  }
    }
section.feature-section .content-wrapper h2 {
      --heading-color: var(--white);
      margin: 0;
      line-height: 1cap;
    }
section.feature-section .content-wrapper .button {
      --button-color: var(--white);
    }
section.feature-section .content-wrapper .button:hover {
        --button-color: var(--daffodil);
      }
section.feature-section .section--content {
    display: grid;
  }
section.feature-section[data-variant="crossfade"] h2,section.feature-section[data-variant="crossfade"] h3,section.feature-section[data-variant="crossfade"] p,section.feature-section[data-variant="crossfade"] span {
      color: var(--white);
    }
section.feature-section[data-variant="crossfade"] h3 {
      font-size: 3.625rem;
      margin-top: .5rem;
      margin-bottom: 2rem;
      font-weight: normal;
    }
section.feature-section[data-variant="crossfade"] span {
      font-size: 0.875rem;
      text-transform: uppercase;
    }
section.feature-section[data-variant="crossfade"] .image-wrapper::after {
        background: linear-gradient(
          to right,
          rgba(0, 0, 0, 0.8) 0%,
          rgba(0, 0, 0, 0) 100%
        );
      }