.leaf-title {
  position: relative;
  display: block;
  width: fit-content;
  margin-inline: auto;
}

.leaf-title > svg {
  position: absolute;
  top: 50%;
  right: calc(100% + var(--s-3));
  width: 13px;
  height: auto;
  color: var(--fg-accent);
  transform: translateY(-50%);
}

.overture__title {
  margin-bottom: var(--s-6);
  font: var(--font-caps);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-accent);
  transition: color var(--duration-quick) var(--ease);
}

.overture__title:hover {
  color: var(--fg-accent-hover);
}

.overture__text {
  max-width: 34ch;
  margin-inline: auto;
  font-variant-numeric: lining-nums;
}

.overture [data-reveal="rise"] {
  --reveal-delay: var(--reveal-delay-1);
}

.tiles {
  padding-bottom: var(--s-9);
}

.tiles__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-6) var(--s-5);
}

@media (width <= 1023px) {
  .tiles__grid {
    grid-template-columns: repeat(2, 1fr);
    column-gap: var(--s-4);
  }
}

.cover {
  position: relative;
}

.cover__media {
  position: relative;
  overflow: hidden;
  background: var(--ink-2);
  aspect-ratio: 16 / 9;
}

.cover__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focus, 50% 50%);
  transition: transform var(--duration-zoom) var(--ease);
}

@media (hover: hover) {
  .cover:hover .cover__media img {
    transform: scale(1.04);
  }
}

.cover__body {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: var(--s-7) var(--gutter) var(--s-8);
  text-align: center;
  background: linear-gradient(to bottom, var(--ink), var(--veil-chip) 18%, var(--ink-clear) 35%, var(--ink-clear) 55%, var(--veil-chip-open) 82%, var(--ink));
}

.cover__eyebrow {
  margin: 0;
}

.cover__eyebrow[data-reveal] {
  --reveal-delay: var(--reveal-delay-1);
}

.cover__foot[data-reveal] {
  --reveal-delay: var(--reveal-delay-2);
}

.cover__link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.cover__text {
  margin-top: var(--s-4);
}

@media (width <= 639px) {
  .cover__media {
    aspect-ratio: 4 / 5;
  }

  .cover__body {
    padding: var(--s-6) var(--gutter) var(--s-7);
  }
}