.videoWithCardWrapper {
  width: 100%;
  container-type: inline-size;
  container-name: videoWithCardWrapper;

  @media screen and (min-width: 768px) {
    .videoWithCard {
      grid-template-columns: 1fr auto;
      min-height: 261px;
      gap: var(--Space-x1);

      .card {
        width: 320px;
      }
    }

    @container videoWithCardWrapper (min-width: 793px) {
      .videoWithCard {
        min-height: 445px;
        gap: var(--Space-x2);

        .card {
          width: 391px;
        }
      }
    }
  }
}

.videoWithCard {
  display: grid;
  width: 100%;
  gap: var(--Space-x025);
}

.card {
  display: grid;
  min-height: 200px;
  height: 100%;
  width: 100%;
  padding: var(--Space-x3) var(--Space-x4);
  align-content: center;
  border-radius: var(--Corner-radius-lg);

  &.style-primary-1 {
    background: var(--Surface-Brand-Primary-1-Default);
    color: var(--Text-Brand-OnPrimary-1-Heading);
  }

  &.style-primary-2 {
    background: var(--Surface-Brand-Primary-2-Default);
    color: var(--Text-Brand-OnPrimary-2-Default);

    .heading {
      color: var(--Text-Brand-OnPrimary-2-Heading);
    }
  }

  &.variant-quote {
    gap: var(--Space-x3);

    @media screen and (min-width: 768px) {
      gap: var(--Space-x4);
    }
  }

  &.variant-text {
    gap: var(--Space-x2);
  }
}

.blockquote {
  &::before {
    content: '“';
  }
  &::after {
    content: '”';
  }
}

.cite {
  font-style: normal;
  display: grid;
}