.scroller.f-carousel {
    background: #bdc3c7;
    --f-carousel-slide-height: 30rem;
    --f-carousel-slide-width: 20rem;
    --f-carousel-gap: 14px;

    --f-button-width: 38px;
    --f-button-height: 38px;

    --f-button-svg-width: 16px;
    --f-button-svg-height: 16px;
    --f-button-svg-stroke-width: 2.5;

    --f-button-color: #fff;
    --f-button-hover-color: #fff;
    --f-button-border-radius: 50%;
    --f-button-shadow: 0 6px 12px -2px rgb(50 50 93 / 25%), 0 3px 7px -3px rgb(0 0 0 / 30%);

    --f-button-bg: var(--theme-color-primary);
    --f-button-hover-bg: #f9f9f9;
    --f-button-active-bg: #f0f0f0;

    --f-arrow-color: var(--theme-color-primary);
    --f-arrow-hover-color: #fff;

    transition: all 250ms ease;
}

.f-button {
    font-size: 2rem;
}


.scroller .f-carousel__slide {
    border-radius: var(--block-border-radius);
    margin: 1.5rem 0 !important;
}

.scroller .f-carousel__slide a {
    display: block;
    overflow: hidden;
    border-radius: var(--block-border-radius);
    box-shadow: 0 0 8px 4px rgba(0, 0, 0, .25);

    transform-style: preserve-3d;
    transform: perspective(250px);
}

.scroller .f-carousel__slide:hover img {
    animation: 150ms forwards ease-in-out f-hover-img;
}

.scroller .f-carousel__slide:not(:hover) img {
    animation: 250ms reverse-hover-img;
}

.scroller .f-carousel__slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 250ms ease;
}

@keyframes f-hover-img {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.1);
    }
}

@keyframes reverse-hover-img {
    from {
        transform: scale(1.1);
    }

    to {
        transform: scale(1);
    }
}