/* ── Video ── */

.video {
  position: relative;
  width: 100%;
  background: var(--color-contrast, #f3f4f6);
  border-radius: var(--border-radius);
  overflow: hidden;
}

.video__iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* YouTube: 16:9 aspect ratio */
.video--youtube {
  aspect-ratio: 16 / 9;
}

/* Square: 1:1 */
.video--square {
  aspect-ratio: 1 / 1;
}

/* Portrait: 9:16 */
.video--portrait {
  aspect-ratio: 9 / 16;
}

/* Fallback for browsers without aspect-ratio support */
@supports not (aspect-ratio: 1) {
  .video--youtube {
    padding-bottom: 56.25%;
    height: 0;
  }

  .video--square {
    padding-bottom: 100%;
    height: 0;
  }

  .video--portrait {
    padding-bottom: 177.78%;
    height: 0;
  }
}