.ul-gallery {
    padding-bottom: clamp(40px, 4.20vw, 80px);
    max-width: 1920px;
    margin: auto;
}

.ul-gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: clamp(10px, 1.05vw, 20px);
    transition: 0.4s ease;

    &:hover {
        .ul-gallery-item-btn-wrapper {
            opacity: 1;
        }
    }

    &:nth-child(odd) {
        border-radius: 999px;
    }

    img {
        width: 100%;
    }

    &-btn-wrapper {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 1;
        opacity: 0;
        transition: 0.3s ease;

        &::before {
            content: "";
            position: absolute;
            inset: 0;
            background: var(--ul-gradient);
            opacity: 70%;
            z-index: -1;
        }

        a {
            font-size: clamp(34px, 2.10vw, 40px);
            color: var(--white);

            &:hover {
                color: var(--black);
            }
        }
    }
}