/* Aspect ratios + media fit */
.acl-cover {
  display: block !important;
  overflow: hidden;
  border-radius: 12px;
  background: #111;
  margin: 0 0 10px;
  position: relative;
}

.acl-cover.ratio-16x9 { aspect-ratio: 16 / 9; }
.acl-cover.ratio-1x1  { aspect-ratio: 1 / 1; }
.acl-cover.ratio-9x16 { aspect-ratio: 9 / 16; }

.acl-cover--single {
  width: 100%;
  margin: 0 auto 10px;
}

.acl-cover--single.acl-cover--width-240  { max-width: 240px; }
.acl-cover--single.acl-cover--width-360  { max-width: 360px; }
.acl-cover--single.acl-cover--width-480  { max-width: 480px; }
.acl-cover--single.acl-cover--width-640  { max-width: 640px; }
.acl-cover--single.acl-cover--width-768  { max-width: 768px; }
.acl-cover--single.acl-cover--width-960  { max-width: 960px; }
.acl-cover--single.acl-cover--width-1200 { max-width: 1200px; }
.acl-cover--single.acl-cover--width-full { max-width: 100%; }

.acl-cover__video,
.acl-cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  vertical-align: middle;
  transition: opacity 0.25s ease-in-out;
}

/* Ensure paused videos show their poster or first frame */
.acl-cover__video {
  background-color: #000;
  opacity: 1;
}

/* Optional: fade-in when video starts playing */
.acl-cover__video.is-playing {
  opacity: 1;
}

/* Make sure controls don’t overflow border radius */
.acl-cover__video::-webkit-media-controls {
  border-radius: 0 0 12px 12px;
}