/** Shopify CDN: Minification failed

Line 100:25 The "-" operator only works if there is whitespace on both sides

**/

/**
 *  𝗖𝗼𝗺𝗽𝗼𝗻𝗲𝗻𝘁
 */

.Articles-Component {
    display : block ;
}



/**
 *  𝗛𝗲𝗮𝗱𝗲𝗿
 */

.Articles-Header > * {
    text-wrap : balance ;
}


/**
 *  𝗦𝗹𝗶𝗱𝗲𝗿
 */

.Articles-Slider {}

.Articles-Slider:not(:only-child){
    margin-top : 1rem ;
}


/**
 *  𝗦𝗹𝗶𝗱𝗲𝘀
 */

.Articles-Slides {}


/**
 *  𝗦𝗹𝗶𝗱𝗲
 */


.Articles-Slide {
    user-select : none ;
}

@media ( width >= 1008px ){

    .Articles-Slide {

    }
}


/**
 *  𝗖𝗼𝗻𝘁𝗿𝗼𝗹𝘀
 */

.Articles-Controls {

    position : absolute ;
    display : contents ;
    inset : 0 ;

    z-index : 2 ;
}

@media ( width < 640px ){

    .Articles-Controls {
        display : none ;
    }
}


/**
 *  𝗔𝗿𝗿𝗼𝘄
 */

.Articles-Arrow {
    width: 45px;
    height: 45px;
    border: none;
    border-radius: 50%;
    background: #FFFFFF;
    color: var(--button-background);
    box-shadow: 0 2px 10px rgba(54, 54, 54, 0.15);
    line-height: 0;
    transition: background 0.15s ease-in-out, opacity 0.15s ease-in-out, transform 0.2s ease-in-out, color 0.2s ease-in-out;
    overflow: clip;

    position: absolute;
    top: var(--swiper-navigation-top-offset, 50%);
    margin-top: calc(0px -(var(--swiper-navigation-size) / 2));
    z-index: 10;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding : 0.75rem ;
}


.Articles-Arrow.swiper-button-disabled {
    display : none ;
}

.Articles-Arrow:first-child {
    left : 10px ;
}

.Articles-Arrow:first-child:hover svg {
    animation : buttonFromRightToLeft 0.5s ease-in-out forwards ;
}

.Articles-Arrow:last-child {
    right : 10px ;
}

.Articles-Arrow:last-child:hover svg {
    animation : buttonFromLeftToRight 0.5s ease-in-out forwards ;
}

.Articles-Arrow svg {
    height: 100%;
    width: 100%;
    fill: currentColor;
    object-fit: contain;
    transform-origin: center;
}