@media (min-width: 1000px) {
    .findNearestOffice .section__body{display:grid;grid-template-columns:calc(var(--font-size-16)*34.75) 1fr;grid-template-areas: "findNearestOfficeHeader findNearestOfficeMap" "findNearestOfficeList findNearestOfficeMap";row-gap: calc(var(--font-size-16)*2.875);column-gap: calc(var(--font-size-16)*1.25)}
    .findNearestOffice__header{grid-area: findNearestOfficeHeader}
    .findNearestOffice__list{grid-area: findNearestOfficeList}
    .findNearestOffice__mapWrapper{grid-area: findNearestOfficeMap}
}
@media (max-width: 1000px) {
    .choiceView{display: flex;width: 100%;gap: 10px;margin: 20px 0}
    .choiceView button.btn{flex: 1 1 100%;justify-content: center}
    .findNearestOffice__list:not(.mobileShow), .findNearestOffice__mapWrapper:not(.mobileShow){display: none !important;}
    .findNearestOffice__mapWrapper {height: 70vh;}
}

.findNearestOffice__header{display: flex;flex-direction: column;gap: calc(var(--font-size-16)*2);padding-right:calc(var(--font-size-16)*1.25);}
.findNearestOffice__header hr {border-color: var(--border-color);height: 1px;width: 100%;margin: 0;}
.findNearestOffice__countResults{font-size: calc(var(--font-size-16)*1.125)}
.findNearestOffice__selectList{display: flex;align-items: center;justify-content: space-between;flex-wrap: wrap}
@media (max-width: 500px) {
    .findNearestOffice__selectList{flex-direction: column;gap: 16px;align-items:flex-start}
}

.findNearestOffice__list{height: calc(var(--font-size-16)*38.5);overflow-x: hidden;overflow-y: auto;padding-right:calc(var(--font-size-16)*1.25);}
.findNearestOffice__list::-webkit-scrollbar {width: 4px;}
.findNearestOffice__list::-webkit-scrollbar-track {background: transparent;}
.findNearestOffice__list::-webkit-scrollbar-thumb {background-color: var(--black);border-radius: 20px;}

.findNearestOfficeCard{padding: calc(var(--font-size-16)*2) 0}
.findNearestOfficeCard:not(:last-child){border-bottom: 1px solid var(--border-color)}
.findNearestOfficeCard, .findNearestOfficeCard__body{display: flex;flex-direction: column;gap: calc(var(--font-size-16)*1.5);}
.findNearestOfficeCard__row{display: grid;grid-template-columns: calc(var(--font-size-16)*6) 1fr;gap:var(--font-size-16);font-size: calc(var(--font-size-16)*1.125)}
.findNearestOfficeCard__row a {transition: .2s linear}
.findNearestOfficeCard__title{display: flex;align-items: center;gap:calc(var(--font-size-16)*1.5)}
.findNearestOfficeCard__title img{flex: 0 0 calc(var(--font-size-16)*2);width:calc(var(--font-size-16)*2);}
@media (hover:hover) {
    .findNearestOfficeCard__row a:hover {color:var(--brand-color)}
}

.findNearestOffice__map {width: 100%;height: 100%;}
.findNearestOffice__map > ymaps{width: 100%!important;height:100%!important;}
.mapHint{padding:var(--font-size-16);display: flex;flex-direction: column;gap: calc(var(--font-size-16)*1.5);}