.side-by-side {
  --card-overlay-gradient-bottom: linear-gradient(180deg, var(--s2a-color-transparent-black-00) 71.64%, var(--s2a-color-transparent-black-72) 100%);
  --card-overlay-gradient-top: linear-gradient(140deg, var(--s2a-color-transparent-black-48) -1.92%, var(--s2a-color-transparent-black-00) 38.8%);
  --card-gap: var(--s2a-spacing-xs);

  display: grid;
  grid-template-columns: 1fr;
  gap: var(--card-gap);

  &.dark {
    background-color: unset;
  }

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

  > .card:first-child {
    --parallax-stagger-index: 0.5;
  }

  > .card:last-child {
    --parallax-stagger-index: 1.5;
  }

  .media {
    position: relative;
    border-radius: inherit;

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

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

    video, img {
      object-fit: cover;
    }

    .icon {
      position: absolute;
      width: 32px;
      height: auto;
      z-index: 1;
      inset-block-start: var(--s2a-spacing-md);
      inset-inline-start: var(--s2a-spacing-md);
    }
  }

  .card-overlay {
    --card-overlay-gradient: var(--card-overlay-gradient-bottom);

    overflow: hidden;
    display: flex;
    flex-direction: column;

    .content-aux {
      aspect-ratio: 1 / 1.1;
      width: 100%;
      height: auto;
    }

    &.dark {
      background-color: unset;
    }

    .media {
      position: absolute;
      inset: 0;

      :is(img, video) {
        object-position: top;
      }
    }

    .media::after {
      content: '';
      position: absolute;
      inset: 0;
      background: var(--card-overlay-gradient);
      filter: blur(0px);
      pointer-events: none;
    }

    .foreground {
      --card-overlay-padding: var(--s2a-spacing-lg);

      position: relative;
      padding-block: 0 var(--card-overlay-padding);
      padding-inline: var(--card-overlay-padding);
      z-index: 1;
      display: flex;
      flex-direction: column;
      gap: var(--s2a-spacing-2xs);
      max-width: 450px;
    }
  }

  .card-stacked {
    --parallax-stagger-index: 1.5;
    --card-stack-padding: 15%;

    display: flex;
    flex-direction: column;
    padding-inline: var(--card-stack-padding) 0;

    .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 {
      aspect-ratio: 4/5;
    }

  }

  &.featured {
    .card-overlay {
      display: flex;
      border: none;
    }

    &:has(+ .side-by-side.equal) {
      margin-block-end: var(--card-gap);
    }
  }

  &.small-left .card-stacked {
    padding-inline: 0 var(--card-stack-padding);;
  }
}



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

    .card-overlay {
      --card-overlay-gradient: var(--card-overlay-gradient-top);

      flex-direction: row;
      aspect-ratio: 1 / 1.1;
      align-items: flex-start;
      .foreground {
        --card-overlay-padding-bottom: var(--card-overlay-padding);

        max-width: 480px;
        padding: var(--card-overlay-padding);
      }

      .content-aux { display: none; }
    }

    .card-stacked {
      --card-stack-padding: 0;

      .media {
        min-height: 306px;

        .icon {
          inset-block-start: var(--s2a-spacing-lg);
          inset-inline-start: var(--s2a-spacing-lg);
        }
      }

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

    &.reverse {
      grid-template-columns: 1fr 1.81fr;
    }

    &.equal {
      grid-template-columns: 0.81fr 1fr 1fr;

      > :first-child {
        grid-column: 2;
      }
    }

    &.featured {
      grid-template-columns: 1fr;
      .card-overlay {
        --card-overlay-gradient: var(--card-overlay-gradient-bottom);

        align-items: flex-end;
        aspect-ratio: 16 / 9;
      }
    }
  }
}

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

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

      .media .icon {
        inset-block-start: var(--s2a-spacing-xl);
        inset-inline-start: var(--s2a-spacing-xl);
      }
    }

    &.featured .card-overlay .foreground {
      --card-overlay-padding: var(--s2a-spacing-2xl);
    }
  }
}

@media (width < 768px) {
  .side-by-side .card-overlay button.play-pause-button {
    inset-block-start: var(--s2a-spacing-md);
  }
}