@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro&display=swap'); /* прямой импорт шрифта с google fonts */

body { /* отключение отступов, добавление шрифта и цвета бекграунда */
    margin: 0;
    padding: 0;
    background-color:#26517C;
    font-family: 'Source Sans Pro', sans-serif;
    color: white;
}

html, body {
    height: 100%;
    margin: 0;
}


.wrapper {
    min-height: 100%;
    margin-bottom: 90px;
}

.header { /* сделал весь хедер флексом для простого расположения в нём разделов */
    display: flex;
    width: 100%;
}




/* Меню регистрации */
    /* main */
    main { 
        display: flex;
        justify-content: center;
        flex-direction: column;

        margin-bottom: 150px;

    }

    .contact_cards {
        display: flex;
        justify-content: center;
        align-self: center;
        column-gap: 150px;

        width: 400px;
        height: 350px;

        margin: 50px;

    }

    .email form {
        display: grid;
        place-content: center;
        text-align: center;
        width: 400px;
    }.email form input {
        margin: 0 auto;
        border-radius: 3px;
        border: 1px solid black;
        height: 25px;
        width: 250px;
    }


    .nums {
        display: flex;
        justify-content: center;
        flex-direction: column;

        text-align: center;
        width: 400px;


    }

    .phone_numbers {
        display: flex;
        flex-direction: column;
        justify-content: center;

        text-align: center;

        height: 70%;
    }

    #vk {
        display: grid;
        place-content: center;
        grid-template-columns: 40px 200px;

        text-decoration: none;
        font-size: 20px;
        color: white;

        transition: 0.7s;
        width: 250px
    }

    #vk img {
        width: 40px;
        height: 40px;
        margin: auto 0;
    }

    #vk:hover {
        scale: 1.15;

        transition: 0.7s;
    }



    #numbers {
        font-size: 20px;
    }

    .social_block {

        font-size: 25px;

        border: 1px solid black;
    }



    /* встройка карты */
        .yandex_map {
            display: grid;
            place-content: center;
            grid-template-columns: 420px 500px;

            text-align: center;
            font-size: 25px;

            margin: 0 20px;
        }

        .yandex_map img {
            height:100%;
        }

        .map_in_block {
            width: 500px;
            height: 450px;

            margin: 0 30px;
        }



@media only screen and (max-width: 375px) {

    .contact_cards {

        flex-wrap: wrap;
        column-gap: 0px;
        margin: 0 0 400px 0;

    }

    .yandex_map {
        display: flex;
        flex-wrap: wrap;
    }

    .yandex_map img {
        margin: 0 0 50px 0;
    }


}

@media only screen and (max-width: 414px) {

    .contact_cards {

        flex-wrap: wrap;
        column-gap: 0px;
        margin: 0 0 400px 0;

    }

    .yandex_map {
        display: flex;
        flex-wrap: wrap;
    }

    .yandex_map img {
        margin: 0 0 50px 0;
    }


}

@media only screen and (max-width: 900px) {

    .contact_cards {

        flex-wrap: wrap;
        column-gap: 0px;
        margin: 0 0 400px 0;

    }

    .yandex_map {
        display: flex;
        flex-wrap: wrap;
    }

    .yandex_map img {
        margin: 0 0 50px 0;
    }


}