.pic-n-vid-grid__wrapper {
  container-name: pic-n-vid-grid;
  container-type: inline-size;
}

.pic-n-vid-grid {
  --grid-gap: var(--spacing-200, 16px);

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

@container pic-n-vid-grid (min-width: 640px) {
  .pic-n-vid-grid {
    --pic-width: 35.5cqw;
    --grid-gap: 1.3333333cqw;
    --vid-width: calc(100cqw - (var(--pic-width) + var(--grid-gap)));
    --row-height: calc(var(--vid-width) * (9/16)); /* https://www.calculatorsoup.com/calculators/math/ratios.php?n_1=16&d_1=9&n_2=750&d_2=&action=solve */

    display: grid;
    grid-template-rows: var(--row-height);
    grid-template-columns: auto var(--vid-width);
    align-items: center;
    justify-content: space-between;
  }
}