.video-grid-col {
  margin-bottom: 4rem; /* default supported fallback style */
  margin-bottom: var(--space-7);
}
/* video thumbnail grid */
.video-thumb {
  position: relative;
  display: block;
  width: 100%;
  height: 0;
  padding-top: 56.25%;
  overflow: hidden;
  text-decoration: none;
  background-color: #0a0a0a;
}
.video-thumb:after {
  content: '';	
  position: absolute;
  top: 0px;
  width: 100%;
  height: 100%;
  opacity: 0;
  background-color: #0a0a0a;
  z-index: 1;	
  transition: opacity 0.2s ease 0s;
}
.video-thumb:hover:after {
  opacity: .3;
}
.video-thumb img {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  object-fit: cover;
  object-position: 50% 50%;
  background: #2b2b2b;
  opacity: 0.8;
}
.video-thumb:hover img {
  opacity: 1;
}
.video-grid-col h3 {
  width: 95%;
  max-width: 480px;
  margin: var(--space-3) 0 var(--space-2);
  font-size: 24px;
  font-size: var(--font-size-7);
  text-decoration: none;
}
.video-thumb .play-icon {
  position: absolute;
  bottom: 15px;
  left: 15px;
  z-index: 10;
  color: #fff !important;
  display: block;
}
.video-thumb .play-icon svg {
  height: 30px;
  width: auto;
  fill: #fff;
}
/* Video Modal */
.video-modal, .video-modal .video-overlay, .video-grid-modal, .video-grid-modal .video-grid-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 3000;
}
.video-modal, .video-grid-modal {
  overflow: hidden;
  position: fixed;
  opacity: 0;
  -webkit-transform: translate(500%, 0%);
  transform: translate(500%, 0%);
  -webkit-transition: -webkit-transform 0s linear 0s;
  transition: transform 0s linear 0s;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transition: opacity .5s ease-out 1s;
  transition: opacity .5s ease-out 1s;
}
.video-modal .video-overlay, .video-grid-modal .video-grid-overlay {
  z-index: 0;
  background: rgba(0, 0, 0, .9);
  opacity: 0;
  -webkit-transition: opacity .2s ease-out;
  transition: opacity .2s ease-out;
}
.video-modal-content, .video-grid-modal-content {
  position: relative;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  z-index: 1;
  margin: 0 auto;
  overflow-y: visible;
  background: #000;
  width: calc(100% - 12em);
  max-width: 1200px;	
  height: 0;
  padding-top: calc((100% - 12em) * 0.5625); /* 16:9 calc */
}
.close-video-modal, .close-video-grid-modal {
  display: block;
  position: absolute;
  left: 0;
  top: -40px;
  text-decoration: none;
  font-size: 20px;
  font-weight: bold;
  color: #fff;
}
iframe#youtube, iframe#youtube-grid {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  background: #000;
  box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.5);
}
.show-video-modal .video-modal, .show-video-grid-modal .video-grid-modal {
  opacity: 1;
  transform: translate(0%, 0%);
  -webkit-transform: translate(0%, 0%);
}
.show-video-modal .video-modal .video-overlay, .show-video-grid-modal .video-grid-modal .video-grid-overlay {
  opacity: 1;
}
.show-video-modal .video-modal-content, .show-video-grid-modal .video-grid-modal-content {
  transform: translate(0%, 0%);
  -webkit-transform: translate(0%, 0%);
}
@media (min-aspect-ratio: 16/9) {
  .video-modal-content, .video-grid-modal-content {
    width: 0;
    height: calc(100vh - 10em);
    padding-top: 0;
    padding-left: calc((100vh - 10em) * 1.7778); /* 16:9 calc */
  }
}
@media (max-width: 640px) {
  .video-modal-content, .video-grid-modal-content {
    width: calc(100% - 1em);
    padding-top: calc((100% - 1em) * 0.5625); /* 16:9 calc */
  }
}
@media screen and (max-width: 479px) {
  .video-grid-col h3 {
    text-align: center;
  }
}