.contacts {
    --gray-color: #C7C8CA;
    --black-color: #000;
    --block-padding: 50px;
    --miniblock-padding: 30px;
    --normal-font: 14px;
    --big-font: 20px;
    --super-big-font: 26px;

    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin-bottom: var(--block-padding);
}

@media screen and (min-width: 768px) {
    .contacts {
        --block-padding: 80px;
        --miniblock-padding: 50px;
        --normal-font: 16px;
        --big-font: 22px;
        --super-big-font: 30px;
    }
}
@media screen and (min-width: 992px) {
    .contacts {
        --block-padding: 80px;
        --miniblock-padding: 50px;
        --normal-font: 16px;
        --big-font: 22px;
        --super-big-font: 30px;
    }
}
@media screen and (min-width: 1600px) {
    .contacts {
        --block-padding: 100px;
        --miniblock-padding: 50px;
        --normal-font: 18px;
        --big-font: 26px;
        --super-big-font: 37px;
    }
}

.contacts_item {
    cursor: pointer;
    border-radius: 10px;
    background: #F4F4F4;
    padding: 15px;
    display: flex;
    flex-direction: column;
    transition-duration: 0.3s;
}

.
.contacts_item:hover {
    margin-top: 15px;
    margin-bottom: -15px;
}

.mobile_contact_detail_map {
    display: none;
    width: 100%;
    /*grid-column: 1/5;*/
}

.active .mobile_contact_detail_map {
    display: block;
}

.contacts_item_prew {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
    /*height: 330px;*/
    justify-items: center
}

.contacts_item_prew_title {
    display: grid;
    justify-items: center;
}

.contacts_item_prew img {
/*    height: 100%;
    max-width: 100%;*/
}

.contacts_item_title {
    flex-shrink: 0;
    text-align: center;
    font-size: var(--big-font);
    text-align: center;
}

.mobile_contact_detail {
    display: none;
}

.active .mobile_contact_detail {
    display: flex;
    margin-top: 20px;
    flex-direction: column;
    gap: 30px;
}

.mobile_contact_detail_item {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mobile_contact_detail_title {
    margin-bottom: 10px;
}

.mobile_contact_detail_subtitle {
    font-size: 10px;
    padding: 5px 10px;
    width: 100%;
    background: var(--gray-color);
}

.mobile_contact_detail_text {
    font-size: 12px;
}

.pc_contact_detail.active, .pc_contact_detail {
    display: none;
}

@media screen and (min-width: 1200px) {
    /* .contacts {
         grid-template-columns: 1fr 1fr 1fr 1fr;
     }*/
    .contacts_item {
        cursor: inherit;
    }
    .contacts_item:hover {
        margin-top: 0px;
        margin-bottom: 0px;
    }
    .active .mobile_contact_detail {
        margin-top: 0;
        gap: 0;
    }

    .contacts_item_prew {
        display: grid;
        grid-template-columns: 1fr 3fr;
        height: 330px;
    }

    .mobile_contact_detail_map {
        display: block;
    }

    .contacts_item_title {
        text-align: center;
    }

    .contacts_item.active {
        position: relative;
    }

    .contacts_item.active:after {
        /*content: "";*/
        position: absolute;
        top: calc(100% - 10px);
        left: 0;
        right: 0;
        height: 40px;
        width: 100%;
        background: #F4F4F4;
    }

    .mobile_contact_detail {
        display: flex;
        flex-direction: column;
        /*gap: 30px;*/
    }

    .mobile_contact_detail_block {
        display: grid;
        grid-template-columns: 1fr 3fr;
        gap: 20px;
        border-top: 1px solid var(--gray-color);
        padding: 30px 0;
    }

    .pc_contact_detail.active {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 30px;
        grid-column: 1/5;
        padding: 30px 20px;
        border-radius: 10px;
        background: #F4F4F4;
    }

    .mobile_contact_detail_item {
        /*width: 320px;*/
    }


    .mobile_contact_detail_subtitle {
        font-size: 12px;
        padding: 5px 10px;
        width: 100%;
        background: var(--gray-color);
    }

    .mobile_contact_detail_text {
        font-size: 14px;
    }
}

@media screen and (min-width: 1600px) {

}