.embla {
    max-width:100%;
    margin:2rem auto;

    --slide-height:19rem;
    --slide-size:50%;
    --gap:1rem;
    --radius:20px;

    --text-body:#333333;

    --bg-static:rgba(0,0,0,0.00);
    --bg-hover:rgba(0,0,0,0.05);
    --border-static:rgb(234, 234, 234);

    --btn-size:2rem;
}

.embla-viewport {
    overflow:hidden;
    border-radius:var(--radius);
}

.embla-container {
    display:flex;
    touch-action:pan-y pinch-zoom;
    margin-left:calc(var(--gap) * -1);
}

.embla-slide {
    flex:0 0 var(--slide-size);
    min-width:0;
    padding-left:var(--gap);
}
.embla-slide:not(.active) {
    cursor:pointer;
    & .video-container{
        pointer-events:none;
    }
}

.embla-slide-img {
    display:block;
    height:var(--slide-height);
    width:100%;
    object-fit:cover;
    border-radius:var(--radius);
}

.embla-controls {
    display:grid;
    grid-template-columns:auto 1fr;
    justify-content:space-between;
    gap:var(--gap);
    margin-top:var(--gap);
}

.embla-buttons {
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:var(--gap);
    align-items:center;
}

.embla-dots {
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-end;
    align-items:center;
    margin-right:0;
    gap:var(--gap);
}

.embla-button, .embla-dot{
    appearance:none;
    background-color:var(--bg-static);
    touch-action:manipulation;
    display:inline-flex;
    text-decoration:none;
    cursor:pointer;

    padding:0;
    margin:0;
    width:var(--btn-size);
    height:var(--btn-size);

    transition:all .15s;

    border-radius:50%;

    align-items:center;
    justify-content:center;
    position:relative;

}

.embla-button {
    border:1px solid var(--text-body);
    line-height:var(--btn-size);
    font-size:20px;
    z-index:1;
    color:var(--text-body);
    transform:rotate(0deg);
    &:hover{
        background-color:var(--bg-hover);
        border-width:2px;
    }
    & i{
        width:inherit;
        height:inherit;
        line-height:inherit;
        vertical-align:middle;
    }
}

.embla-dot {
    border:1px solid var(--border-static);
    &:hover{
        background-color:var(--bg-hover);
    }
    &:hover, &.embla-dot-selected{
        border:2px solid var(--text-body);
    }
}