.collection-prev { padding: 0 20px 100px; }

.collections {
    display: flex;
    align-items: center;
    position: relative;
    height: 450px; width: 100%;
}

.col-item {
    border-radius: 10px;
    display: flex;
    position: absolute;
    transition: all 0.3s ease;
    img {
        border-radius: 10px;
        width: 100%; height: 100%;
        object-fit: cover;
        transition: all 0.3s ease;
    }
    span {
        color: white;
        font: 16px 'BPG LE Studio 02 Caps';
        line-height: 21px;
        position: absolute;
        z-index: 2;
        left: 35px; bottom: 35px; right: 35px;
        transition: all 0.3s ease;
    }
    &::before {
        content: '';
        background: linear-gradient(0deg, #000000 0.00%, rgba(55,55,55,0.35 ) 47.81%, rgba(84,84,84,0 ) 100.00%);
        border-radius: 10px;
        position: absolute;
        inset: 0;
        z-index: 1;
    }
}

.col-item:first-child, .col-item:last-child {
    width: 270px; height: 315px;
    z-index: 1;
    span {
        font-size: 14px;
        line-height: 17px;
    }
}

.col-item:first-child { left: 0; }
.col-item:last-child { right: 0; }

.col-item:nth-child(2), .col-item:nth-child(4) {
    width: 320px; height: 370px;
    z-index: 2;
}

.col-item:nth-child(2) { left: 160px; }
.col-item:nth-child(4) { right: 160px; }

.col-item:nth-child(3) {
    width: 360px; height: 450px;
    z-index: 3;
    left: 360px;
}

.col-item:hover {
    width: 360px; height: 450px;
    z-index: 4;
    span {
        font-size: 16px;
        line-height: 21px;
    }
}

/* hover over first element */
.col-item:first-child:hover ~ .col-item:nth-child(2) {
    width: 330px; height: 410px;
    left: 270px;
    z-index: 3;
}

.col-item:first-child:hover ~ .col-item:nth-child(3) {
    width: 330px; height: 370px;
    left: 450px;
    z-index: 2;
}

.col-item:first-child:hover ~ .col-item:nth-child(4) {
    width: 300px; height: 330px;
    left: 630px;
    z-index: 1;
}

.col-item:first-child:hover ~ .col-item:nth-child(5) {
    width: 280px; height: 300px;
    left: 807px;
    z-index: 0;
}

/* hover over second element */
.col-item:nth-child(2):hover {
    left: 250px;
}

.collections:has(.col-item:nth-child(2):hover) .col-item:first-child {
    width: 330px; height: 410px;
    span {
        font-size: 16px;
        line-height: 21px;
    }
    z-index: 3;
}

.col-item:nth-child(2):hover ~ .col-item:nth-child(3) {
    width: 330px; height: 410px;
    left: 500px;
    z-index: 3;
}

.col-item:nth-child(2):hover ~ .col-item:nth-child(4) {
    right: 85px;
}

/* hover over the fourth element */
.col-item:nth-child(4):hover {
    right: 250px;
}

.collections:has(.col-item:nth-child(4):hover) .col-item:nth-child(3) {
    width: 330px; height: 410px;
    left: 250px;
    span {
        font-size: 16px;
        line-height: 21px;
    }
    z-index: 3;
}

.col-item:nth-child(4):hover ~ .col-item:last-child {
    width: 330px; height: 410px;
    right: 0;
    z-index: 3;
}

.collections:has(.col-item:nth-child(4):hover) .col-item:nth-child(2) {
    left: 85px;
}

/* hover over the last element */
.collections:has(.col-item:last-child:hover) .col-item:first-child {
    width: 280px; height: 300px;
    left: 0;
    z-index: 0;
}

.collections:has(.col-item:last-child:hover) .col-item:nth-child(2) {
    width: 300px; height: 330px;
    left: 157px;
    z-index: 1;
}

.collections:has(.col-item:last-child:hover) .col-item:nth-child(3) {
    width: 330px; height: 370px;
    left: 310px;
    z-index: 2;
}

.collections:has(.col-item:last-child:hover) .col-item:nth-child(4) {
    width: 330px; height: 410px;
    right: 270px;
    z-index: 3;
}