/* -~-~-~-~-~-~-~-~-~-~-~-~-~
  Track Video Component
  -~-~-~-~-~-~-~-~-~-~-~-~-~ */
.video-section {
  padding-top: 55px;
}
@media (min-width: 768px) {
  .video-section {
    padding-top: 80px;
  }
}
.video-section .video-card .video-header {
  font-size: 26px;
  margin-bottom: 1rem;
}
.video-section .video-card .card-copy {
  font-size: 16px;
  margin-bottom: 1rem;
}
.video-section iframe {
  width: 100%;
  height: 100%;
  border: none;
}
.video-section .vid-thumbnail {
  max-width: 100%;
  height: auto;
  border-radius: 1rem;
  object-fit: cover;
  object-position: center 30%;
  width: 100%;
  height: 100%;
}
/* deprecated ~-~-~-~-~-~-~-~- */
.video-section .vid-playbtn {
  opacity: 0.85;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 10%;
}
/* ~-~-~-~-~-~-~-~-~-~-~-~-~-~- */
.ratio-16x9 {
  position: relative;
  width: 100%;
}
.ratio-16x9::before {
  display: block;
  content: "";
}
.ratio-16x9::before {
  padding-top: calc(9 / 16 * 100%);
  /* 56.25% */
}
.ratio-16x9 > * {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.video-card iframe {
  border-radius: 20px;
}