/* ==========================================================================
   Collection subcategory template
   ========================================================================== */

.co-hero {
  display: grid;
  grid-template-columns: 6fr 6fr;
  gap: 84px;
  align-items: center;
  padding-top: 90px;
  padding-bottom: 100px;
}
.co-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(32px, 4.8vw, 60px);
  line-height: 1.06;
}
.co-intro {
  margin-top: 22px;
  font-size: 15.5px;
  line-height: 1.85;
  color: var(--muted-dark);
  max-width: 460px;
}
.co-hero__img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; }

.co-palette { display: flex; align-items: center; gap: 20px; margin-top: 36px; flex-wrap: wrap; }
.co-swatches { display: flex; }
.co-swatches span { width: 44px; height: 44px; display: block; }
.co-palette__label { font-size: 10.5px; letter-spacing: .16em; color: var(--muted); font-weight: 600; }

.co-stats {
  display: flex;
  gap: 44px;
  margin-top: 36px;
  border-top: 1px solid var(--rule);
  padding-top: 26px;
  flex-wrap: wrap;
}
.co-stat__n { font-family: var(--serif); font-size: 30px; line-height: 1; }
.co-stat__l { font-size: 10.5px; letter-spacing: .16em; color: var(--muted); margin-top: 4px; }

.co-cta { height: 420px; }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1279px) {
  .co-hero { gap: 56px; padding-top: 64px; padding-bottom: 72px; }
}

@media (max-width: 1023px) {
  .co-hero { grid-template-columns: 1fr; gap: 40px; }
  .co-hero__img { order: -1; aspect-ratio: 3 / 2; }
  .co-cta { height: auto; padding: 72px 0; }
}

@media (max-width: 767px) {
  .co-intro { font-size: 14.5px; }
  .co-swatches span { width: 36px; height: 36px; }
  .co-stats { gap: 28px; }
  .co-stat__n { font-size: 26px; }
}