/* Homepage greenhouse mosaic using the source photography's 4:3 composition. */
.nursery-gallery {
  background: #fff;
}

.nursery-gallery-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(17rem, .62fr);
  gap: 1.25rem clamp(2rem, 6vw, 6.5rem);
  align-items: end;
  margin-bottom: clamp(2rem, 4vw, 3.25rem);
}

.nursery-gallery-heading > .eyebrow {
  grid-column: 1 / -1;
  margin-bottom: 0;
}

.nursery-gallery-heading > div {
  max-width: 27rem;
  justify-self: end;
}

.nursery-gallery-heading > div > p {
  color: var(--muted);
}

.nursery-gallery-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: clamp(.625rem, 1vw, 1rem);
  aspect-ratio: 8 / 3;
}

.nursery-shot {
  position: relative;
  min-width: 0;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  background: var(--soft);
}

.nursery-shot-main {
  grid-row: 1 / 3;
}

.nursery-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}

.nursery-shot:hover img {
  transform: scale(1.018);
}

.nursery-shot figcaption {
  position: absolute;
  left: clamp(1rem, 2vw, 1.75rem);
  bottom: clamp(1rem, 2vw, 1.75rem);
  padding: .55rem .8rem;
  background: #153324d9;
  color: #fff;
  font-size: .6875rem;
  line-height: 1.4;
  letter-spacing: .1em;
}

@media (max-width: 900px) {
  .nursery-gallery-heading {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .nursery-gallery-heading > .eyebrow {
    grid-column: auto;
  }

  .nursery-gallery-heading > div {
    justify-self: start;
  }
}

@media (max-width: 700px) {
  .nursery-gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto;
    gap: .625rem;
    aspect-ratio: auto;
  }

  .nursery-shot,
  .nursery-shot-main {
    grid-row: auto;
    aspect-ratio: 4 / 3;
  }

  .nursery-shot-main {
    grid-column: 1 / -1;
  }

  .nursery-shot figcaption {
    left: .875rem;
    bottom: .875rem;
    padding: .45rem .625rem;
    font-size: .625rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nursery-shot img {
    transition: none;
  }
}