.mainboxes {
        position: relative;
        width: 100cqi;
        height: 110%;
        left: 0;
        top: 0;
        margin-top: 2.5cqb;
        z-index: 3;
        transform: translateY(-20%) rotateX(15.3deg) rotateY(-12.75deg);
}

@media (max-width: 899px) {

    .mainboxes {
        position: relative;
        top: 0;
        left: 3cqi;
        width: 100%;
        height: 100%;
        margin: 0;
        border: 0;
        transform: translateY(0) rotateX(0) rotateY(0);

    }
}

.preview_box {
    --preview-box-scale: 1;
    position: absolute;
    border-radius: 8px;
}

.preview_box--cover {
    --preview-box-scale: 1.05;
    left: 0;
    top: 10cqb;
    box-shadow: var(--show-cover-shadow);
}

@media (max-width: 899px) {
    .mainboxes--mobile-collage {
        pointer-events: none;
    }

    .mobile-collage__image {
        position: absolute;
        display: block;
        box-sizing: border-box;
        object-fit: cover;
        border-radius: 8px;
        box-shadow: var(--show-cover-shadow);
    }

    .mobile-collage__image--1 {
        top: 43%;
        left: 3%;
        width: 27%;
        aspect-ratio: 3 / 4;
        z-index: 2;
        transform: rotate(-10deg);
    }

    .mobile-collage__image--2 {
        top: 22%;
        left: 22%;
        width: 24%;
        aspect-ratio: 4 / 5;
        z-index: 3;
    }

    .mobile-collage__image--3 {
        top: 8%;
        left: 41%;
        width: 29%;
        aspect-ratio: 4 / 5;
        z-index: 5;
    }

    .mobile-collage__image--4 {
        top: 28%;
        left: 60%;
        width: 25%;
        aspect-ratio: 4 / 5;
        z-index: 4;
        transform: rotate(8deg);

    }

    .mobile-collage__image--5 {
        top: 4%;
        left: 72%;
        width: 19%;
        aspect-ratio: 1 / 1;
        z-index: 2;
        transform: rotate(4deg);

    }

    .mobile-collage__image--6 {
        top: 65%;
        left: 35%;
        width: 32%;
        aspect-ratio: 3 / 2;
        z-index: 6;
        transform: rotate(-4deg);

    }
}