.assortment-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  align-items: end;
  gap: 20px 42px;
  margin-bottom: clamp(25px, 3.3vw, 50px);
}

.assortment-heading h2 {
  font-size: clamp(39px, 5.2vw, 76px);
  text-wrap: balance;
}

.assortment-heading p {
  max-width: 36ch;
  padding-bottom: 3px;
  color: var(--moss);
}

.assortment-spread {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  grid-template-rows: repeat(2, auto);
  gap: 12px;
}

.assortment-spread article {
  display: grid;
  min-width: 0;
}

.assortment-fragrance {
  grid-row: 1 / 3;
  grid-template-rows: minmax(0, 1fr) auto;
  background: var(--forest);
  color: var(--paper);
}

.assortment-care,
.assortment-home {
  grid-template-columns: minmax(0, .85fr) minmax(0, 1fr);
}

.assortment-care { background: var(--sage); }
.assortment-home { background: #dce4e3; }

.assortment-photo {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: var(--ink);
}

.assortment-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 49%;
}

.assortment-fragrance .assortment-photo {
  min-height: clamp(290px, 32vw, 510px);
}

.assortment-care .assortment-photo img { object-position: 50% 67%; }
.assortment-home .assortment-photo img { object-position: 50% 50%; }

.assortment-copy {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 10px;
  min-width: 0;
  padding: clamp(16px, 2.25vw, 35px);
}

.assortment-copy h3 {
  margin: 0;
  font: 500 clamp(22px, 2.65vw, 43px)/1.1 var(--display);
  letter-spacing: -.055em;
  overflow-wrap: anywhere;
}

.assortment-count {
  display: flex;
  align-items: baseline;
  gap: 7px;
  font-size: 13px;
}

.assortment-count strong {
  font: 600 clamp(29px, 3.45vw, 56px)/1 var(--body);
  font-variant-numeric: tabular-nums;
  letter-spacing: .015em;
}

.assortment-description {
  max-width: 32ch;
  color: var(--moss);
  font-size: 14px;
}

.assortment-copy .text-link {
  margin-top: 3px;
  font-size: 13px;
}

.assortment-fragrance .assortment-description { color: #dbe4d4; }
.assortment-fragrance .text-link { color: var(--lime); }
.assortment-fragrance :focus-visible { outline-color: var(--lime); }

.assortment-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 21px;
}

@media (max-width: 850px) {
  .assortment-heading { grid-template-columns: minmax(0, 1fr); }
  .assortment-heading h2 { text-wrap: initial; }
  .assortment-spread {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
  }
  .assortment-fragrance { grid-row: auto; }
  .assortment-fragrance .assortment-photo { min-height: 0; aspect-ratio: 1.37; }
  .assortment-care,
  .assortment-home { min-height: 200px; }
  .assortment-footer { justify-content: flex-start; }
}

@media (max-width: 470px) {
  .assortment-heading h2 { font-size: clamp(33px, 10vw, 39px); }
  .assortment-care,
  .assortment-home { grid-template-columns: minmax(0, .66fr) minmax(0, 1fr); }
  .assortment-copy { gap: 7px; padding: 13px; }
}