.m-slide-image {
    padding-top: 50px;
}

.text-slide-image-note {
    color: #343434;
    font-size: 13px;
}

@media only screen and (min-width: 1200px) {  
    .height-width-custom {
        width: 546px;
        height: 336px;
    }

    @keyframes scroll-right {
        0% {
            transform: translateX(calc(-546px * 5 - 12px * 5));
        }

        100% {
            transform: translateX(0);
        }
    }

    @keyframes scroll-left {
        0% {
            transform: translateX(0);
        }

        100% {
            transform: translateX(calc(-546px * 5 - 12px * 5));
        }
    }

    .slide-image-text {
        margin-bottom: 16px;
        font-size: clamp(1.25rem, 1.1286rem + 0.5178vw, 1.75rem);
    }

    .slider1,
    .slider2 {
        background: white;
        box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.125);
        height: 336px;
        margin: auto;
        overflow: hidden;
        position: relative;
        width: 100%;
    }

    .slider1::after {
        right: 0;
        top: 0;
        transform: rotateZ(180deg);
    }

    .slider1::before {
        left: 0;
        top: 0;
    }

    .slider1 .slide-track {
        animation: scroll-left 80s linear infinite;
        display: flex;
        width: calc(546px * 15 + 12px * 15);
        gap: 12px;
    }

    .slider2::after {
        right: 0;
        top: 0;
        transform: rotateZ(180deg);
    }

    .slider2::before {
        left: 0;
        top: 0;
    }

    .slider2 .slide-track {
        animation: scroll-right 80s linear infinite;
        display: flex;
        width: calc(546px * 15 + 12px * 15);
        gap: 12px;
    }
}

@media only screen and (min-width: 577px) and (max-width: 1199px) {  
    :root {
        --height : 184px;
        --width : 299px
    }
    .height-width-custom {
        width: var(--width);
        height: var(--height);
    }

    @keyframes scroll-right {
        0% {
            transform: translateX(calc(-299px * 5 - 12px * 5));
        }

        100% {
            transform: translateX(0);
        }
    }

    @keyframes scroll-left {
        0% {
            transform: translateX(0);
        }

        100% {
            transform: translateX(calc(-299px * 5 - 12px * 5));
        }
    }

    .slide-image-text {
        margin-bottom: 16px;
        font-size: clamp(1.25rem, 1.1286rem + 0.5178vw, 1.75rem);
    }

    .slider1,
    .slider2 {
        background: white;
        box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.125);
        height: var(--height);
        margin: auto;
        overflow: hidden;
        position: relative;
        width: 100%;
    }

    .slider1::after {
        right: 0;
        top: 0;
        transform: rotateZ(180deg);
    }

    .slider1::before {
        left: 0;
        top: 0;
    }

    .slider1 .slide-track {
        animation: scroll-left 80s linear infinite;
        display: flex;
        width: calc(299px * 15 + 12px * 15);
        gap: 12px;
    }

    .slider2::after {
        right: 0;
        top: 0;
        transform: rotateZ(180deg);
    }

    .slider2::before {
        left: 0;
        top: 0;
    }

    .slider2 .slide-track {
        animation: scroll-right 80s linear infinite;
        display: flex;
        width: calc(299px * 15 + 12px * 15);
        gap: 12px;
    }
}

@media only screen and (max-width: 576px) {  
    .height-width-custom {
        width: 221px;
        height: 136px;
    }

    @keyframes scroll-right {
        0% {
            transform: translateX(calc(-221px * 5 - 12px * 5));
        }

        100% {
            transform: translateX(0);
        }
    }

    @keyframes scroll-left {
        0% {
            transform: translateX(0);
        }

        100% {
            transform: translateX(calc(-221px * 5 - 12px * 5));
        }
    }

    .slide-image-text {
        margin-bottom: 16px;
        font-size: clamp(1.25rem, 1.1286rem + 0.5178vw, 1.75rem);
    }

    .slider1,
    .slider2 {
        background: white;
        box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.125);
        height: 136px;
        margin: auto;
        overflow: hidden;
        position: relative;
        width: 100%;
    }

    .slider1::after {
        right: 0;
        top: 0;
        transform: rotateZ(180deg);
    }

    .slider1::before {
        left: 0;
        top: 0;
    }

    .slider1 .slide-track {
        animation: scroll-left 80s linear infinite;
        display: flex;
        width: calc(221px * 15 + 12px * 15);
        gap: 12px;
    }

    .slider2::after {
        right: 0;
        top: 0;
        transform: rotateZ(180deg);
    }

    .slider2::before {
        left: 0;
        top: 0;
    }

    .slider2 .slide-track {
        animation: scroll-right 80s linear infinite;
        display: flex;
        width: calc(221px * 15 + 12px * 15);
        gap: 12px;
    }
}