.contacts{
    padding: 10px;
}
.contacts-title{
    font-size: 40px;
    font-weight: 600;
}
.contacts .map{
    height: 400px;
    border-radius: 10px;
}
.map-popup{
    display: flex;
    flex-direction: column;
    gap: 16px;
    color: var(--grey2-color);
}
.contacts-items .company-address{
    font-weight: 600;
    font-size: 18px;
    color: #333333;
}
.contacts-items{
    border-radius: 10px;
    background: var(--light-grey-color);
}
.contacts-office{
    width: 310px;
    height: 230px;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}
.black-svg{
    width: 24px;
    height: 24px;
}
@media (max-width: 430px){
    .contacts{
        gap: 20px;
    }
    .contacts-items{
        gap: 12px;
        flex-direction: column;
    }
    .contacts-items > div{
        gap: 12px;
    }
    .contacts h2{
        font-size: 20px;
    }
    .contacts-office{
        border-top-right-radius: 10px;
        border-bottom-left-radius: 0;
    }
    .contacts-items .company-address{
        font-size: 14px;
    }
    .contacts-items-block{
        padding: 0 8px 8px 8px;
    }
    .contacts-items-block > div:nth-child(2){
        flex-direction: column;
        gap: 12px;
    }
    .popup-phones > div{
        gap: 12px;
    }
    .contacts .leaflet-popup-content{
        width: 200px;
    }
    .contacts .map{
        height: 250px;
    }
}