@import url("https://fonts.googleapis.com/css2?family=Mooli&display=swap");

img {
    max-width: 100%;
    height: 250px;
    width: 250px;
    object-fit: cover;
}
header {
    font-family: 'Mooli', Arial, Helvetica, sans-serif;
    font-size: x-large;
    padding: 1rem;
}
header, footer {
    background-color: rgb(109, 34, 180);
}
header, h1 {
    text-align: center;
}
h2 {
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
}
.menu-btn{
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
}
.hide{
    display: none;
}
.gallery{
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
}
@media screen and (min-width:700px) {
    .gallery {
        grid-template-columns: 1fr 1fr;
    }
    
}
@media screen and (min-width:700px) and (max-width:1000px) {
    .hide {
        display: none;
    }
}
    
@media screen and (min-width:1000px) {
    .layout {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    }  
    .gallery {
        grid-column: 2/ span 3;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }
    .menu-btn {
        display: none;
    }
    .hide {
        display: block;
    }
    .spacer{
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    }
}