/******************* grid container *******************/



.grid-container {
        display: block;
        position: relative;
}

.grid-container * {
        display: block;
        height: 50vw;
        margin-bottom: 2rem;
}


@media only screen and (min-width: 1024px) {
        .grid-container {
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                grid-template-rows: repeat(3, 1fr);
                grid-gap: 1% 1%;
                position: relative;

        }
        .grid-container * {
                display: ;
                height: auto;
                margin-bottom: 0;
        }
}


.text-container {
        position: absolute;
        /*background-color: red;*/
        width:auto;
        z-index: 2;
        padding: 2rem;
}

.grid-container img {
        width: 100%;
        height: 100%;
        object-fit: cover;
}


.grid-container .tall { 
        grid-column: span 1;
        grid-row: span 2;
        position: relative;
}

.grid-container .wide { 
        grid-column: span 2;
        grid-row: span 1;
        position: relative;
}

.grid-container .square1 { 
        grid-column: span 1;
        grid-row: span 1;
        position: relative;
}

.grid-container .wide2 { 
        grid-column: span 2;
        grid-row: span 1;
        position: relative;
}

.grid-container .square2 { 
        grid-column: span 1;
        grid-row: span 1;
        position: relative;
}

.grid-container .square3 {
        grid-column: span 1;
        grid-row: span 1;
        position: relative;
}