/* Area */
.area { margin: 40px 0 60px 0; }
.area .center { display: grid; gap: 10px 50px; grid-template-columns: repeat(2, 1fr); grid-template-rows: 1fr auto 50px; }
.area .description-wrap { grid-column: 1 / 2; }
.area h2 { text-align: left; margin-block-start: 30px; margin-block-end: 15px; }
.area h2 .ico { position: relative; display: inline-block; width: 38px; height: 38px; top: 5px; margin-right: 7px; }
.area .description { color: #3C3C3C; font-size: 14px; font-family: Helvetica Neue, Inter; }
.area .info-wrap { position: relative; grid-column: 1 / 2; display: flex; flex-direction: column; gap: 14px; padding: 30px 0; }
.area .info-wrap:after { content: ''; position: absolute; height: 100%; width: 200vw; top: 0; left: -50vw; background-color: var(--bg-softblue); z-index: 0; }
.area .info-wrap .item-wrap { position: relative; display: flex; flex-direction: column; padding-left: 50px; width: calc(100% - 50px); z-index: 1; }
.area .info-wrap .item-wrap .ico { position: absolute; left: 8px; top: 4px; width: 28px; height: 28px; }
.area .info-wrap .item-wrap .name { font-size: 15px; font-weight: bold; color: var(--darkblue); }
.area .info-wrap .item-wrap .item { font-size: 14px; color: #555; }
.area .info-wrap .item-wrap .item.city { text-decoration: underline dotted; cursor: pointer; }
.area .info-wrap .item-wrap .item.city.active { text-decoration: none; cursor: default; }
.area .map-wrap { grid-column: 2 / 3; grid-row: 1 / -1; position: relative; width: 100%; height: 100%; border-radius: 22px; outline: 5px solid white; box-shadow: 0 32px 70px -9px rgba(0,32,70,.2); overflow: hidden; background-image: url('https://well-home.com.ua/images/background/no-map.jpg'); background-repeat: no-repeat; background-position: center center; background-size: 100% 100%; }
.area .map-wrap .map { display: none; }
.area .map-wrap .map.active { display: inline; width: 100%; height: 100%; }

@media screen and (max-width: 1140px) {
.area .map-wrap { grid-column: 2 / 3; grid-row: 1 / -1; width: calc(100% + 20px); border-radius: 22px 0 0 22px; }
}

@media screen and (max-width: 750px) {
.area .center { grid-template-columns: 1fr; grid-template-rows: 1fr auto 300px; }
.area h2 { text-align: center; }
.area .map-wrap { grid-column: 1 / 2; grid-row: 3 / 4; width: 100%; border-radius: 22px; }
}