/** Main CSS **/
html,body{
    margin:0;
    padding:0;
    height:100%;
}

body {
    display: grid;
    place-items: center;
    font-family: Arial;
    font-weight: 400;
    color: #002748;
    background-color: #e3edf7;
}

a, a:focus, a:active {
    color: #002748;
    text-decoration:none;
}
a:hover{
    text-decoration:underline;
}
.hero{
    max-width:1960px;
    padding:3rem;
    display:grid;
    grid-template-columns:1fr 27.5rem 1fr;
    place-items:flex-end;
    gap:3rem;
    font-size:1.3rem;
}
.hero_image{
    grid-column:2/3;
}
    .hero_image img {
        width: 100%;
        max-width: 27.5rem;
    }

    .hero_text{
        font-size:0.8em;
        line-height:1.25em;
        max-width:29em;
    }

:root {
    font-size: 20px;
}

@media screen and (max-width: 2100px) {
    :root {
        font-size: calc(.95vw + .01rem);
    }
}
@media screen and (max-width: 991px) {
    :root {
        font-size: 16px;
        
    }
    .hero {
        grid-template-columns: 1fr  1fr;
        font-size:1.1rem;
    }
    .hero_image {
        grid-column:unset;
    }

        .hero_image img {
            width: 100%;
            max-width: 100%;
        }
}

@media screen and (max-width: 767px) {
    :root {
        font-size: 14px;
    }

    .hero {
        display:flex;
        flex-direction:column;
    }


        .hero_image img {
            width: 100%;
            max-width: 70%;
            display:block;
            margin:auto;
        }
}