.home-videos {
  background:#201c20;
  color:#fff;
  padding:clamp(56px,8vw,104px) clamp(18px,5vw,72px);
}

.home-videos__inner {
  width:min(1180px,100%);
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(260px,.72fr) minmax(0,1.28fr);
  gap:clamp(30px,5vw,72px);
  align-items:start;
}

.home-videos__copy {
  position:sticky;
  top:32px;
}

.home-videos__kicker {
  margin:0 0 16px;
  color:#ff73b4;
  font-size:12px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.home-videos h2 {
  margin:0;
  max-width:10ch;
  font-size:clamp(2.4rem,5vw,5.35rem);
  line-height:.9;
  font-weight:700;
  letter-spacing:-.055em;
}

.home-videos__copy p:last-child {
  max-width:34ch;
  margin:24px 0 0;
  color:rgba(255,255,255,.72);
  font-size:clamp(.98rem,1.4vw,1.14rem);
  line-height:1.55;
}

.home-videos__instagram {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  margin-top:28px;
  padding:0 20px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;
  color:#201c20;
  background:#fff;
  font-size:.92rem;
  font-weight:800;
  text-decoration:none;
  transition:transform .2s ease, background .2s ease;
}

.home-videos__instagram:hover {
  transform:translateY(-2px);
  background:#ff73b4;
}

.home-videos__instagram--below {
  display:none;
}

.home-videos__grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}

.home-video-card {
  position:relative;
  min-width:0;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.18);
  border-radius:8px;
  background:#0f0d10;
  aspect-ratio:3/4;
  box-shadow:0 20px 52px rgba(0,0,0,.24);
}

.home-video-card video,
.home-video-card > img {
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  background:#171317;
}

.home-video-card.is-post {
  cursor:pointer;
}

.home-video-card.is-post > img {
  object-fit:contain;
}

.home-video-card__viewport {
  width:100%;
  height:100%;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  scrollbar-width:none;
  -ms-overflow-style:none;
  touch-action:auto;
}

.home-video-card__viewport::-webkit-scrollbar {
  display:none;
}

.home-video-card__track {
  display:flex;
  width:100%;
  height:100%;
}

.home-video-card__track img {
  flex:0 0 100%;
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
  scroll-snap-align:center;
  scroll-snap-stop:always;
  background:#171317;
}

.home-video-card__label {
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  z-index:2;
  padding:54px 14px 14px;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.78));
}

.home-video-card__label small {
  display:block;
  width:max-content;
  max-width:100%;
  margin-bottom:9px;
  padding:5px 8px;
  border:1px solid rgba(255,255,255,.22);
  border-radius:999px;
  color:rgba(255,255,255,.75);
  background:rgba(0,0,0,.3);
  font-size:.61rem;
  line-height:1;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.home-video-card__label b,
.home-video-card__label span {
  display:block;
}

.home-video-card__label b {
  font-size:clamp(.9rem,1.45vw,1.12rem);
  line-height:1.08;
  letter-spacing:-.025em;
}

.home-video-card__label span {
  margin-top:6px;
  color:rgba(255,255,255,.7);
  font-size:.72rem;
  line-height:1.3;
}

.home-video-card__controls {
  position:absolute;
  top:50%;
  left:10px;
  right:10px;
  z-index:3;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  pointer-events:none;
  transform:translateY(-50%);
}

.home-video-card__controls button {
  width:28px;
  height:28px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:50%;
  color:rgba(255,255,255,.82);
  background:rgba(0,0,0,.24);
  font:600 18px/1 Poppins,Arial,sans-serif;
  cursor:pointer;
  opacity:.62;
  pointer-events:auto;
  backdrop-filter:blur(10px);
  transition:opacity .2s ease, background .2s ease, transform .2s ease;
}

.home-video-card__controls button:hover {
  opacity:1;
  background:rgba(0,0,0,.42);
  transform:scale(1.04);
}

.home-video-card__dots {
  position:absolute;
  left:50%;
  bottom:8px;
  z-index:4;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  max-width:70%;
  padding:4px 6px;
  border-radius:999px;
  background:rgba(0,0,0,.16);
  pointer-events:none;
  transform:translateX(-50%);
}

.home-video-card__dots i {
  width:3px;
  height:3px;
  border-radius:50%;
  background:rgba(255,255,255,.52);
  transition:width .18s ease, height .18s ease, opacity .18s ease;
}

.home-video-card__dots i.is-near {
  width:4px;
  height:4px;
  opacity:.82;
}

.home-video-card__dots i.is-active {
  width:6px;
  height:6px;
  background:#fff;
  opacity:1;
}

@media(max-width:860px) {
  .hero {
    padding-bottom:40px;
  }

  .home-videos__inner {
    grid-template-columns:1fr;
  }

  .home-videos__copy {
    position:static;
  }

  .home-videos__copy .home-videos__instagram {
    display:none;
  }

  .home-videos h2 {
    max-width:11ch;
  }

  .home-videos__grid {
    display:grid;
    grid-template-columns:1fr;
    gap:18px;
    overflow:visible;
    padding-bottom:0;
  }

  .home-video-card {
    width:100%;
    max-width:420px;
    margin:0 auto;
  }

  .home-videos__instagram--below {
    display:inline-flex;
    width:max-content;
    margin:18px auto 0;
  }

}

@media(max-width:480px) {
  .hero {
    padding-bottom:52px;
  }

  .home-videos {
    padding-top:64px;
  }
}