div.carousel {
    grid-row: 1 / 2;
    grid-column: 1 / 8;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transform-style: preserve-3d;
    perspective: 600px;
    --items: 5;
    --middle: 3;
    --position: 1;
}

    div.carousel div.item {
        position: absolute;
        width: 40%;
        height: 100%;
        --r: calc(var(--position) - var(--offset));
        --abs: max(calc(var(--r) * -1), var(--r));
        transition: all 0.25s linear;
        transform: rotateY(calc(-10deg * var(--r))) translateX(calc(-300px * var(--r)));
        z-index: calc((var(--position) - var(--abs)));
        pointer-events: none;
    }

        div.carousel div.item iframe.instagram-media {
            box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.19), 0px 6px 6px rgba(0, 0, 0, 0.23) !important;
            border-radius: 10px !important;
            background: white !important;
        }

        div.carousel div.item:nth-of-type(1) {
            --offset: 1;            
        }

        div.carousel div.item:nth-of-type(2) {
            --offset: 2;
        }

        div.carousel div.item:nth-of-type(3) {
            --offset: 3;
        }

        div.carousel div.item:nth-of-type(4) {
            --offset: 4;
        }

        div.carousel div.item:nth-of-type(5) {
            --offset: 5;
        }

/* Media query for mobile devices */
@media (max-width: 480px) {
    div.carousel div.item {
        /* Center the div */
        left: 4vw;
        transform: translateX(calc(-345px * var(--r)));
    }
}

div.carousel-panel {
    height: 70rem;
    margin: 0;
    display: grid;
    grid-template-rows: 60rem 5rem;
    grid-template-columns: 1fr 30px 30px 30px 30px 30px 1fr;
    align-items: center;
    justify-items: center;
}

    div.carousel-panel input:nth-of-type(1) {
        grid-column: 2 / 3;
        grid-row: 2 / 3;
    }

        div.carousel-panel input:nth-of-type(1):checked ~ div.carousel {
            --position: 1;
        }

    div.carousel-panel input:nth-of-type(2) {
        grid-column: 3 / 4;
        grid-row: 2 / 3;
    }

        div.carousel-panel input:nth-of-type(2):checked ~ div.carousel {
            --position: 2;
        }

    div.carousel-panel input:nth-of-type(3) {
        grid-column: 4 /5;
        grid-row: 2 / 3;
    }

        div.carousel-panel input:nth-of-type(3):checked ~ div.carousel {
            --position: 3;
        }

    div.carousel-panel input:nth-of-type(4) {
        grid-column: 5 / 6;
        grid-row: 2 / 3;
    }

        div.carousel-panel input:nth-of-type(4):checked ~ div.carousel {
            --position: 4;
        }

    div.carousel-panel input:nth-of-type(5) {
        grid-column: 6 / 7;
        grid-row: 2 / 3;
    }

        div.carousel-panel input:nth-of-type(5):checked ~ div.carousel {
            --position: 5;
        }

        div.carousel-panel input:nth-of-type(1):checked ~ div.carousel div.item:nth-of-type(1),
        div.carousel-panel input:nth-of-type(2):checked ~ div.carousel div.item:nth-of-type(2),
        div.carousel-panel input:nth-of-type(3):checked ~ div.carousel div.item:nth-of-type(3),
        div.carousel-panel input:nth-of-type(4):checked ~ div.carousel div.item:nth-of-type(4),
        div.carousel-panel input:nth-of-type(5):checked ~ div.carousel div.item:nth-of-type(5) {
            pointer-events: inherit;
        }