.slider {
    display: grid;
    flex-direction: row;
    overflow-x: auto;
    margin-right: -1.5rem;
    scrollbar-width: none;
    -ms-overflow-style: none;
    grid-gap: 1.2rem;
}
.slider::-webkit-scrollbar {
    display: none;
}

.slider__fade { 
    display: none;
}

@media (min-width: 992px) {
    .slider {
        width: 100%;
        justify-content: space-between;
        margin: 0;
        overflow-x: inherit;
    }
    .slider .card {
        flex: 1 1 100%;
        margin-right: 1.5rem;
    }
    .slider .card:last-child {
        margin-right: 0px;
    }
}


.slidercontainer .slider {
    overflow: hidden;
    margin: 0 auto;
    grid-template-rows: auto;
    grid-auto-flow: column;
    overflow-x: auto;
    transition: linear 0.2s all;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.slidercontainer .slider::-webkit-scrollbar {
    display: none;
}

@media screen and (max-width: 767px) {
    .slidercontainer .slider {
        --gutter: 1rem;
        margin: 0 -1rem;
        grid-gap: 1.5rem;
        padding: 1rem;
        scroll-snap-type: x mandatory;
        grid-auto-columns: 80%;
   }
   .slidercontainer .slider >
   *:not(section) {
       scroll-snap-align: start;
       scroll-margin-left: 10px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
   .slidercontainer .slider {
       --gutter: 1rem;
       margin: 0 -1.5rem;
       grid-gap: 1.5rem;
       padding: 1.5rem;
       scroll-snap-type: x mandatory;
  }
   .slidercontainer .slider >
   *:not(section) {
       scroll-snap-align: start;
       scroll-margin-left: 10px;
  }
   .slider[data-desktop-items-visible] {
        grid-auto-columns: 360px;
   }
}

@media screen and (min-width: 768px) {
    .slider[data-desktop-items-visible="3"] {
        grid-auto-columns: calc((100% / 2) - var(--gutter));
    }
}

@media screen and (min-width: 1024px) {
    .slider[data-desktop-items-visible="3"] {
        grid-auto-columns: calc((100% / 3) - (var(--gutter) * 2 / 3));
    }
}

@media screen and (min-width: 1280px) {
    .slidercontainer .slider {
        --gutter: 1.5rem;
        margin: 0 -1rem;
        grid-gap: 1.5rem;
        padding: 1rem 1rem 1.5rem;
        position: relative; 
   }

   .slider__fade {
        display: block;
        width: 100%;
        max-width: 1510px;
        margin: 0 auto;
        height: 100%;
        position: absolute;
        left: 0;
        right: 0;
   }

   .slider__fade:before {
        content: '';
        position: absolute;
        z-index: 1;
        top: 0;
        right: 0;
        background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(255,255,255,1) 90%, rgba(255,255,255,1) 100%);
        width: 90px;
        height: 100%;
    }   

}

/* Controls */
.controls-container {
    display: flex;
    justify-content: flex-end;
}
.controls-container-flex {
    display: flex;
}

/* Dots */
button.dot {
    appearance: none;
    border: 0;
    background: transparent;
    padding: 0;
    overflow: hidden;
    white-space: nowrap;
    text-indent: 40px;
}
.dots-container {
    margin-right: 1.5rem;
    display: flex;
    align-items: center;
}
.dots-container >
.dot {
    background-color: #ccc;
    border-radius: 100%;
    width: 8px;
    height: 8px;
    margin-right: 8px;
    cursor: pointer;
}
.dots-container >
.dot.active {
    background-color: var(--blue);
}

/* Arrow styling */
.arrows-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 5px;
}

.arrows-container .arrow {
    width: 48px;
    height: 48px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 12px;
    cursor: pointer;
    border: 0;
    appearance: none;
    background: transparent;
}

.arrows-container .arrow.left {
    border: 1px solid var(--blue);
    margin-right: 0.75rem;
}

.arrows-container .arrow.right {
    background-color: var(--green);
}

.arrow.left:hover {
    color: #26607f;
    border: 2px solid #26607f;
    background: rgba(34, 111, 152, 0.3);
}

.arrow.right:hover {
    border-color: #266180;
    background-color: #266180;
}

/* DESKTOP */
@media all and (min-width: 1199px) {
    .arrows-container {
        visibility: visible;
    }
}

.slidercontainer {
    position: relative;

}

:root {
    --gutter: 1.5rem;
}

div[data-desktop-items-visible] {
    display: grid;
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 90%;
}

div[data-desktop-items-visible="1"] {
    grid-auto-columns: 100%;
}

@media all and (max-width: 1279px) {
    div[data-desktop-items-visible="3"] {
        grid-auto-columns: calc((100% / 3) - (var(--gutter) * 2 / 3));
    }
}

@media all and (min-width: 1280px) {
    div[data-desktop-items-visible="2"] {
        grid-auto-columns: calc(50% - (var(--gutter) * 0.5));
    }

    div[data-desktop-items-visible="3"] {
        grid-auto-columns: calc((100% / 3) - (var(--gutter) * 2 / 3));
    }

    div[data-desktop-items-visible="4"] {
        grid-auto-columns: calc(25% - (var(--gutter) * 0.75));
    }

    div[data-desktop-items-visible="6"] {
        grid-auto-columns: calc((100% / 6) - (var(--gutter) * 5 / 6));
    }

    .slidercontainer {
        width: 100vw;
        overflow: hidden;
        margin-left: calc(-1 * ((100vw - 1110px) / 2) - 18px);
    }

    .slidercontainer .slider {
        max-width: 1310px;
        margin: 0 auto;
        margin-left: calc((100vw - 1110px) / 2);
        padding-right: 200px;
    }

    .slidercontainer .controls-container {
        max-width: 1110px;
        z-index: 2;
        position: relative;
        margin: 0 auto;
    }
}