.main-hero {
    display: block;
    position: relative;
    margin: 0.6rem 0 0.9rem 0;
    z-index: 53;
    display: flex;
    justify-content: center;
    align-items: center;
}

.main-hero .slider-wrap {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 0.1rem;
        position: relative;
    }

.main-hero .slider-shape {
        height: 2.89rem;
        width: auto;
    }

:is(.main-hero .slider-shape) .left {
            margin-right: 0.07rem;
        }

.main-hero .slider {
        height: 2.89rem;
        width: 5.09rem;
        display: block;
        grid-column-gap: 1rem;
        grid-row-gap: 1rem;
        justify-content: center;
        align-items: flex-end;
        display: flex;
        position: relative;
        border-radius: 0.1rem;
        overflow: hidden;
        background-color: var(--color-black);
    }

:is(.main-hero .slider) .slider-list {
            grid-template-rows: 100%;
            grid-template-columns: 100%;
            place-items: center;
            width: 100%;
            height: 100%;
            display: grid;
            overflow: hidden;
        }

:is(.main-hero .slider) .slide {
            opacity: 0;
            pointer-events: none;
            will-change: transform, opacity;
            grid-area: 1 / 1 / -1 / -1;
            place-items: center;
            width: calc(100% + 0.02rem);
            height: calc(100% + 0.02rem);
            display: grid;
            position: relative;
            overflow: hidden;
        }

.is--current:is(:is(.main-hero .slider) .slide) {
                opacity: 1;
                pointer-events: auto;
            }

:is(:is(.main-hero .slider) .slide) img {
                object-fit: cover;
                will-change: transform;
                width: 100%;
                height: 100%;
                position: absolute;
                border-radius: inherit; 
            }

.main-hero .title-text-wrap {
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.2rem;
        margin-top: 0.9rem;
    }

.main-hero .title {
        max-width: 9.91rem;
    }

.main-hero .text {
        max-width: 5.35rem;
    }

@media screen and (max-width: 768px) {

    .main-hero {
        margin: 0.8rem 0 0.6rem 0;
}

        .main-hero .slider-wrap {
            gap: 0.03rem;
        }

        .main-hero .slider-shape {
            height: 1rem;
        }

            :is(.main-hero .slider-shape) .left {
                margin-right: 0.03rem;
            }

        .main-hero .slider {
            height: 1rem;
            width: 1.76rem;
            border-radius: 0.04rem;
        }

        .main-hero .title-text-wrap {
            margin-top: 0.6rem;
        }

        .main-hero .title {
            max-width: 100%;
        }

        .main-hero .text {
            max-width: 100%;
        }
    }