/* Container sizing is up to your GB grid; this just styles the card */
.video-card {
  display: block;
  width: 100%;
}

/* Rounded corners + clipping for both poster and actual video */
.video-frame {
  position: relative;
  border-radius: 28px;   /* match your design */
  overflow: hidden;
  aspect-ratio: 9 / 16;   /* or 16/9; adjust to your art direction */
  background: #f2f2f2;
}

/* Poster image fills the frame */
.video-poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Native <video> will inherit rounding because it sits inside .video-frame */
.video-frame video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Play button */
.video-play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 84px;
  height: 84px;
  display: grid;
  place-items: center;
  border: 0;
  background: none;
  cursor: pointer;
  padding: 0;
}

.video-play__icon {
  width: 84px;
  height: 84px;
  display: block;
}

button.video-play:hover {
    background-color: transparent;
}

/* Color the SVG (circle = green, triangle = white) */
.video-play__icon circle { fill: #2CD47C; }
.video-play__icon polygon { fill: #FFFFFF; }

/* Optional: shrink button on smaller screens */
@media (max-width: 480px) {
  .video-play, .video-play__icon { width: 64px; height: 64px; }
}