/* ===========================
   Sergio 3D Gallery
=========================== */

.s3dg-wrapper {
    position: relative;
    width: 100%;
    height: 650px;
    overflow: hidden;
}

.s3dg-scene {
    position: absolute;
    inset: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    perspective: 2200px;
    overflow: hidden;

    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0%,
        #000 12%,
        #000 88%,
        transparent 100%
    );

    mask-image: linear-gradient(
        to right,
        transparent 0%,
        #000 12%,
        #000 88%,
        transparent 100%
    );
}

.s3dg-a3d {
    position: relative;
    width: 320px;
    height: 460px;

    transform-style: preserve-3d;
    will-change: transform;
}

.s3dg-item {
    position: absolute;
    inset: 0;

    transform-style: preserve-3d;
}

.s3dg-card {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    border-radius: 24px;

    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;

    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.18);

    will-change: transform;
}

/* ===========================
   Только мобильная версия
=========================== */

@media (max-width: 767px) {

    .s3dg-wrapper {
        height: 340px;
    }

    .s3dg-scene {
        /*
         * Меньшее значение усиливает перспективу:
         * центральные карточки визуально ближе,
         * боковые сильнее заворачиваются назад.
         */
        perspective: 900px;

        -webkit-mask-image: linear-gradient(
            to right,
            transparent 0%,
            #000 5%,
            #000 95%,
            transparent 100%
        );

        mask-image: linear-gradient(
            to right,
            transparent 0%,
            #000 5%,
            #000 95%,
            transparent 100%
        );
    }

    .s3dg-a3d {
        width: 220px;
        height: 310px;
    }

    .s3dg-card {
        border-radius: 18px;
    }

}