.yt-short-wrap {
  display: flex;
  justify-content: center;
  padding: 1rem;
}

.yt-short {
  aspect-ratio: 9 / 16;      /* native portrait */
  width: clamp(240px, 32vw, 320px); /* scales nicely across devices */
  background: #000;         /* prevents letterboxing flash */
  border-radius: 18px;       /* polished edges */
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(0,0,0,0.18);
}

.yt-short iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

@supports not (aspect-ratio: 1) {
  .yt-short {
    position: relative;
    width: clamp(240px, 32vw, 480px);
  }

  .yt-short::before {
    content: "";
    display: block;
    padding-top: 177.78%; /* 16/9 inverted → 9:16 */
  }
  .yt-short iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }
}

@media (max-width: 420px) and (min-height: 700px) {
  .yt-short {
    width: min(92vw, 520px);
  }
}