.side-by-side {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s2a-spacing-xs);

  .card {
    border-radius: var(--s2a-border-radius-md);
    position: relative;
  }

  .media {
    border-radius: inherit;

    picture,
    video,
    img {
      display: block;
      width: 100%;
      height: 100%;
      border-radius: inherit;
    }

    video, img {
      object-fit: cover;
    }
  }

  .card-overlay {
    --parallax-stagger-index: 0.5;

    position: relative;
    overflow: hidden;
    aspect-ratio: 33/37;
    border: var(--s2a-border-width-md) solid var(--s2a-color-transparent-white-12);

    &.dark {
      background-color: unset;
    }

    .media {
      position: absolute;
      inset: 0;
    }

    .media::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(144deg, var(--s2a-color-transparent-black-88) 6.95%, var(--s2a-color-transparent-black-00) 27.98%);
      filter: blur(0px);
      pointer-events: none;
    }

    .video-container {
      border-radius: inherit;
      width: 100%;
    }

    .foreground {
      position: relative;
      padding: var(--s2a-spacing-lg);
      z-index: 1;
      display: flex;
      flex-direction: column;
      gap: var(--s2a-spacing-2xs);
      max-width: 320px;
    }
  }

  .card-stacked {
    --parallax-stagger-index: 1.5;

    display: flex;
    flex-direction: column;
    padding-left: 15%;

    .foreground {
      padding: var(--s2a-spacing-md);
      display: flex;
      flex-direction: column;
      gap: var(--s2a-spacing-2xs);
      max-width: 400px;

      [class^='body-'] {
        color: var(--s2a-color-content-subtle);
      }
    }
  }
}



@media (width >= 768px) {
  .side-by-side {
    grid-template-columns: 1.81fr 1fr;
    align-items: start;

    .card-overlay {
      .foreground {
        max-width: 480px;
      }
    }

    .card-stacked {
      padding-left: 0;

      .media {
        min-height: 306px;
      }

      .foreground {
        max-width: 480px;
      }
    }
  }
}

@media (width >= 1280px) {
  .side-by-side {
    .card-overlay {
      .foreground {
        padding: var(--s2a-spacing-xl);
      }
    }

    .card-stacked {
      padding-left: 0;
      .foreground {
        padding: var(--s2a-spacing-xl);
      }
    }
  }
}