/* ==========================================================================
   5 · Ein Ort zum Ankommen – der Ort
   ========================================================================== */

.location {
  padding-block: var(--section-y);
  background: var(--blue-deep);
  color: var(--ivory);
}

.location .eyebrow { color: rgb(245 240 232 / 0.6); }
.location .h2,
.location .lead { color: var(--ivory); }
.location .location__text p:not(.lead) { color: rgb(245 240 232 / 0.72); }

.location__intro {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 2rem;
}
.location__intro .section-head { grid-column: 1 / 7; }
.location__text { grid-column: 8 / 13; padding-top: 2.5rem; }

.location__features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 2rem;
  margin-top: 2.5rem;
  border-top: 1px solid rgb(245 240 232 / 0.18);
}
.location__features li {
  padding: 1rem 0;
  border-bottom: 1px solid rgb(245 240 232 / 0.18);
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
}

/* Galerie */
.gallery {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(0.75rem, 1.4vw, 1.25rem);
  margin-top: clamp(5rem, 10vw, 8rem);
}

.gallery__item { overflow: hidden; }
.gallery__item img {
  width: 100%;
  height: 100%;
  aspect-ratio: var(--ar, 3 / 2);
  object-fit: cover;
  object-position: var(--pos, 50% 50%);
}

.gallery__item--a { grid-column: 1 / 8; --ar: 3 / 2; }
.gallery__item--b { grid-column: 8 / 13; }
.gallery__item--b img { aspect-ratio: auto; }
.gallery__item--c,
.gallery__item--d,
.gallery__item--e { --ar: 4 / 5; }
.gallery__item--c { grid-column: 1 / 5; }
.gallery__item--d { grid-column: 5 / 9; }
.gallery__item--e { grid-column: 9 / 13; }

@media (max-width: 900px) {
  .location__intro { display: block; }
  .gallery__item--a,
  .gallery__item--b,
  .gallery__item--e { grid-column: 1 / -1; }
  .gallery__item--b img { aspect-ratio: 4 / 3; }
  .gallery__item--c { grid-column: 1 / 7; }
  .gallery__item--d { grid-column: 7 / 13; }
  .gallery__item--e { --ar: 3 / 2; }
}

@media (max-width: 520px) {
  .location__features { grid-template-columns: 1fr; }
}