.wfc-slider {
    position: relative;

    width: 100%;

    height: min(760px, 85vh);

    min-height: 560px;

    overflow: hidden;

    background: #111;

    color: #fff;
}


.wfc-slider-track {
    position: relative;

    width: 100%;

    height: 100%;
}


.wfc-slide {
    position: absolute;

    inset: 0;

    visibility: hidden;

    opacity: 0;

    z-index: 1;

    transition:
        opacity 1s ease,
        visibility 1s ease;
}


.wfc-slide.is-active {
    visibility: visible;

    opacity: 1;

    z-index: 2;
}


/*
 * Media
 */

.wfc-slide-media {
    position: absolute;

    inset: 0;

    overflow: hidden;
}


.wfc-slide-media picture,
.wfc-slide-media img {
    display: block;

    width: 100%;

    height: 100%;
}


.wfc-slide-media img {
    object-fit: cover;

    object-position: center;
}


/*
 * Ken Burns
 */

.wfc-slide-media.has-ken-burns img {
    transform: scale(1.04);
}


.wfc-slide.is-active
.wfc-slide-media.has-ken-burns img {
    animation:
        wfcKenBurns
        var(--wfc-duration, 6000ms)
        ease-out
        forwards;
}


@keyframes wfcKenBurns {

    from {
        transform: scale(1.04);
    }

    to {
        transform: scale(1.12);
    }

}


/*
 * Overlay
 */

.wfc-slide-overlay {
    position: absolute;

    inset: 0;

    z-index: 2;

    background:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, .62) 0%,
            rgba(0, 0, 0, .30) 45%,
            rgba(0, 0, 0, .08) 100%
        );
}


/*
 * Content
 */

.wfc-slide-content {
    position: relative;

    z-index: 3;

    width: min(1200px, 90%);

    height: 100%;

    margin: 0 auto;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: flex-start;
}


.wfc-slide-eyebrow {
    margin-bottom: 18px;

    font-size: 13px;

    line-height: 1.5;

    letter-spacing: .22em;

    text-transform: uppercase;

    opacity: .9;
}


.wfc-slide-heading {
    margin: 0;

    max-width: 800px;

    font-size: clamp(
        48px,
        7vw,
        100px
    );

    line-height: .95;

    font-weight: 500;

    letter-spacing: -.025em;
}


.wfc-slide-description {
    margin-top: 24px;

    max-width: 620px;

    font-size: 18px;

    line-height: 1.7;

    opacity: .9;
}


/*
 * Button
 */

.wfc-slide-button {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    margin-top: 34px;

    min-height: 52px;

    padding: 0 28px;

    border: 1px solid rgba(
        255,
        255,
        255,
        .7
    );

    color: #fff;

    text-decoration: none;

    font-size: 13px;

    letter-spacing: .12em;

    text-transform: uppercase;

    transition:
        background .3s ease,
        color .3s ease;
}


.wfc-slide-button:hover {
    background: #fff;

    color: #111;
}


/*
 * Arrows
 */

.wfc-slider-arrow {
    position: absolute;

    top: 50%;

    z-index: 5;

    width: 52px;

    height: 52px;

    border: 1px solid
        rgba(255, 255, 255, .45);

    border-radius: 50%;

    background: rgba(
        0,
        0,
        0,
        .15
    );

    color: #fff;

    cursor: pointer;

    transform: translateY(-50%);

    transition:
        background .3s ease,
        border-color .3s ease;
}


.wfc-slider-arrow:hover {
    background: rgba(
        255,
        255,
        255,
        .18
    );

    border-color: #fff;
}


.wfc-slider-prev {
    left: 30px;
}


.wfc-slider-next {
    right: 30px;
}


.wfc-slider-arrow span {
    font-size: 20px;
}


/*
 * Dots
 */

.wfc-slider-dots {
    position: absolute;

    left: 50%;

    bottom: 30px;

    z-index: 5;

    display: flex;

    gap: 8px;

    transform: translateX(-50%);
}


.wfc-slider-dot {
    width: 34px;

    height: 2px;

    padding: 0;

    border: 0;

    background: rgba(
        255,
        255,
        255,
        .45
    );

    cursor: pointer;

    transition:
        width .3s ease,
        background .3s ease;
}


.wfc-slider-dot.is-active {
    width: 60px;

    background: #fff;
}


/*
 * Mobile
 */

@media (max-width: 767px) {

    .wfc-slider {
        height: 78vh;

        min-height: 600px;
    }


    .wfc-slide-overlay {
        background:
            linear-gradient(
                180deg,
                rgba(0, 0, 0, .20) 0%,
                rgba(0, 0, 0, .25) 35%,
                rgba(0, 0, 0, .70) 100%
            );
    }


    .wfc-slide-content {
        width: 86%;

        justify-content: flex-end;

        padding-bottom: 100px;
    }


    .wfc-slide-eyebrow {
        font-size: 11px;

        letter-spacing: .16em;

        margin-bottom: 14px;
    }


    .wfc-slide-heading {
        font-size: clamp(
            42px,
            13vw,
            64px
        );
    }


    .wfc-slide-description {
        margin-top: 18px;

        font-size: 15px;

        line-height: 1.6;
    }


    .wfc-slide-button {
        margin-top: 25px;

        min-height: 48px;

        padding: 0 22px;

        font-size: 11px;
    }


    .wfc-slider-arrow {
        width: 42px;

        height: 42px;

        top: auto;

        bottom: 25px;

        transform: none;
    }


    .wfc-slider-prev {
        left: 20px;
    }


    .wfc-slider-next {
        right: 20px;
    }


    .wfc-slider-dots {
        bottom: 44px;
    }

}