.container
{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    grid-auto-rows: 300px 400px;
    grid-gap:2em;
    
}

.gallery-container .gallery-item h1
{
    background-color:maroon;
    color:white;
    padding:0.5em;
    font-family:'Syne', 'sans-serif';
    border-radius:0.5em;
    box-shadow:0;
}

.gallery-container .gallery-item p
{
    font-family:'Syne', 'sans-serif';
    border-radius:0.5em;
    padding:0.2em;
    padding-top:0em;
    text-align:justify;
    color:maroon;
     border: 0.2em solid maroon;
     margin:0.2em;
    
}

.s
{
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.gallery-item
{
    width:100%;
    height:100%;
    position:relative;
    padding:0.2em;
    
}

.gallery-item .image
{
    width:100%;
    width:100%;
    overflow:hidden;
    
    
}

.gallery-item .image img
{
    width:100%;
    height:100%;
    object-fit:fill;
    object-position:50% 50%;
    cursor:pointer;
    transition:0.5s ease-in-out;
    
}

.gallery-item:hover .image img{
    transform:scale(1.5);
}

.gallery-item .text{
    
    opacity:0;
    position:absolute;
    top:50%;
    left:10%;
    transform:translate(-50% -50%);
    color:maroon;
    font-size:0.65em;
    pointer-events:none;
    z-index:4;
    transition:0.3s ease-in-out;
    -webkit-backdrop-filter: blur(5px) saturate(1.8);
    backdrop-filer:blur(5px) saturate(1.8);
    background: rgba(255,255,255, 0.7);
    text-align:justify;
}

.gallery-item:hover .text{
    opacity:1;
    animation: move-down .3s linear;
    padding:1em;
    width:75%;
    
    
}

@keyframes move-down
{
    0%{ top:10%;}
    50%{ top:35%;}
    100%{ top:50%;}
}

.w-1{
    
    grid-column:span 1;
}

.w-2{
    
    grid-column:span 2;
}

.w-3{
    
    grid-column:span 3;
}

.w-4{
    
    grid-column:span 4;
}

.w-5{
    
    grid-column:span 5;
}

.h-1
{
    grid-row:span 1;
}

.h-2
{
    grid-row:span 2;
}

.h-3
{
    grid-row:span 3;
}

a, a:focus, a:hover
{
    color:maroon;
    text-decoration:none;
}