.corad .carousel {
            width: 1000px;
            height: 330px;
            margin: 15px auto;
            position: relative;
            overflow: hidden;
            border: 0;
            border-radius: 18px;
            touch-action: pan-y;
            cursor: grab;
        }

        .corad .carousel:active {
            cursor: grabbing;
        }

        @media only screen and (max-width: 600px) {
            .corad .carousel {
                width: 95%;
                height: 250px;
            }
        }

        @media only screen and (min-width: 600px) {
            .corad .carousel {
                width: 90%;
            }
        }

        @media only screen and (min-width: 992px) {
            .corad .carousel {
                width: 85%;
            }
        }

        @media only screen and (min-width: 1200px) {
            .corad .carousel {
                width: 85%;
            }
        }

        .carousel .grack {
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            display: flex;
            align-items: center;
            will-change: transform;
            touch-action: none;
        }

        .carousel .grack .card {
            flex: 0 0 300px;
            width: 300px;
            height: 260px;
            margin-right: 20px;
            padding: 0;
            border: 0;
            border-radius: 10px;
            overflow: hidden;
            background: linear-gradient(to top, #5146df, #DDDDDD 65%);
            position: relative;
            transform: scale(.65);
            opacity: .30;
            filter: blur(2px);
            transition:
                transform .35s ease,
                opacity .35s ease,
                filter .35s ease,
                box-shadow .35s ease;
            box-shadow: 0 10px 30px rgba(0,0,0,.08);
        }

        .carousel .grack .card.active {
            transform: scale(1.08);
            opacity: 1;
            filter: blur(0);
            z-index: 10;
            box-shadow: 0 20px 45px rgba(0,0,0,.20);
        }

        .carousel .grack .card.near {
            transform: scale(.82);
            opacity: .65;
            filter: blur(.8px);
            z-index: 5;
        }

        .carousel .grack .card img {
            width: 80%;
            height: 80%;
            display: block;
            margin: 0 auto;

            object-fit: cover;
            object-position: center;

            user-select: none;
            pointer-events: none;
            -webkit-user-drag: none;
        }

        .carousel .grack .card::after {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(to top, rgba(0,0,0,.20), transparent 55%);
            pointer-events: none;
        }

        @media only screen and (max-width: 600px) {
            .carousel .grack .card {
                flex: 0 0 220px;
                width: 220px;
                height: 200px;
                margin-right: 15px;
            }
        }


        .carousel-box {
            display: none;
            width: 100%;
        }

        .carousel-box.active {
            display: block;
        }


        /* ==============================
        CAROUSEL
        ============================== */

        /* .carousel {
            width: 85%;
            height: 300px;

            margin: 5px auto;

            position: relative;

            overflow: hidden;

            border-radius: 12px;

            touch-action: pan-y;
        } */


        /* ==============================
        TRACK
        ============================== */

        .grack {
            position: absolute;

            top: 0;
            left: 0;

            display: flex;

            height: 100%;

            will-change: transform;

            touch-action: none;
        }


        /* ==============================
        CARD
        ============================== */

        .grack .card {
            width: 300px;
            height: 100%;

            flex: 0 0 300px;

            margin-right: 20px;

            padding: 0;

            border: 0;

            border-radius: 12px;

            overflow: hidden;

            background: #ddd;

            transform: scale(.72);

            filter: blur(4px);

            opacity: .5;

            transition:
                transform .45s ease,
                filter .45s ease,
                opacity .45s ease;

            user-select: none;
        }


        /* CARD TENGAH */

        .grack .card.active {
            transform: scale(1);

            filter: blur(0);

            opacity: 1;

            z-index: 10;
        }


        /* CARD SEBELAH */

        .grack .card.near {
            transform: scale(.85);

            filter: blur(1.5px);

            opacity: .8;
        }


        /* IMAGE */

        .grack .card img {
            width: 100%;
            height: 100%;

            object-fit: cover;

            display: block;

            pointer-events: none;
        }


        /* ==============================
        ARROW
        ============================== */

        .carousel-arrow {
            position: absolute;

            top: 50%;

            width: 46px;
            height: 46px;

            transform: translateY(-50%);

            border: 0;

            border-radius: 50%;

            background: rgba(255,255,255,.95);

            color: #333;

            display: flex;

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

            font-size: 20px;

            cursor: pointer;

            z-index: 100;

            box-shadow:
                0 8px 25px rgba(0,0,0,.18);

            transition: .25s ease;
        }

        .arrow-left {
            left: 15px;
        }

        .arrow-right {
            right: 15px;
        }

        .carousel-arrow:hover {
            transform:
                translateY(-50%)
                scale(1.08);

            box-shadow:
                0 12px 30px rgba(0,0,0,.25);
        }

        .carousel-arrow:active {
            transform:
                translateY(-50%)
                scale(.92);
        }

        .carousel-arrow i {
            pointer-events: none;
        }


        @media(max-width:600px) {

            .carousel {
                width: 95%;
                height: 250px;
            }

            .grack .card {
                width: 240px;
                flex-basis: 240px;
            }

            .carousel-arrow {
                width: 38px;
                height: 38px;

                font-size: 17px;
            }

            .arrow-left {
                left: 8px;
            }

            .arrow-right {
                right: 8px;
            }
        }