.villages_list > .village-construction-banner {
  grid-column: 1 / -1;
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1500px;
  height: 200px;
  min-height: 200px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 12px;
  background: #173d2c;
  color: #fff;
  text-decoration: none;
}
.village-construction-banner::before {
  background: linear-gradient(90deg, rgba(8,28,20,.86), rgba(8,28,20,.48) 45%, rgba(8,28,20,.12)), linear-gradient(0deg,rgba(8,28,20,.55),transparent 45%);
}
.village-construction-banner .realty-construction-card__image {
  animation: village-construction-pan var(--pan-duration) ease-in-out var(--pan-delay) infinite var(--pan-direction);
  animation-play-state: paused;
  object-position: center 50%;
}
.village-construction-banner.is-in-view .realty-construction-card__image { animation-play-state: running; }
.village-construction-banner .realty-construction-card__heading { padding: 18px 24px 0; gap: 7px; max-width: 760px; }
.village-construction-banner .realty-construction-card__heading strong { font-size: clamp(22px, 2.4vw, 32px); line-height: 1.08; }
.village-construction-banner .realty-construction-card__action {
  margin: auto 24px 14px;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 0;
  border-top: 0;
  transition: color .2s ease;
  text-underline-offset: 3px;
}
.village-construction-banner .realty-construction-card__arrow { transition: background-color .2s ease; }
.village-construction-banner:hover .realty-construction-card__action,
.village-construction-banner:focus-visible .realty-construction-card__action {
  color: #d8eed7;
  text-decoration: underline;
}
.village-construction-banner:hover .realty-construction-card__arrow,
.village-construction-banner:focus-visible .realty-construction-card__arrow { background-color: #d8eed7; }
@keyframes village-construction-pan {
  from { object-position: center 25%; }
  to { object-position: center 75%; }
}
@media (max-width: 768px) {
  .villages_list > .village-construction-banner {
    width: 100vw;
    max-width: none;
    margin-inline: calc((100% - 100vw) / 2);
    border-radius: 0;
  }
  .village-construction-banner .realty-construction-card__heading { padding: 14px 16px 0; gap: 6px; }
  .village-construction-banner .realty-construction-card__heading strong { font-size: 22px; }
  .village-construction-banner .realty-construction-card__action { margin: auto 16px 12px; }
}