/* START GALLERY */
.custom-container {
    width: 100vw;
    height: 30rem;
    overflow: hidden;
    align-items: center;
}

.custom-ul {
    width: 10000px;
    padding: 0;
    animation: slide-gallery 35s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    position: relative;
}

.custom-li a {
    text-decoration: none;
    color: white;
}

.custom-h4 {
    font-family: 'Poppins', sans-serif;
    font-weight: 700 !important;
    width: 100%;
    position: absolute;
    bottom: 0;
    top: 0;
    margin: auto;
    align-items: center;
    text-align: center;
    color: white;
    background-color: rgba(0, 0, 0, 0.527);
    padding-top: 25px;
    padding-bottom: 25px;
    animation: title 35s;
    opacity: 0;
    transition: opacity 0.5s;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    height: fit-content;
}

.custom-li:hover .custom-h4,
.custom-li:hover .custom-img {
    opacity: 1;
}

.custom-ul,
.custom-h4 {
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

.custom-ul:hover,
.custom-ul:hover .custom-h4 {
    animation-play-state: paused;
}

.custom-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}

.custom-img:hover,
.custom-li:hover .custom-img {
    opacity: 0.5;
    transition: opacity 0.3s ease-in-out;
}

@media (width < 768px) {
    .custom-li {
        width: 100vw;
        float: left;
        list-style: none;
        position: relative;
    }

    @keyframes slide-gallery {
        0% {
            left: 0;
        }

        5.56%,
        11.12% {
            left: -100vw;
        }

        16.68%,
        22.24% {
            left: -200vw;
        }

        27.8%,
        33.36% {
            left: -300vw;
        }

        38.92%,
        44.48% {
            left: -400vw;
        }

        50.04%,
        55.6% {
            left: -500vw;
        }

        61.16%,
        66.72% {
            left: -600vw;
        }

        72.28%,
        77.84% {
            left: -700vw;
        }

        83.4%,
        88.96% {
            left: -800vw;
        }

        94.52%,
        100% {
            left: 0;
        }

    }
}

@media (width >=768px) {
    .custom-li {
        width: calc(100vw / 3);
        float: left;
        list-style: none;
        position: relative;
    }

    @keyframes slide-gallery {
        0% {
            left: 0;
        }

        5%,
        10% {
            left: calc((100vw / -3)*1);
        }

        15%,
        20% {
            left: calc((100vw / -3)*2);
        }

        25%,
        30% {
            left: calc((100vw / -3)*3);
        }

        35%,
        40% {
            left: calc((100vw / -3)*4);
        }

        45%,
        50% {
            left: calc((100vw / -3)*5);
        }

        55%,
        60% {
            left: calc((100vw / -3)*6);
        }

        65%,
        70% {
            left: calc((100vw / -3)*7);
        }

        75%,
        80% {
            left: calc((100vw / -3)*8);
        }

        85%,
        90% {
            left: calc((100vw / -3)*9);
        }

        95%,
        100% {
            left: 0;
        }

    }
}

@media (width >=2000px) {
    .custom-container {
        width: 100vw;
        height: 30rem;
        overflow: hidden;
        align-items: center;
    }

    .custom-li {
        width: calc(100vw / 5);
        float: left;
        list-style: none;
        position: relative;
    }

    @keyframes slide-gallery {
        0% {
            left: 0;
        }

        6.25%,
        12.5% {
            left: calc((100vw / -5) * 1);
        }

        18.75%,
        25% {
            left: calc((100vw / -5) * 2);
        }

        31.25%,
        37.50% {
            left: calc((100vw / -5) * 3);
        }

        43.75%,
        50% {
            left: calc((100vw / -5) * 4);
        }

        56.25%,
        62.5% {
            left: calc((100vw / -5) * 5);
        }

        68.75%,
        75% {
            left: calc((100vw / -5) * 6);
        }

        81.75%,
        87.75% {
            left: calc((100vw / -5) * 7);
        }

        93.75%,
        100% {
            left: 0;
        }
    }
}

/*END GALLERY*/