:root{
    --control-height-number: 15;
    --control-height-factor: calc(var(--control-height-number) / var(--original-text-size-number));
    --control-height: calc(var(--text-size-number) * var(--control-height-factor) * 1px);
}

[data-layout="slider"] .wrapper {
    position: relative;
}

[data-layout="slider"] .slides{
    cursor: grab;
}

[data-layout="slider"] .slick-slide{
    height: 100vh;
}

[data-layout="slider"] .slide {
    margin: auto;
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

[data-layout="slider"] .img-wrapper{
    width: 100%;
    height: 100%;
    position: relative
}

[data-layout="slider"] .img-wrapper img{
    width: 100%;
    height: 100%;
    aspect-ratio: unset;
}

[data-layout="slider"] .overlay::before{
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

[data-layout="slider"] .overlay{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

[data-layout="slider"] .slide-content-wrapper{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 2;
    padding: var(--gap);
}

[data-layout="slider"] .image{
    max-height: unset;
}

[data-layout="slider"] h3{
    color: #ffffff;
    font-family: "FrutigerLTStd-Black";
    letter-spacing: -1.1px;
}
[data-layout="slider"] .link-item{
    transform: scale(0.7338);
    transform-origin: left;
}

[data-layout="slider"] .controls{
    width: 400px;
    max-width: 100%;
    margin: auto;
    height: var(--control-height);
    display: flex;
    flex-direction: row;
    justify-content: center;
    position: absolute;
    bottom: calc(var(--gap) / 2);
    left: 0;
    right: 0;
}

[data-layout="slider"] .control{
    height: var(--control-height);
    width: var(--control-height);
    background-color: #ffffff;
    cursor: pointer;
    border-radius: 50%;
    filter: opacity(0.8);
    margin-left: 5px;
  margin-right: 5px;
    transition: 250ms ease-in-out;
}

[data-layout="slider"] .control.active{
    filter: opacity(1);
    transform: scale(1.5);
}

[data-layout="slider"] .image-description{
    position: absolute;
    bottom: calc(var(--gap) * 2);
    left: calc(var(--gap));
    color: #fff;
    z-index: 3;
}

@media only screen and (max-width: 579.99991px){
    [data-layout="slider"]{
        padding-left: 0px!important;
        padding-right: 0px!important;
    }

    [data-layout="slider"] .slide-content-wrapper{
        padding-left: calc(var(--gap) / 2);
        padding-right: calc(var(--gap) / 2);
    }
}