.main_travel {

    width: 100%;

    position: relative;

    min-height: 100vh;

    overflow: auto;





    .background {

        position: absolute;

        inset: 0;

        z-index: -1;

        filter: brightness(0.6);

        opacity: 0.5;

        background-size: cover;

        background-position: center;

        background-repeat: no-repeat;



        video,

        img {

            width: 100%;

            height: 100%;

            object-fit: cover;

            transition: opacity 0.5s ease;

            opacity: 0;

            position: absolute;

            inset: 0;

            z-index: 1;

        }



        video.visible,

        img.visible {

            opacity: 1;

            z-index: 2;



        }

    }



    & .country-list {

        list-style: none;

        height: calc(100vh - 60px);

        overflow: auto;

        margin-top: 120px;

        scrollbar-width: none;

        -ms-overflow-style: none;

        display: grid;

        grid-template-columns: 1fr;

        justify-items: center;

        text-align: center;

        gap: 2rem 0;

        margin-bottom: 30px;



        @media (min-width: 768px) {

            grid-template-columns: repeat(2, 1fr);

            padding: 50px 0 70px;

            margin-bottom: 0;

        }



        @media (min-width: 1200px) {

            grid-template-columns: repeat(3, 1fr);

            gap: 11.25rem 0;

            padding: 135px 0;

        }



        li {

            font-size: 2rem;

            color: var(--white-color);

            cursor: pointer;

            transition: opacity 0.3s ease;

            opacity: 1;

            height: fit-content;

        }



        &:has(li:hover) li {

            opacity: 0.2;

        }



        li:hover {

            opacity: 1 !important;

        }

    }

}



.mobile-footer {

    border-top: 1px solid var(--white-color-opacity);

}