html,
body {
    margin: 0;
    padding: 0;
    background-color: #717171;
    --width: 600px;
}

div {
    box-sizing: border-box;
}

* {
    font-family: 'Montserrat';
    color: black;
    letter-spacing: 0;
}

a {
    color: black;
    text-decoration: none;
}


.header {
    background-color: black;
    height: 62px;
    max-width: var(--width);
    margin: 0 auto;
    padding: 12px 0 12px 20px;
    display: flex;
}

.logo {
    width: 190px;
    height: 36px;
    display: block;
}


.content {
    max-width: var(--width);
    min-height: 100px;
    margin: 0 auto;
    padding: 24px;
    background-color: #e5ebdc;
    background-image: url('welcome_l.png'), url('welcome_r.png');
    background-position: top left, top right;
    background-repeat: no-repeat, no-repeat;
    background-size: 281px 93px, 285px 323px;
}

.content h2 {
    text-align: center;
    margin: 24px;
    padding: 0;
    font-size: 20px;
    font-weight: normal;
}

.welcome {
    min-height: 323px;
    padding: 110px 220px 10px 36px;
    font-size: 16px;
}

.welcome h1 {
    margin: 0 75px 0 0;
    padding: 0;
    font-weight: normal;
    font-size: 22px;
}

.widgets {
    display: grid;
    min-height: 100px;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    gap: 24px;
}

.widget {
    border-radius: 30px;
    width: 264px
}

.widget_element {
    grid-area: 1 / 1 / 2 / 3;
    background-image: url('company_element.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 552px 201px;
    width: 552px;
    height: 201px;
}

.widget_routetime {
    grid-area: 2 / 1 / 3 / 3;
    background-image: url('company_routetime.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 552px 184px;
    width: 552px;
    height: 184px;
}


.widget_score {
    grid-area: 3 / 1 / 4 / 2;
    background-image: url('company_score.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 264px 278px;
    width: 264px;
    height: 278px;
}

.widget_count {
    grid-area: 3 / 2 / 5 / 3;
    background-image: url('company_count.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 264px 358px;
    width: 264px;
    height: 358px;
}

.widget_hours {
    grid-area: 4 / 1 / 6 / 2;
    background-image: url('company_hours.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 264px 358px;
    width: 264px;
    height: 358px;
}

.widget_routes {
    grid-area: 5 / 2 / 6 / 3;
    background-image: url('company_routes.png');
    background-position: top;
    background-repeat: no-repeat;
    background-size: 264px 273.5px;
    width: 264px;
    height: 273px;
}

.widget_app {
    grid-area: 6 / 1 / 7 / 3;
    background-image: url('company_app.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 552px 201px;
    width: 552px;
    height: 201px;
}



.footer {
    font-size: 9px;
    font-weight: 400;
    border-top: 1px solid black;
    padding: 24px;
    background-image: url('logo_black.png');
    background-repeat: no-repeat;
    background-size: 190px 25px;
    background-position: 350px 25px;
}

@media (max-width: 600px) {
    .content {
        width: 320px;
    }
    .welcome {
        min-height: 323px;
        padding: 330px 24px 24px 24px;
        font-size: 16px;
    }

    .welcome h1 {
        margin: 0;
    }

    .widget_element {
        grid-area: 1 / 1 / 2 / 2;
        background-image: url('company_element_m.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 272px 465px ;
        width: 272px;
        height: 465px;
    }

    .widget_routetime {
        grid-area: 2 / 1 / 3 / 2;
        background-image: url('company_routetime_m.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 272px 414px;
        width: 272px;
        height: 414px;
    }


    .widget_score {
        grid-area: 3 / 1 / 4 / 2;
        background-image: url('company_score.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 272px 278px;
        width: 272px;
        height: 278px;
    }

    .widget_count {
        grid-area: 4 / 1 / 5 / 2;
        background-image: url('company_count.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 272px 358px;
        width: 272px;
        height: 358px;
    }

    .widget_hours {
        grid-area: 5 / 1 / 6 / 2;
        background-image: url('company_hours.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 272px 358px;
        width: 272px;
        height: 358px;
    }

    .widget_routes {
        grid-area: 6 / 1 / 7 / 2;
        background-image: url('company_routes.png');
        background-position: top;
        background-repeat: no-repeat;
        background-size: 272px 273.5px;
        width: 272px;
        height: 273px;
    }

    .widget_app {
        grid-area: 7 / 1 / 9 / 2;
        background-image: url('company_app_m.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 272px 397px;
        width: 272px;
        height: 397px;
    }

    .footer {
        background-image: url('logo_black_m.png');
        background-size: 108px 16.5px;
        background-position: right;
    }
}