.landmarks {
  border: 0;
  gap: 12px;
}

.landmarks article {
  position: relative;
  min-height: 390px;
  padding: 0;
  overflow: hidden;
  background: #09221f;
  border: 1px solid rgba(202, 163, 92, .3);
}

.landmarks article:hover {
  background: #09221f;
  box-shadow: 0 18px 38px rgba(7, 27, 25, .2);
}

.landmarks article > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .55s ease;
}

.landmarks article:hover > img { transform: scale(1.04); }

.landmarks article::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(5,20,18,.05) 8%, rgba(5,20,18,.9) 80%, rgba(5,20,18,.98));
}

.landmarks article > div {
  position: absolute;
  z-index: 2;
  inset-inline: 22px;
  bottom: 22px;
  color: #fff;
}

.landmarks article div > span { font: 600 11px Manrope; color: #e4bc6a; }
.landmarks small { margin-top: 16px; color: rgba(255,255,255,.65); }
.landmarks h3 { font-size: 21px; color: #fff; }
.landmarks p { color: rgba(255,255,255,.8); }
.landmarks article.landmark-featured {
  grid-column: span 2;
  display: grid;
  grid-template-rows: minmax(360px, 54vw) auto;
  min-height: 0;
  background: #071d1a;
}
.landmarks article.landmark-featured::after { display: none; }
.landmarks article.landmark-featured > img {
  position: relative;
  inset: auto;
  height: 100%;
  min-height: 360px;
}
.landmarks article.landmark-featured > div {
  position: relative;
  inset: auto;
  bottom: auto;
  max-width: none;
  padding: 26px 30px 30px;
  color: #fff;
  background: linear-gradient(135deg, #071d1a, #0b2a25);
}
.landmarks article.landmark-featured small { color: #d4b36e; }
.landmarks article.landmark-featured h3 { margin-top: 8px; font-size: clamp(24px,2.25vw,36px); line-height: 1.65; color: #fff; }
.landmarks article.landmark-featured p { margin-top: 12px; max-width: 78ch; font-size: 16px; line-height: 2; color: rgba(255,255,255,.84); }
.landmark-credits { margin: 12px 0 0; font-size: 9px; line-height: 1.8; color: #7f827e; }

@media (max-width: 900px) { .landmarks article { min-height: 340px; } .landmarks article.landmark-featured { grid-template-rows: 420px auto; } }
@media (max-width: 520px) {
  .landmarks article { min-height: 380px; }
  .landmarks article.landmark-featured { grid-column: auto; grid-template-rows: 300px auto; min-height: 0; }
  .landmarks article.landmark-featured > img { min-height: 300px; }
  .landmarks article.landmark-featured > div { padding: 22px 20px 26px; }
  .landmarks article.landmark-featured h3 { font-size: 24px; line-height: 1.7; }
  .landmarks article.landmark-featured p { font-size: 16px; line-height: 2; }
}