body{
    background-color: #f6f6f6;
}
#Garage{
    font-family: 'Abhaya Libre';
    color: rgb(88, 69, 63);
    display: grid;
    height: 100vh;
    width: 100vw;
    grid-template-areas: 
        "hr"
        "tt"
        "st"
        "cn"
        "ft"
    ;
    text-align: center;
}

#ftr{
    display: block;
}

div.hdr{
    grid-area: hr
}

header:first-of-type{
    grid-area: tt;
}

header:last-of-type{
    grid-area: st
}

article{
    grid-area: cn   
}

footer{
    grid-area: ft
}

section header h1{
    font-size: 5rem;
    margin-top: 20px;
    margin-bottom: 20px;
}

section header h2{
    font-size: 3rem;
    margin-bottom: 3%;
    padding-left: 5%;
    padding-right: 5%;
}

section article h4{
    font-size: 2rem;
}

article{
    display: grid;
    height: auto;
    width: 100vw;
    grid-gap: 10px;
    padding-left: 5%;
    padding-right: 5%;
    padding-bottom: 10px;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(5, 
    minmax(min-content max-content));
   
   
}


img.garage{
    height: auto;
    width: 100%;
    padding-bottom: 3%;
}
img.garage2{
    height: 25vh;
    width: 100%;
    padding-bottom: 3%;
    object-fit: cover;
}
article h4{
    display: flex;
    justify-content: center;
}

section div.hdr{
    width: 100vw;
    height: 30vh;
    background-image: url("https://autosantiguospuebla.com.mx/galeria/garage/hdr.jpg");
    background-size: cover;
    background-position: center;
}
section div.hdr2{
    width: 100vw;
    height: 30vh;
    background-image: url("../../galeria/galeria/20.JPG");
    background-size: cover;
    background-position: center;
}

@media (max-width: 600px){

section header h1{
    font-size: 3rem;
    margin-top: 20px;
    margin-bottom: 20px;
}

section header h2{
    font-size: 2rem;
    margin-bottom: 3%;
    padding-left: 5%;
    padding-right: 5%;
}

section article h4{
    font-size: 1rem;
}

article{
    display: grid;
    height: auto;
    width: 100vw;
    grid-gap: 10px;
    padding-left: 5%;
    padding-right: 5%;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr minmax(min-content max-content) 1fr minmax(min-content max-content) 
    repeat(1, 
    minmax(min-content max-content));
    justify-content: center;
    align-items: center;
}
}