@layer components {
  .sticky-grid {
    --sticky-grid-sticky-top: max(6.5rem, calc(var(--header-visible-height) + 2rem));
    --sticky-grid-stacked-gap: 4rem;
    position: relative;
    box-sizing: content-box;
    margin-inline: auto;
    max-width: 100%;
    padding-inline: 1.5rem;
  }
  @media (min-width: 768px) {
    .sticky-grid {
      padding-inline: 3rem;
    }
  }
  @media (min-width: 1024px) {
    .sticky-grid {
      max-width: 120rem;
      padding-inline: 5rem;
    }
  }
  .sticky-grid {
    padding-block: 4rem;
    row-gap: var(--sticky-grid-stacked-gap);
    align-items: start;
  }
  @media (min-width: 1024px) {
    .sticky-grid {
      padding-block: 6.5rem;
    }
  }
  .sticky-grid:has(.sticky-grid__sticky-inner--mobile) {
    --sticky-grid-sticky-top: max(5.5rem, calc(var(--header-visible-height) + 1.5rem));
    padding-block-start: 0;
    row-gap: 0;
  }
  @media (min-width: 1024px) {
    .sticky-grid:has(.sticky-grid__sticky-inner--mobile) {
      padding-block-start: 6.5rem;
    }
  }
  .sticky-grid--no-container {
    padding-inline: 0;
    width: 100%;
  }
  .sticky-grid__sentinel {
    position: absolute;
    top: 0;
    height: 1px;
    width: 100%;
    pointer-events: none;
    visibility: hidden;
  }
  .sticky-grid__sentinel--s2 {
    height: 1px;
    pointer-events: none;
    visibility: hidden;
  }
  @media (min-width: 1024px) {
    .sticky-grid__sticky-inner {
      position: sticky;
      top: var(--sticky-grid-sticky-top);
    }
  }
  @media (min-width: 1024px) {
    .sticky-grid__sticky-inner--no-sticky {
      position: static;
      top: unset;
    }
  }
  .sticky-grid__section--1 {
    position: relative;
    height: 100%;
  }
  @media (max-width: 1023px) {
    .sticky-grid__section--1:has(.sticky-grid__sticky-inner--mobile) {
      position: sticky;
      top: var(--header-visible-height);
      height: auto;
      z-index: 20;
      background-color: var(--theme-surface-primary);
      padding-block: 1.5rem 1rem;
      transition: padding-block 0.5s cubic-bezier(0.65, 0.05, 0.36, 1);
    }
  }
  @media (max-width: 1023px) and (prefers-reduced-motion: reduce) {
    .sticky-grid__section--1:has(.sticky-grid__sticky-inner--mobile) {
      transition: none;
    }
  }
  @media (min-width: 1024px) {
    .sticky-grid__section--2 {
      grid-column: var(--sticky-grid-section2-start, 5)/span var(--sticky-grid-section2-span, 8);
    }
  }
  @media (max-width: 1023px) {
    .sticky-grid--clip-section-2 .sticky-grid__section--2 {
      overflow: clip;
    }
  }
}