/*Custom Font*/
@import url('https://fonts.googleapis.com/css2?family=Rubik&display=swap');

/*Styling*/
body {
    background-color: rgb(0, 0, 0);
    font-family: 'Rubik', sans-serif;
    color: bisque;
}

.gallery{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px,1fr));/*1fr 1fr;*/
    gap: 10px;
    place-items: center;
    width: 80%;
}

img{
    width: 100%;
}

.intro{
    position: relative;
    /*background-image: url("pics/Thumbnail\ -\ 1st\ Square.jpg");*/
}

.overlay{
    place-items: center;
    position:absolute;
    padding-top: 15%;
}

@media (min-width: 375px)
    and (max-width: 1000px)
    and (-webkit-min-device-pixel-ratio: 3)
{
    .gallery{
        grid-template-columns: 1fr;

        font-size: 2.5rem;
        width: 95%;
        max-width: 700px;
    }
    img{
        width: 700px;
    }
}