.dome-videos-gallery-shortcode,
.dome-videos-gallery-shortcode * {
  box-sizing: border-box;
}

.dome-videos-gallery-shortcode {
  padding: 50px 15px 90px;
  color: #808080;
  background-color: #f9f9f9;
  text-align: center;
}

.dome-videos-gallery-shortcode .video-list-title {
  margin: 0;
  color: #808080;
  font-size: clamp(2.1rem, 4vw, 3.1rem);
  font-weight: 300;
  line-height: 1.2;
}

.dome-videos-gallery-shortcode .video-gallery {
  display: flex;
  flex-flow: row wrap;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  max-width: 1140px;
  margin: 55px auto 0;
  padding: 0;
  list-style: none;
  gap: 15px;
}

.dome-videos-gallery-shortcode .video-item,
.dome-videos-gallery-shortcode .video-title,
.dome-videos-gallery-shortcode .video-link {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: stretch;
}

.dome-videos-gallery-shortcode .video-item {
  position: relative;
  flex: 0 0 100%;
  margin: 0;
  background-color: #333;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.dome-videos-gallery-shortcode .video-title,
.dome-videos-gallery-shortcode .video-link {
  width: 100%;
  height: 100%;
  margin: 0;
}

.dome-videos-gallery-shortcode .video-title {
  background-image:
    linear-gradient(to bottom, transparent 40%, rgba(0, 0, 0, 0.72) 100%),
    radial-gradient(circle, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.72) 60px, transparent 61px, transparent 100%);
}

.dome-videos-gallery-shortcode .video-link {
  padding: 0 2em 1.4em;
  color: #fff;
  font-size: 1.2rem;
  font-weight: 300;
  line-height: 1.2;
  text-align: left;
  text-decoration: none;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg version='1.1' viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m8.8496 5.2676v53.465l46.301-26.732-1.5-0.86523zm2 3.4629 40.303 23.27-40.303 23.27z' style='fill: %23ffffff;'/%3E%3C/svg%3E");
  background-position: 52% center;
  background-repeat: no-repeat;
  background-size: 60px;
}

.dome-videos-gallery-shortcode .video-link:hover,
.dome-videos-gallery-shortcode .video-link:focus {
  color: #fff;
}

@media screen and (min-width: 961px) {
  .dome-videos-gallery-shortcode .video-item {
    flex-basis: calc((100% - 30px) / 3);
    max-width: calc((1140px - 30px) / 3);
    min-width: 300px;
    height: calc((100vw - 60px) / 3);
    max-height: calc((1140px - 30px) / 3.2);
    min-height: 300px;
  }
}

@media screen and (min-width: 37.5em) and (max-width: 960px) {
  .dome-videos-gallery-shortcode .video-item {
    flex-basis: calc((100% - 15px) / 2);
    min-width: 270px;
    height: calc((100vw - 45px) / 2);
    min-height: 270px;
  }

  .dome-videos-gallery-shortcode .video-link {
    background-size: 45px;
  }
}

@media only screen and (max-width: 37.5em) {
  .dome-videos-gallery-shortcode {
    padding-top: 30px;
    padding-bottom: 50px;
  }

  .dome-videos-gallery-shortcode .video-gallery {
    margin-top: 35px;
  }

  .dome-videos-gallery-shortcode .video-item {
    height: calc(100vw - 30px);
  }

  .dome-videos-gallery-shortcode .video-link {
    background-position: 51% center;
  }
}