<style>
    .home-hero-slider {
        position: relative;
        height: auto;
        margin: auto;
    }

    .home-hero-slider .swiper-container {
        padding-bottom: 21px;
    }

    @media screen and (min-width: 600px) {
        .home-hero-slider .swiper-container {
            padding-bottom: 0;
        }  
    }

    .home-hero-slider img {
        width: 100% !important;
        height: 100%;
        background-repeat: no-repeat;
        background-position: center;
        background-size: auto;
        height: 100vw;
        object-fit: cover;
    }

    @media screen and (min-width: 600px) {
        .home-hero-slider img {
            height: 34vw;
        }
    }

    @media screen and (min-width: 1024px) {
        .home-hero-slider img {
            height: 327px;
        }
    }

    @media screen and (min-width: 1440px) {
        .home-hero-slider img {
            background-size: cover;
            height: 460px;
        }
    }

    @media screen and (min-width: 1600px) {
        .home-hero-slider img {
            height: 500px;
        }
    }

    @media screen and (min-width: 2301px) {
        .home-hero-slider img {
            height: 520px;
        }
    }

    @media screen and (min-width: 3000px) {
        .home-hero-slider img {
            height: 660px;
        }
    }

    .home-hero-slide {
        background-color: #f3f3f3;
    }

    .arrow-wrap {
        display: none!important;
    }

    @media screen and (min-width: 801px) {
        .home-hero-slider .arrow-wrap {
            position: absolute;
            bottom: 0;
            top: 50%;
            z-index: 2;
            height: 0;
            width: 100%;
            margin: 0 auto;
            padding: 0;
            left: 0;
            right: 0;
        }
    }

    @media screen and (min-width: 1280px) {
        .arrow-wrap {
            padding: 0 20px;
        }
    }

    @media screen and (min-width: 1060px) {
        .home-hero-slider:hover .arrow-wrap {
            display: flex!important;
        }
    }

    .hero-slider-prev {
        margin-right: auto;
        background: url(/col/ado_music/homepage/iconsvgs/carousel-prev-arrow-stroke2.svg);
    }

    .hero-slider-next {
        margin-left: auto;
        background: url(/col/ado_music/homepage/iconsvgs/carousel-next-arrow-stroke2.svg);
    }

    .hero-slider-prev,
    .hero-slider-next {
        width: 100px;
        height: 200px;
        background-size: cover;
        background-repeat: no-repeat;
        align-self: center;
        background-position: center;
    }

    @media screen and (min-width: 1280px) {
        .hero-slider-prev,
        .hero-slider-next {
            background-size: auto;
        }
    }
    .home-hero-slider .swiper-container-horizontal>.swiper-pagination {
        display: flex !important;
        padding: 0;
        background: #14213D;
        height: 24px;
        align-items: center;
        justify-content: center;
    }
    @media screen and (min-width: 600px) {
        .home-hero-slider .swiper-container-horizontal>.swiper-pagination {
            bottom: 12px;
            border-top: 0;
            background: transparent;
            height: auto;
        }
    }
    .home-hero-slider .swiper-container-horizontal .swiper-pagination-bullet {
        width: 8px;
        height: 8px;
        margin: 0 7px;
        display: inline-block;
        border-radius: 100%;
        background: #FFFFFF80;
        opacity: .2;
        box-shadow: 0px 1px 4px #00000042;
    }
    .home-hero-slider .swiper-container-horizontal .swiper-pagination-bullet-active {
        opacity: 1;
    }
</style>