#map{
    border: none;
    width: 100%;
}
.address, .card-person{
    margin-bottom: 44px;
}
.address h3{
    margin: 0 1vw;
}
.svg-address, .svg-person{
    background-color: #444;
    background-repeat: no-repeat;
    background-position-x: center;
    border-radius: 50%;
}
.svg-address{
    background-image: url(img/icon-map.svg);
    background-size: 50%;
    background-position-y: 70%;
}
.svg-person{
    background-image: url(img/icon-man.svg);
    background-size: 70%;
    background-position-y: 200%;
}


form{
    width: 100%;
    background: #444;
    color: #eee;
    display: flex;
    flex-wrap: wrap;
    margin-top: 2vw;
}
form, input, textarea{
    border-radius: 10px;
}
textarea, input{
    border: none;
    font-family: "Raleway", "Ralewayy", sans-serif;
    line-height: 1.4;
    background: #111;
    color: #eee;
    font-size: 100%;
}
textarea{
    background: linear-gradient(315deg, #ffb500 11px, #111 12px);
}
@keyframes corner{
    from {opacity: 0}
    to {opacity: 1}
}
textarea:focus-visible{
    outline: none;
}

.form-level1-submit{
    max-width: 100%;
    /* white-space: pre-line; */
    text-align: right;
}
.form-level2{
    width: 100%;
    display: flex;
    align-items: center;
}
input:focus-visible{
    outline: none;
}
input[type=submit]{
    background: #111;
    color: #ffb500;
    font-size: clamp(16px, 1vw, 20px);
}
.captcha{
    max-width: 100%;
    filter: invert(1) grayscale(1);
}


@media(max-width: 999px){

    #map{
        height: 70vh;
    }
    .svg-address, .svg-person{
        width: min(12vw, 80px);
        height: min(12vw, 80px);
        vertical-align: middle;
    }
    .cards h3{
        margin: 0;
        display: inline-block;
        vertical-align: middle;
        margin-left: 3vw;
    }
    .cards p{
        margin-left: min(16vw, 120px);
    }
    form h2{
        margin-top: 2.5vw;
    }
    textarea{
        width: 100%;
        height: 40vh;
        padding: 1ex;
        margin-bottom: 5px;
    }
    .form-level1-inputs{
        width: 100%;
    }
    input{
        width: 100%;
        padding: 5px;
        margin: 5px 0;
        width: 100%;
    }
    .form-level1-submit{
        width: 100%;
    }
    input[type=submit]{
        padding: 10px;
        max-width: 300px;
    }
}


@media(min-width: 1000px){

    #map{
        height: calc(100vh - 155px);
        position: sticky;
        top: 112px;
    }
    .card-person{
        display: inline-block;
        width: 48%;
    }
    .card-person>*{
        display: inline-block;
    }
    .card-person h3{
        width: calc(100% - 6vw);
        margin: 0;
    }
    .svg-address, .svg-person{
        width: 4vw;
        height: 4vw;
    }
    .svg-person{
        float: left;
        margin-right: 1vw;
    }
    textarea{
        width: calc(100% - 1vw);
        height: 12vh;
        padding: 1ex;
        flex-grow: 4;
        margin-bottom: 2ex;
    }
    input{
        padding: 0.2vw 0.5vw;
        margin: 0.5ex 1ex;
        flex-grow: 3;
    }
    .form-level1-inputs{
        display: inline-block;
        width: 50%;
        flex-grow: 12;
    }
    input[type=submit]{
        padding: 0.5vw 1vw;
    }
}


main{
    display: grid;
}
h1{grid-area: h1}
.cards{grid-area: cards}
form{grid-area: form}
#map{grid-area: map}

@media(max-width: 1000px){
    main{
        grid-template-areas:
        'h1'
        'cards'
        'map'
        'form';
    }
    form{
        margin-top: 44px;
        padding: max(16px, 3vw);
    }
    label{
        display: none;
    }
}

@media(min-width: 1000px){
    main{
        grid-template-areas:
        'h1 map'
        'cards map'
        'form map';
        grid-column-gap: 88px;
        padding: 44px 88px 44px 88px;
        grid-template-columns: 2fr 1fr;
    }
    .address *{
        display: inline-block;
        vertical-align: middle;
    }
    .captcha{
        width: 300px;
    }
    .form-level1-submit{
        width: 300px;
        flex-grow: 3;
    }
    form{
        padding: 2vw;
    }
    .address{
        font-size: 120%;
    }
}