.slide-carousel{
    display: none
}
.lang-en .slide-carousel.en,
.lang-fr .slide-carousel.fr{
    display: block
}

.mobile .slide-container {
    padding: 0 3px
}
.mobile .slide-container > app-widget-host {
    
    padding-bottom: 28%
}
.mobile .slide-container .slide app-image{
    flex:1 1 100%;
    border-radius: 40px;
    max-height: 116px
}
.slide-container .slide app-image img{    
    max-height: 116px;
    object-fit: cover
}
.slide-container > app-widget-host {
    position:relative;
    height:0;
    padding-bottom:20%;
    overflow:hidden
}
.slide-container .slide {
    position:absolute;
    width:100%;
    height:100%
}
.slide.slide-out {
    left: 100%;
    animation-duration: 0.5s;
    animation-name: slide-out;
    animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1)
}

.slide.slide-in {
    left: 0;
    animation-duration: 0.5s;
    animation-name: slide-in;
    animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1)
}
.slide-container .slide > app-widget-host{
    flex-direction: row;
    height: 100%

}
.slide-container .slide app-image {
    flex:0 0 50%;
    border-radius: var(--r-border-radius-medium);
    overflow:hidden;
    cursor: pointer
}
.slide-container .slide app-image img{
    width: 100%;
    height: auto;
}
.slide-container .slide app-image:not(:last-child):not(:only-child) {
    margin-right:10px;
}
.slide-dot:only-child {
    display:none
}
.slide-dot {
    width:8px;
    height:8px;
   display:flex;
    flex-direction:row;
    justify-content:center;
    align-items:center;
    position:relative
}
.slide-dot::before {
    content:"";
    width:8px;
    height:8px;
     border-radius:50%;
    background-color: var(--c-shade);
    cursor:pointer;
    display:block
    
}
.slide-dot.slide-selected::before {
    width:8px;
    height:8px;
    background-color: var(--c-emphasis-c)
}
.slide-dot:not(:last-child):not(:only-child) {
     margin-right:5px
}

.slide-carousel-buttons {
    display:block
}
.slide-carousel-buttons > div {
    display:flex;
    justify-content:center;
    align-items:center
    
}
.dot-container {
    display: none;
    justify-content: center;
    align-items: center;
}
@keyframes slide-out {
    0% {
        left: 0;
    }

    100% {
        left: -100%;
    }
}

@keyframes slide-in {
    0% {
        left: 100%;
    }

    100% {
        left: 0%;
    }
}