.vt {
  position: relative;

  z-index: 6;
  background: var(--page-night);

  padding: 12rem 0 0;
}

.vt-head {
  grid-column: content;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  column-gap: var(--gap);
  align-items: center;
  margin-bottom: 7rem;
}
.vt-eyebrow { grid-column: 1 / -1; grid-row: 1; }
.vt-title   { grid-column: 1; grid-row: 2; }
.vt-note    { grid-column: 2; grid-row: 2; }

.vt-eyebrow {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  margin-bottom: 2.2rem;
  font-family: var(--font-sans);
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--gold-lift);
}
.vt-eyebrow i {
  width: 3.4rem;
  height: var(--hair);
  background: currentColor;
  opacity: .5;
}

.vt-title {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 5.6rem;
  line-height: 1.1;
  letter-spacing: -.024em;
  color: var(--paper);
  text-wrap: balance;
}

.vt-title span { display: block; }

.vt-note {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 1.65rem;
  line-height: 1.6;
  color: var(--on-dark);
}

.vt-grid {
  grid-column: content;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
  list-style: none;
  margin: 0;
  padding: 0;
}

.vt-card {
  position: relative;
  display: block;

  aspect-ratio: 5 / 6;
  overflow: hidden;
  background: var(--ink);
  border: var(--hair) solid var(--line-dark);
}

.vt-shot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  display: block;
  transform: scale(1.02);
  transition: transform 1.2s var(--ease-arch);
}

/* A hard shadow rising from the bottom: the lowest 30% is near-solid black,
   so the name, line and button read on any photograph. */
.vt-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    0deg,
    rgb(0 0 0 / .94) 0%,
    rgb(0 0 0 / .86) 30%,
    rgb(0 0 0 / .55) 48%,
    rgb(0 0 0 / .18) 66%,
    rgb(0 0 0 / 0)   80%);
  transition: opacity .6s var(--ease);
}

.vt-name,
.vt-line { text-shadow: 0 1px 1.4rem rgb(0 0 0 / .55); }

.vt-body {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 3.2rem 3rem 3.4rem;
}

.vt-name {
  margin: 0 0 1.2rem;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 2.8rem;
  line-height: 1.15;
  letter-spacing: -.018em;
  color: #fff;
}
.vt-line {
  margin: 0 0 2.6rem;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 1.7rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, .8);

}

.vt-btn { --h: 4.4rem; padding: 0 2rem; }

@media (hover: hover) {
  .vt-card:hover .vt-shot { transform: scale(1.07); }
  .vt-card:hover::after { opacity: .94; }
}

@media (max-width: 1200px) {
  .vt-title { font-size: 4.6rem; }
  .vt-name  { font-size: 2.6rem; }
}

@media (max-width: 991px) {
  .vt { padding: 9rem 0 0; }

  .vt-head { grid-template-columns: 1fr; margin-bottom: 5.5rem; }
  .vt-eyebrow, .vt-title, .vt-note { grid-column: 1; }
  .vt-title { grid-row: 2; }
  .vt-note  { grid-row: 3; margin-top: 2.4rem; }
  .vt-title { font-size: 3.9rem; }

  .vt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vt-card:last-child { grid-column: span 2; aspect-ratio: 16 / 9; }
  .vt-body { padding: 2.8rem 2.6rem 3rem; }
}

@media (max-width: 767px) {
  .vt { padding: 7rem 0 0; }
  .vt-title { font-size: 3.2rem; }
  .vt-note  { font-size: 1.55rem; }
  .vt-grid { grid-template-columns: minmax(0, 1fr); gap: 1.8rem; }

  .vt-card, .vt-card:last-child { grid-column: auto; aspect-ratio: 4 / 5; }
  .vt-name { font-size: 2.8rem; }
  .vt-line { margin-bottom: 2.2rem; }
}