// 
// gallery
// 

.gallery-card-body {
    position: relative;
    border-radius: 0.5rem;
    overflow: hidden;

    &::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
        background-color: rgba(var(--#{$prefix}black-rgb), 0.7);
        z-index: 0;
    }
}

.gallery {
    width: 100%;
    display: grid;
    gap: 0.75rem;

    @media (min-width: 992px) {
        grid-template-columns: repeat(3, 1fr);
    }

    .gallery-card {
        display: grid;
        grid-template-rows: 250px 250px 250px;
        gap: 0.75rem;
        transition: grid-template-rows 300ms ease-in-out;

        .gallery-body {
            position: relative;
            overflow: hidden;
            border-radius: 0.5rem;

            &:hover .card-bottom {
                opacity: 100;
                visibility: visible;
                scale: 1;
                position: absolute;
                top: 0;
                bottom: 0;
                text-align: center;
                background-color: rgba(var(--#{$prefix}black-rgb), 0.7);
                transition: all .5s ease-in-out;
                padding: 50px;
            }

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

            .card-bottom {
                opacity: 0;
                visibility: hidden;
                scale: 0.4;
            }
        }

        &:has(>.gallery-body:nth-child(1):hover) {
            grid-template-rows: 500px 125px 125px;
        }

        &:has(>.gallery-body:nth-child(2):hover) {
            grid-template-rows: 125px 500px 125px;
        }

        &:has(>.gallery-body:nth-child(3):hover) {
            grid-template-rows: 125px 125px 500px;
        }
    }
}