.videos-wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: 30px;
  grid-row-gap: 30px;
}

.video.card {
  display: flex;
  flex-direction: column;
  width: auto;
}

[data-remote-video-card-trigger] {
  cursor: pointer;
}

.remote-video-card {
  aspect-ratio: 16 / 9;
  background: #000;
  overflow: hidden;
  position: relative;
}

.remote-video-card__player,
.remote-video-card__player>.field,
.remote-video-card__player .field--item,
.remote-video-card__player>.field>.field__item,
.remote-video-card__iframe,
.remote-video-card__player iframe {
  height: 100%;
  width: 100%;
}

.remote-video-card__iframe,
.remote-video-card__player iframe {
  border: 0;
  display: block;
}

.remote-video-card__poster {
  background: #000;
  border: 0;
  cursor: pointer;
  inset: 0;
  opacity: 1;
  overflow: hidden;
  padding: 0;
  position: absolute;
  transition: opacity 300ms ease, visibility 300ms ease;
  visibility: visible;
  width: 100%;
  z-index: 1;
}

.remote-video-card__thumbnail,
.remote-video-card__thumbnail>.field,
.remote-video-card__thumbnail .field--item,
.remote-video-card__thumbnail .field__item {
  display: block;
  height: 100%;
  width: 100%;
}

.remote-video-card__thumbnail .field__label,
.remote-video-card__thumbnail .field--label {
  display: none;
}

.remote-video-card__thumbnail img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.remote-video-card__play-icon {
  background: rgb(255 255 255);
  border: 2px solid var(--accent);
  border-radius: 50%;
  height: 34px;
  left: 16%;
  position: absolute;
  top: 71%;
  transform: translate(-50%, -50%);
  transition: background-color 150ms ease, transform 150ms ease;
  width: 34px;
  background-image: url(/sites/library/themes/scad_library/assets/SCAD-Libraries-icons/SCAD-Libraries-Video-icon.svg);
  background-repeat: no-repeat;
  background-position: 58% 50%;
  background-size: 40%;
}

.remote-video-card__play-icon::after {
  border-bottom: 6px solid transparent;
  border-left: 11px solid rgb(0 0 0 / 0%);
  border-top: 6px solid transparent;
  content: "";
  left: 11px;
  position: absolute;
  top: 9px;
}

.remote-video-card__poster:hover .remote-video-card__play-icon,
.remote-video-card__poster:focus-visible .remote-video-card__play-icon {
  background-color: var(--accent);
  transform: translate(-50%, -50%) scale(1.08);
}

.video.card h4.card__title {
  margin: 0;
}


@media (prefers-reduced-motion: reduce) {

  .remote-video-card__poster,
  .remote-video-card__play-icon {
    transition: none;
  }
}