:root {
  --featured-bg: #172e25;
  --hero-bg: #13291d;
  --hero-overlay-faint: #0d201b22;
  --hero-overlay-medium: #0d201b50;
  --hero-overlay-mobile-end: #0d201b9e;
  --hero-overlay-mobile-start: #0d201bed;
  --hero-overlay-strong: #0d201bd4;
}

html[data-season='spring'] {
  --featured-bg: #333c29;
  --hero-bg: #1e2418;
  --hero-overlay-faint: #171c1122;
  --hero-overlay-medium: #171c1150;
  --hero-overlay-mobile-end: #171c119e;
  --hero-overlay-mobile-start: #171c11ed;
  --hero-overlay-strong: #171c11d4;
}

html[data-season='fall'] {
  --featured-bg: #30271f;
  --hero-bg: #251e17;
  --hero-overlay-faint: #1d161022;
  --hero-overlay-medium: #1d161050;
  --hero-overlay-mobile-end: #1d16109e;
  --hero-overlay-mobile-start: #1d1610ed;
  --hero-overlay-strong: #1d1610d4;
}

html[data-season='winter'] {
  --featured-bg: #1d2d35;
  --hero-bg: #142128;
  --hero-overlay-faint: #0e191f22;
  --hero-overlay-medium: #0e191f50;
  --hero-overlay-mobile-end: #0e191f9e;
  --hero-overlay-mobile-start: #0e191fed;
  --hero-overlay-strong: #0e191fd4;
}

html[data-season='december'] {
  --featured-bg: #3c2428;
  --hero-bg: #271618;
  --hero-overlay-faint: #1e0f1222;
  --hero-overlay-medium: #1e0f1250;
  --hero-overlay-mobile-end: #1e0f129e;
  --hero-overlay-mobile-start: #1e0f12ed;
  --hero-overlay-strong: #1e0f12d4;
}

.listing-page .listing-opening {
  position: relative;
  min-height: 300px;
  display: flex;
  align-items: center;
  background: var(--hero-bg);
}

.listing-page .listing-opening > .opening-photo {
  position: absolute;
  inset: 0;
}

.listing-page .listing-opening > .opening-photo img {
  object-position: center 40%;
}

.listing-page .listing-opening > .opening-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    var(--hero-overlay-faint) 0%, var(--hero-overlay-strong) 23%, var(--hero-overlay-strong) 45%,
    var(--hero-overlay-medium) 74%, var(--hero-overlay-faint));
}

.listing-page .listing-opening > .page-width {
  position: relative;
  padding-block: 24px;
}

.listing-page .intro {
  max-width: 730px;
}

.listing-page .intro h1 {
  font-size: 48px;
  margin-bottom: 12px;
}

.listing-page .intro-copy {
  font-size: 16px;
  max-width: 565px;
}

.listing-page .hero-actions {
  margin-top: 16px;
}

.listing-page .listing-posts {
  padding-bottom: 32px;
  padding-top: 32px;
}

.listing-page .section-heading {
  margin-bottom: 20px;
}

.listing-page .post-list {
  display: grid;
  gap: 22px;
}

.listing-page .post-card {
  display: grid;
  grid-template-columns: 31% 1fr;
  gap: 30px;
  align-items: center;
}

.listing-page .post-card.featured {
  grid-template-columns: 42% 1fr;
  padding: 26px;
  background: var(--featured-bg);
}

.listing-page .post-card.featured .post-cover img {
  min-height: 320px;
}

@media (max-width: 1050px) {
  .listing-page .post-card.featured {
    gap: 26px;
  }

  .listing-page .post-title {
    font-size: 25px;
  }
}

@media (max-width: 800px) {
  .listing-page .section-heading {
    gap: 10px;
  }

  .listing-page .listing-opening > .opening-photo::after {
    background: linear-gradient(90deg, var(--hero-overlay-mobile-start), var(--hero-overlay-mobile-end));
  }

  .listing-page .post-card, .listing-page .post-card.featured {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .listing-page .post-card.featured .post-cover img {
    min-height: 0;
    aspect-ratio: 2;
  }

  .listing-page .post-cover img {
    aspect-ratio: 2.2;
  }
}

@media (max-width: 540px) {
  .listing-page .listing-posts {
    padding-top: 24px;
  }

  .listing-page .post-card.featured {
    padding: 18px;
  }

  .listing-page .post-cover img, .listing-page .post-card.featured .post-cover img {
    aspect-ratio: 1.55;
  }
}