/*
============================================================
MTG HERO SLIDER UNIVERSAL V2
============================================================
*/

.mtg-hero-slider-v2{
    position:relative;
    width:100%;
    overflow:hidden;
}

.mtg-hero-slider-v2__viewport{
    width:100%;
    overflow:hidden;
}

.mtg-hero-slider-v2__track{
    display:flex;
    width:100%;

    transition:
        transform .7s cubic-bezier(.22,.61,.36,1);

    will-change:transform;
}

.mtg-hero-slider-v2__slide{
    flex:0 0 100%;
    width:100%;
    min-width:100%;
}

.mtg-hero-slider-v2__slide[aria-hidden="true"]{
    pointer-events:none;
}

.mtg-hero-slider-v2__nav{
    position:absolute;
    z-index:30;

    top:50%;
    left:0;
    right:0;

    display:flex;
    justify-content:space-between;

    padding:0 18px;

    pointer-events:none;

    transform:translateY(-50%);
}

.mtg-hero-slider-v2__arrow{
    width:46px;
    height:46px;

    display:grid;
    place-items:center;

    padding:0;

    border:
        1px solid rgba(155,101,31,.25);

    border-radius:50%;

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

    color:#9b651f;

    box-shadow:
        0 10px 30px rgba(70,40,15,.14);

    cursor:pointer;
    pointer-events:auto;

    font-size:27px;
    line-height:1;

    transition:.2s ease;
}

.mtg-hero-slider-v2__arrow:hover{
    transform:scale(1.07);
}

.mtg-hero-slider-v2__dots{
    position:absolute;
    z-index:30;

    left:50%;
    bottom:15px;

    display:flex;
    align-items:center;
    gap:8px;

    padding:7px 11px;

    border-radius:100px;

    background:
        rgba(255,250,242,.90);

    box-shadow:
        0 7px 24px rgba(70,40,15,.10);

    transform:translateX(-50%);
}

.mtg-hero-slider-v2__dot{
    width:8px;
    height:8px;

    padding:0;

    border:0;
    border-radius:100px;

    background:#d7bd93;

    cursor:pointer;

    transition:.25s ease;
}

.mtg-hero-slider-v2__dot.is-active{
    width:26px;
    background:#9b651f;
}

.mtg-hero-slider-v2.is-single
.mtg-hero-slider-v2__nav,

.mtg-hero-slider-v2.is-single
.mtg-hero-slider-v2__dots{
    display:none;
}

@media(max-width:900px){

    .mtg-hero-slider-v2__nav{
        display:none;
    }

    .mtg-hero-slider-v2__dots{
        bottom:8px;
    }
}

@media(prefers-reduced-motion:reduce){

    .mtg-hero-slider-v2__track{
        transition:none;
    }
}