.press-slider {
    max-width: 900px;
    margin: 20px auto;
}

.press-slider .slick-slide {
    padding: 0 10px;
}

.press-slider a {
    display: block;
}

.press-slider img {
       width: 100%;
    height: auto;
    display: block;
    transition: opacity .25s ease;
}

.press-slider a:hover img {
    opacity: .8;
}

.press-slider {
    visibility: hidden;
}

.press-slider.slick-initialized {
    visibility: visible;
}

.press-slider {
    visibility: hidden;
    min-height: 200px;
}

.press-slider.slick-initialized {
    visibility: visible;
}


.francois-hero {
    position: relative;
    width: min(760px, 100vw);
    margin: 0 auto 75px;
}


/* Prevent flash / stacked images before Slick has loaded */
.hero-slider {
    visibility: hidden;
    width: 100%;
    overflow: hidden;
}

.hero-slider.slick-initialized {
    visibility: visible;
}

.hero-slider:not(.slick-initialized) .hero-slide:not(:first-child) {
    display: none;
}


/* Hero photographs */
.hero-slide img {
    display: block;
    width: 100%;
    height: clamp(280px, 48vw, 450px);
    object-fit: cover;
    object-position: center 2%;
        
    -webkit-mask-image:
        linear-gradient(
            to right,
            transparent 0%,
            black 20%,
            black 80%,
            transparent 100%
        ),
        linear-gradient(
            to bottom,
            black 0%,
            black 78%,
            transparent 100%
        );

    -webkit-mask-composite: source-in;

    mask-image:
        linear-gradient(
            to right,
            transparent 0%,
            black 20%,
            black 80%,
            transparent 100%
        ),
        linear-gradient(
            to bottom,
            black 0%,
            black 78%,
            transparent 100%
        );

    mask-composite: intersect;
}

/* Logo overlapping bottom of photographs */
.hero-logo {
    position: absolute;
    z-index: 10;
    left: 50%;
    bottom: -60px;
    transform: translateX(-50%);

    width: min(420px, 75vw);
    height: auto;
    display: block;
}


/* Mobile */
@media (max-width: 600px) {

    .francois-hero {
        margin-bottom: 65px;
    }

    .hero-slide img {
        height: 300px;
        object-position: center 2%;
    }

    .hero-logo {
        width: min(330px, 76vw);
        bottom: -55px;
    }

}