.grid-item-1{ grid-area: g1;}
.grid-item-2{ grid-area: g2;}
.grid-item-3{ grid-area: g3;}
.grid-item-4{ grid-area: g4;}
.grid-item-5{ grid-area: g5;}
.grid-item-6{ grid-area: g6;}
.grid-item-7{ grid-area: g7;}
.grid-item-8{ grid-area: g8;}
.grid-item-9{ grid-area: g9;}
.grid-item-10{ grid-area: g10;}
.grid-item-11{ grid-area: g11;}
.grid-item-12{ grid-area: g12;}
.grid-item-13{ grid-area: g13;}
.grid-item-14{ grid-area: g14;}
.grid-item-15{ grid-area: g15;}
.grid-item-16{ grid-area: g16;}

.grid--section--container{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;    
    width: 100%;
    height: 80dvh;
    padding: 20% 0%;

    @media (max-height: 600px) and (orientation: landscape){
        height: 65dvh;
        width: 100%;
        padding: 15% 0%;
    }

    @media (min-width: 768px) and (min-height: 600px) {
        height: 25dvh;
        padding: 8% 0%;
        gap: 2%;
    }

    @media (min-width: 1000px){
        height: 47dvh;
        width: 100%;
        gap: 5%;
    }
}

.grid--container{
    display: grid;
    width: 95%;
    height: 100%;
    gap: 5px;

    grid-template-areas: 
    'g5 g5 g1 g2 g6 g6' 
    'g5 g5 g3 g4 g6 g6'
    'g8 g8 g8 g8 g7 g7' 
    'g8 g8 g8 g8 g7 g7'
    'g9 g9 g10 g11 g13 g13'
    'g9 g9 g12 g12 g13 g13'
    'g9 g9 g12 g12 g13 g13'
    'g9 g9 g12 g12 g14 g15'
    'g16 g16 g16 g16 g16 g16'
    'g16 g16 g16 g16 g16 g16'
    'g16 g16 g16 g16 g16 g16';

    @media (max-height: 600px) and (orientation: landscape){
        width: 100%;
        grid-template-areas: 
        'g1 g2 g5 g5 g6 g6 g9 g9 g10 g11 g13 g13 g16 g16 g16 g16'
        'g3 g4 g5 g5 g6 g6 g9 g9 g12 g12 g13 g13 g16 g16 g16 g16'
        'g7 g7 g8 g8 g8 g8 g9 g9 g12 g12 g13 g13 g16 g16 g16 g16' 
        'g7 g7 g8 g8 g8 g8 g9 g9 g12 g12 g14 g15 g16 g16 g16 g16';
    }

    @media (min-width: 768px) and (min-height: 600px) {
        width: 100%;
        grid-template-areas: 
        'g1 g2 g5 g5 g6 g6 g9 g9 g10 g11 g13 g13 g16 g16 g16 g16'
        'g3 g4 g5 g5 g6 g6 g9 g9 g12 g12 g13 g13 g16 g16 g16 g16'
        'g7 g7 g8 g8 g8 g8 g9 g9 g12 g12 g13 g13 g16 g16 g16 g16' 
        'g7 g7 g8 g8 g8 g8 g9 g9 g12 g12 g14 g15 g16 g16 g16 g16';
    }
}

.grid-item{
    display: flex;
    justify-content: center;
    align-items: center;
    grid: 1;
    overflow: hidden;
    border-radius: 5px;
    box-shadow: #706969 2px 2px 15px;
    transition: transform 0.4s;
}

.grid-item:hover{
    cursor: pointer;
    transform: scale(1.03) translate(0%, 0%) !important;
    transition-delay: 0ms;
    z-index: 1;
}

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