.hv-stories { position: relative; z-index: 1; }
.hv-stories .an-band { height: 112px; }
.hv-stories .an-two { font: 300 44px/1.1 var(--font-display); letter-spacing: -.014em; }
.hv-stories__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0 auto; }

.st {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between; gap: 32px;
  height: 620px; margin: 0; padding: 32px;
  border-radius: 8px;
  color: #fff;
  background: #1b1e25;
}
.st__photo {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 0;
}
.st::before {
  content: ""; position: absolute; inset: 0 0 auto; z-index: 1; height: 30%; pointer-events: none;
  background: linear-gradient(180deg, rgb(12 14 22 / .34), rgb(12 14 22 / 0));
}
.st__blur {
  position: absolute; inset: auto 0 0; z-index: 1; height: 62%; pointer-events: none;
  border-bottom-left-radius: inherit; border-bottom-right-radius: inherit;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  background: linear-gradient(180deg, rgb(12 14 22 / .1), rgb(12 14 22 / .42) 50%, rgb(12 14 22 / .7));
  -webkit-mask: linear-gradient(180deg, transparent, #000 42%); mask: linear-gradient(180deg, transparent, #000 42%);
}

.st__logo {
  position: relative; z-index: 2; align-self: center;
  width: auto; height: 34px;
  filter: brightness(0) invert(1) drop-shadow(0 1px 12px rgb(0 0 0 / .2));
}
.st__draft {
  position: absolute; z-index: 2; top: 14px; right: 14px;
  padding: 5px 9px; border-radius: 999px;
  background: rgb(255 255 255 / .12); border: 1px dashed rgb(255 255 255 / .45);
  font: 500 11px/1 var(--font-ui); color: #fff;
}

.st__body { position: relative; z-index: 2; max-width: 460px; }
.st__stat { margin: 0; font: 500 52px/1 var(--font-display); letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.st__label { margin: 8px 0 0; font: 500 15px/1.35 var(--font-ui); letter-spacing: -.01em; }
.st__quote { margin: 20px 0 0; }
.st__quote p { margin: 0; text-indent: -.42em; font: 400 16px/1.5 var(--font-ui); letter-spacing: -.01em; color: rgb(255 255 255 / .92); text-wrap: pretty; }
.st__who { margin-top: 16px; font: 400 13.5px/1.4 var(--font-ui); }
.st__who b { display: block; font-weight: 500; font-size: 14.5px; }
.st__who span { color: rgb(255 255 255 / .72); }

.st__link { position: absolute; inset: 0; z-index: 3; border-radius: inherit; }
.st__link:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
.st__more {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 18px; padding-bottom: 2px;
  border-bottom: 1px solid rgb(255 255 255 / .4);
  font: 500 14px/1.2 var(--font-ui); color: #fff;
  transition: border-color .2s ease;
}
.st__more svg { width: 15px; height: 15px; transition: translate .2s cubic-bezier(.2, .8, .3, 1); }
.st:has(.st__link:hover) .st__more { border-color: #fff; }
.st:has(.st__link:hover) .st__more svg { translate: 3px 0; }
.st:has(.st__link) .st__photo { transition: scale .6s cubic-bezier(.2, .8, .3, 1); }
.st:has(.st__link:hover) .st__photo { scale: 1.02; }

.hv-stories + .connect { margin-top: 112px; }

@media (max-width: 1200px) {
  .hv-stories__row { padding: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .st__more svg, .st:has(.st__link) .st__photo { transition: none; }
}

@media (max-width: 1100px) {
  .st { height: 580px; padding: 28px; }
  .st__stat { font-size: 46px; }
  .st__quote p { font-size: 15px; }
}
@media (max-width: 900px) {
  .hv-stories .an-band { height: 96px; }
  .hv-stories .an-two { font-size: 38px; }
  .st { height: 560px; padding: 24px; }
}
@media (max-width: 760px) {
  .hv-stories .an-band { height: 72px; }
  .hv-stories .an-two { font-size: 34px; }
  .hv-stories__row {
    display: flex; gap: 12px;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: 16px;
    scrollbar-width: none;
  }
  .hv-stories__row::-webkit-scrollbar { display: none; }
  .st { flex: 0 0 min(400px, 84%); height: auto; min-height: 520px; scroll-snap-align: start; padding: 22px 20px; }
  .st__logo { height: 28px; }
  .st__stat { font-size: 42px; }
  .st__quote { margin-top: 16px; }
}
@media (max-width: 560px) {
  .hv-stories .an-two { font-size: 28px; }
}