.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: 30px; height: 38px; top: 3px; margin-right: 7px; font-family: siteicons; font-style: normal; font-size: 30px; }
.ico.ico-location:before { content: '\0059'; }
.area .description { color: var(--text-gray); font-size: 14px; font-family: Helvetica Neue, Helvetica, Inter, Roboto, Arial; }
.area .selected-wrap { position: relative; grid-column: 1 / 2; display: flex; flex-direction: column; padding: 20px 0 34px; }
.area .selected-wrap:after { content: ''; position: absolute; height: 100%; width: 200vw; top: 0; left: -50vw; background-color: var(--bg-gray); z-index: 0; }
.area .city-wrap { position: relative; z-index: 1; }
.area .city-wrap .city { padding: 8px 18px; margin: 6px 6px 0 0; color: var(--text); display: inline-block; font-size: 14px; font-weight: bold; font-family: Helvetica Neue, Helvetica, Inter, Roboto, Arial; border-radius: 9px; border: 2px solid var(--text); cursor: pointer; user-select: none; background-color: transparent; transition: background-color .1s ease-out; }
.area .city-wrap .city:hover,
.area .city-wrap .city.active { background-color: var(--text); color: var(--text-opposite); }
.area .city-wrap .city.active { cursor: default; }
.area .city-wrap .name { position: relative; display: block; width: 100%; font-size: 14px; font-family: Helvetica Neue, Helvetica, Inter, Roboto, Arial; margin: 12px 0; }
.area .map-wrap { grid-column: 2 / 3; grid-row: 1 / -1; position: relative; width: 100%; height: 100%; border-radius: 22px; outline: 3px solid var(--text-opposite); box-shadow: 0 32px 70px -9px rgba(0,32,70,.2); overflow: hidden; background-image: url('https://scrapride.com/images/background/no-map.webp'); 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; }
.area .checker-wrap .zip { font-size: 17px; }
}