/* https://css-tricks.com/css-only-carousel/ */
.section.with-carousel * {
    box-sizing: border-box;
    scroll-margin-top: 15em;
}

.slides {
    width: 100vw;
    padding: 3em;
    background-image: linear-gradient(rgba(var(--secondary-color-rgb), 0.05), rgba(var(--header-color-rgb), 0.2));
    text-align: center;
    overflow: hidden;
}


.slides>div {
    scroll-margin-top: 15em;
}

.slides {
    display: flex;
    gap: min(4em, 5vw);
    overflow-x: auto;
    scroll-snap-type: x mandatory;



    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;

    /*
    scroll-snap-points-x: repeat(300px);
    scroll-snap-type: mandatory;
    */
}

.slides>div,
.slides>a {
    scroll-snap-align: center;
    flex-shrink: 0;
    width: min(80vw, 900px);
    height: min(80vh, 500px);
    margin: min(5vh, 100px) 0;
    font-size: min(2vh, 100%);
    transform-origin: center center;
    transform: scale(1);
    transition: transform 0.5s;
    position: relative;

    display: flex;
    justify-content: center;
    align-items: center;
    /* font-size: 100px; */
}




.section.with-carousel {
    display: flex;
    align-items: center;
    justify-content: center;
}

.slides .use-case-slide .call-us-big-time.cta-variation.read-study {
    position: absolute;
    display: block;
    bottom: 1em;
    right: 1em;
    padding: 1em;
    border: 3px solid var(--secondary-color);
    border-radius: var(--border-radius-for-clickables);
    background-color: var(--secondary-color);
    color: var(--light);
    content: "Read the case study";
    font-size: 1.2em;
    font-stretch: 100%;
    font-weight: 600;
    font-variation-settings: "wght" 600, "wdth" 100;
    transition: transform 0.3s ease-in-out;
    box-shadow: 0px 0px 15px rgba(var(--header-color-rgb), 0.2), 0px 2px 3px rgba(0, 0, 0, 0.2);
}


.slides .use-case-slide:hover:after {
    transform: scale(1.05);
}