.root {
    position: absolute;
    width: 100%;
    height: 100%;
    min-width: 900px;
    max-height: var(--content-max-height);
    aspect-ratio: 1 / 1.5;
}

.image {
    position: absolute;
    left: 50%;
    top: 50%;
    object-fit: cover;
    box-shadow:
        0 20px 25px -5px var(--color-bg-fill-alpha-black-10),
        0 8px 10px -6px var(--color-bg-fill-alpha-black-10);
}

.smallSquareImage {
    width: 140px;
    height: 140px;
    border-radius: var(--border-radius-md);
}

.largeSquareImage {
    width: 290px;
    height: 290px;
    border-radius: var(--border-radius-md);
}

.rectImage {
    width: 290px;
    height: 146px;
    border-radius: var(--border-radius-lg);
}

.smallSquareImage1 {
    top: 5%;
    left: 38%;
}
.rectImage2 {
    top: 7%;
    left: 57%;
}
.smallSquareImage3 {
    top: 22%;
    left: 81%;
}
.largeSquareImage4 {
    top: 40%;
    left: 80%;
}
.rectImage5 {
    top: 70%;
    left: 75%;
}
.smallSquareImage6 {
    top: 75%;
    left: 52%;
}
.rectImage7 {
    top: 80%;
    left: 20%;
}
.smallSquareImage8 {
    top: 65%;
    left: 15%;
}
.rectImage9 {
    top: 45%;
    left: 0;
}
.largeSquareImage10 {
    top: 12%;
    left: 10%;
}

@media (width <= 1200px) and (width > 768px) {
    .smallSquareImage {
        width: 110px;
        height: 110px;
        border-radius: var(--border-radius-sm);
    }

    .largeSquareImage {
        width: 177px;
        height: 177px;
    }

    .rectImage {
        width: 224px;
        height: 113px;
        border-radius: var(--border-radius-md);
    }

    .largeSquareImage4 {
        top: 40%;
        left: 90%;
    }

    .smallSquareImage8 {
        top: 65%;
        left: 10%;
    }

    .rectImage9 {
        top: 45%;
        left: -10%;
    }
}

@media (width <= 768px) {
    .smallSquareImage {
        width: 80px;
        height: 80px;
        border-radius: var(--border-radius-sm);
    }

    .largeSquareImage {
        width: 164px;
        height: 164px;
    }

    .rectImage {
        width: 159px;
        height: 80px;
        border-radius: var(--border-radius-sm);
    }

    .rectImage5 {
        top: 70%;
        left: 78%;
    }

    .smallSquareImage6 {
        top: 80%;
        left: 58%;
    }

    .rectImage7 {
        top: 90%;
        left: 30%;
    }

    .largeSquareImage10 {
        top: 12%;
        left: 14%;
    }
}