@media screen and (min-width: 980px) {
    /*for mobile*/
    .carousel-container-m {
        display: none !important;
    }

    .carousel-container {
        position: relative;
        width: 100%;
        overflow: hidden;
    }

    .carousel {
        width: 100%;
        overflow: hidden;
    }

    .carousel-track {
        display: flex;
        flex-direction: row;
        transition: transform 0.5s ease-in-out;
    }

    .carousel-slide-m {
        display: none !important;
    }

    .carousel-slide {
        width: 100vw;
        flex-shrink: 0;
    }

    #prev-btn, #next-btn {
        position: relative;
        z-index: 10;
        border: none;
        cursor: pointer;
    }

    #prev-btn {
        background: url(../assets/ic_chevron_arrow_left.svg) center center no-repeat;
        background-size: 40px 40px;
        display: table-cell;
        vertical-align: middle;
        width: 24px;
        height: 24px;
    }

    #next-btn {
        background: url(../assets/ic_chevron_arrow_right.svg) center center no-repeat;
        background-size: 40px 40px;
        display: table-cell;
        vertical-align: middle;
        width: 24px;
        height: 24px
    }

    /*#prev-btn:hover, #next-btn:hover {
        background: rgba(255, 255, 255, 0.8);
    }*/

    #prev-btn-container {
        left: 20px;
        background: rgba(243, 239, 238, 0.7);
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        border: none;
        padding: 10px 15px;
        cursor: pointer;
        border-radius: 20px;
        width: 24px;
        height: 24px;
        z-index: 1;
    }

    #next-btn-container {
        right: 20px;
        background: rgba(243, 239, 238, 0.7);
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        border: none;
        padding: 10px 15px;
        cursor: pointer;
        border-radius: 20px;
        width: 24px;
        height: 24px;
        z-index: 1;
    }

}
@media screen and (max-width: 980px) {
    /*for desktop*/
    .carousel-container {
        display: none !important;
    }

    .carousel-container-m {
        position: relative;
        width: 100%;
        overflow: hidden;
    }

    .carousel-m {
        width: 100%;
        overflow: hidden;
    }

    .carousel-track-m {
        display: flex;
        flex-direction: row;
        transition: transform 0.5s ease-in-out;
    }

    .carousel-slide {
        display: none !important;
    }

    .carousel-slide-m {
        width: 100vw;
        flex-shrink: 0;
    }

    #prev-btn-m, #next-btn-m {
        position: relative;
        z-index: 10;
        border: none;
        cursor: pointer;
    }

    #prev-btn-m {
        background: url(../assets/ic_chevron_arrow_left.svg) center center no-repeat;
        background-size: 40px 40px;
        display: table-cell;
        vertical-align: middle;
        width: 24px;
        height: 24px;
    }

    #next-btn-m {
        background: url(../assets/ic_chevron_arrow_right.svg) center center no-repeat;
        background-size: 40px 40px;
        display: table-cell;
        vertical-align: middle;
        width: 24px;
        height: 24px
    }

    /*#prev-btn-m:hover, #next-btn-m:hover {
        background: rgba(255, 255, 255, 0.8);
    }*/

    #prev-btn-container-m {
        left: 20px;
        background: rgba(243, 239, 238, 0.7);
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        border: none;
        padding: 10px 15px;
        cursor: pointer;
        border-radius: 20px;
        width: 24px;
        height: 24px;
        z-index: 1;
    }

    #next-btn-container-m {
        right: 20px;
        background: rgba(243, 239, 238, 0.7);
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        border: none;
        padding: 10px 15px;
        cursor: pointer;
        border-radius: 20px;
        width: 24px;
        height: 24px;
        z-index: 1;
    }
}