.gallery-title{
    background-color: #747474;
    min-height: 80vh;
    background-image: url('../media/images/gallery/yoi_light.png');
    background-size: cover;
    background-attachment: fixed;
    background-blend-mode: multiply;
}
    .gallery-title h2{
        font-size: 5rem;
        background-color: #313131a4;
        padding: .4em;
        backdrop-filter: blur(20px);
    }

.gallery{
    background-color: #B5392D;
    padding: 5em;
}

    .grid-gallery{
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        grid-template-rows: repeat(auto-fit, 250px);
        gap: 2rem;
        width: 100%;
        height: 100%;
    }

    .gallery-item{
        box-shadow: 0px 0px 8px #0e0e1c;
    }
    .no-shadow{
        box-shadow: initial;
    }
    .grid-tall{
        grid-row: span 2;
    }
    
    .grid-taller{
        grid-row: span 4;
    }
    
    .grid-wide{
        grid-column: span 2;
    }
    
    .grid-big{
        grid-row: span 2;
        grid-column: span 2;

    }
      
    .grid-bigger{
        grid-row: span 4;
        grid-column: span 4;

    }
        .gallery-item{
        }

    .grid-gallery img{
        height: 100%;
        width: 100%;
        object-fit:  cover;
    }
    .grid-gallery .offset-top{
        object-position: 50% 30%;
    }

    .grid-gallery .offset-right{
        object-position: 50% -2000%;
    }

    .grid-gallery .offset-left{
        object-position: -200% 40%;
    }
    .grid-gallery img:hover{
        filter: brightness(60%);
        transform: scale(105%);
        transition: all 250ms ease-out;
    }
    .grid-gallery .hover-alt:hover{
        filter: brightness(100%);
        transform: scale(110%);
        transition: all 250ms ease-out;
    }

    .gallery-container{
        width: 1000px;
        height: 4000px;
    }

.gallery-video{
    background-color: #2D2C59;
    padding-top: 500px;
}

    .videos{
        display: flex;
        justify-content: center;
        padding: 4em;
        gap:4rem
    }