* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    margin: 0;
    width: 100vw;
    box-sizing: border-box;
}

a {
    text-decoration: none;
    font-family: helvetica, sans-serif;
    color: #333;
    font-size: 1.4rem;
    font-weight: light;
}

a:link {
    color: #333;
}
a:hover {
    color: rgb(52, 120, 188);
    transform: scale(1.1);
    transition: transform 6.3s ease;
   
}

a:active {
    font-style: none;
    
}

body {
    display: grid;
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    width: 100vw;
    height: 100vh;
   
}

header {
    display: grid;
    width: 100vw;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    grid-template-areas: 'logo phone-number mot-logo';
    place-items: center;
    margin-top: 10px;
    margin-bottom: 10px;
    border-bottom: 0.1px solid #777;
}

.logo {
   grid-area: logo;
   grid-column: 1 / 2;
   grid-row: 1 / 2;
   width: 100%;
}

.phone-number {
    grid-area: phone-number;
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    font-family: Helvetica;
    font-weight: bold;
    place-items: center;
}
.tel {
    font-size: clamp(0.750rem, calc(0.625rem + 0.625vw), 2.375rem);
}

.mot-logo {
    grid-area: mot-logo;
    grid-column: 3 / 4;
    grid-row: 1 / 2;
    width: 50%;
}

main {
    display: grid;
    width: 100vw;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    grid-template-areas: 'part-one part-two';
    place-items: top;
    gap: 20px;
    border-bottom: 0.1px solid #777;

}

.part-one {
    grid-area: part-one;
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    padding: 10px;
}
.offer {
    color: rgb(255, 0, 0);
    font-weight: bold;
}
.subhead-one {
    font-family: Helvetica;
    font-size: clamp(1.2rem, calc(0.769rem + 0.529vw), 2.250rem);
    color: rgb(52, 120, 188);
    padding-bottom: 4px;
}
.subhead-four {
    font-family: Helvetica;
    font-size: clamp(1.2rem, calc(0.769rem + 0.529vw), 2.250rem);
    color: rgb(18, 125, 18);
    padding-bottom: 4px;
}
.subhead-two {
    font-family: Helvetica;
    font-size: clamp(1.2rem, calc(0.769rem + 0.529vw), 2.250rem);
    color: rgb(255, 132, 0);
    padding-bottom: 4px;
}
.subhead-three {
    font-family: Helvetica;
    font-size: clamp(1.2rem, calc(0.769rem + 0.529vw), 2.250rem);
    color: rgb(255, 0, 0);
    padding-bottom: 4px;
}

p {
    font-family: Arial;
    color: #444;
    font-size: clamp(0.9rem, calc(0.654rem + 0.481vw), 2.000rem);
    padding-bottom: 10px;
}

.part-two {
    grid-area: part-two;
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    width: 90%;
    padding: 10px;
}

footer {
    display: grid;
    width: 100vw;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 20px;
    grid-template-areas: 
    'times map address'
    '. copyright .';
    place-items: center;
    width: 100vw;
}

.times {
    grid-area: times;
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    font-size: clamp(0.875rem, calc(0.9rem + 0.529vw), 2.250rem);
    color: #444;
    padding: 10px;
}

.map {
    grid-area: map;
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    padding: 10px;
}

.address {
    grid-area: address;
    grid-column: 3 / 4;
    grid-row: 1 / 2;
    font-size: clamp(0.875rem, calc(0.9rem + 0.529vw), 2.250rem);
    color: #444;
}

.email {
    font-family: Arial, Helvetica, sans-serif;
    font-size: clamp(0.500rem, calc(0.269rem + 1.154vw), 2.000rem);
    ;
}

.copyright {
    grid-area: copyright;
    place-items: center;
    color: #444;
}

@media (max-width: 768px) {
    header {
        width: 100%;
        height: 5rem;
        border-bottom: 0.5px solid #777;
}


    main {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        grid-template-areas: 
        'part-two'
        'part-one';
    }

    .part-two {
        width: 100%;
        grid-area: part-two;
    }
    .part-one {
        width: 100%;
        grid-area: part-one;
    }

    footer {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto auto;
        grid-template-areas: 
        'times'
        'map'
        'address'
        'copyright';
    }

    .map {
        grid-area: map;
        width: 100%;
        place-items: center;
    }
    iframe {
        width: 100%;
        height: 250px;
    }

    .address {
        grid-area: address;
    }

    .copyright {
        grid-area: copyright;
        font-size: 4px;
    }

}