/* includes video.js css */
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@200;300;400;500;600&display=swap");
:root {
  --demo__spacing--sm: 10px;
  --demo__spacing--md: 20px;
  --demo__spacing--lg: 40px;
  --demo__spacing--xl: 60px;
  --demo__spacing--xxl: 80px;
  --demo__radius: 30px;
  --demo__radius--sm: 20px;
  --demo__font-weight--extra-light: 200;
  --demo__font-weight--light: 300;
  --demo__font-weight--regular: 400;
  --demo__font-weight--semi-bold: 500;
  --demo__font-weight--bold: 600;
  --demo__color--text: #1a1a1a;
  --demo__color--bg-dark: #002a3d;
  --demo__color--bg-light: #667f8a;
  --demo__color--hero-text: white;
  --demo__gradient: linear-gradient(180deg, var(--demo__color--bg-dark), var(--demo__color--bg-light) 50%);
  --demo__narrow-text-max-width: 500px;
  --demo__icon--play: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 500' fill='rgba(255,255,255,0.75)'%3E%3Cpath d='M208.008 343.75l125-93.75-125-93.75v187.5zM250 41.992q85.938 0 146.973 61.035t61.035 146.973-61.035 146.973-146.973 61.035-146.973-61.035-61.035-146.973 61.035-146.973 146.973-61.035z'%3E%3C/path%3E%3C/svg%3E%0A");
  --demo__icon--close: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0.5' y='0.5' width='20.9787' height='21' rx='10.4893' stroke='white'/%3E%3Cpath d='M13.9922 8L7.99219 14M7.99219 8L13.9922 14' stroke='white' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}

body {
  font-family: "Montserrat";
}

.s-wrapper .c-video-section {
  margin: 0 auto;
  background: var(--demo__gradient);
  border-radius: var(--demo__radius);
  color: var(--demo__color--hero-text);
  overflow: hidden;
  padding: var(--demo__spacing--xxl) 0;
  text-align: center;
}
.s-wrapper .c-video-section__header {
  margin-bottom: var(--demo__spacing--xxl);
  padding: 0 var(--demo__spacing--md);
}
.s-wrapper .c-video-section__title {
  color: var(--demo__color--hero-text);
  font-size: 1.6em !important;
  font-weight: var(--demo__font-weight--light);
  text-transform: uppercase;
  margin: 0;
}
.s-wrapper .c-video-section__subtitle {
  font-size: 1.4em;
  font-weight: var(--demo__font-size--semi-bold);
}
.s-wrapper .c-video-grid {
  align-items: center;
  display: grid;
  grid-gap: var(--demo__spacing--lg);
  grid-template-columns: repeat(3, 1fr);
  max-width: 1000px;
  margin: 0 auto;
  overflow-y: auto;
  max-height: 600px;
  padding: 0 var(--demo__spacing--lg);
}
.s-wrapper .c-video-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.s-wrapper .c-ex-video {
  align-items: center;
  aspect-ratio: 1;
  background: no-repeat center;
  background-size: 60px, cover;
  border-radius: 140px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  position: relative;
  transition: all 0.5s ease-out;
  width: 280px;
}
.s-wrapper .c-ex-video__close {
  aspect-ratio: 1;
  background: no-repeat center/80%;
  background-image: var(--demo__icon--close);
  display: none;
  position: absolute;
  right: 5px;
  top: 5px;
  width: 30px;
  z-index: 1;
}
.s-wrapper .c-ex-video.is-active {
  aspect-ratio: 9/16;
  border-radius: var(--demo__radius--sm);
  transition-duration: 0.3s;
}
.s-wrapper .c-ex-video.is-active .c-ex-video__close {
  display: block;
}