.hero {
    background-color: #f5f5f5;
    height: 800px;
    height: 75vh;
    overflow: hidden;
    position: relative;
}

.hero__slideshow {
    left: 0;
    height: 100%;
    position: absolute;
    top: 0;
    width: 100%;
}

.slideshow__controls {
    display: none;
    position: absolute;
    z-index: 2;
}

@keyframes slow-zoom {
    from { transform: rotate(-1deg) scale(1.1); }
}

.slideshow__slides {
    animation: slow-zoom 6s linear;
    height: 100%;
    left: 0;
    padding: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

.slideshow__slide {
    background-position: center;
    background-size: cover;
    height: 100%;
    left: 0;
    list-style: none;
    position: absolute;
    top: 0;
    transform: rotate(-3deg) scale(2) translateY(10%);
    transition: .5s cubic-bezier(0.075, 0.820, 0.165, 1.000);
    width: 100%;
    will-change: transform;
}

.slideshow__slide.is-current {
    transform: none;
    z-index: 1;
}

.hero__text {
    background-image: linear-gradient(to top, rgba(0,0,0,.6), transparent);
    bottom: 0;
    color: white;
    font-weight: 900;
    padding: 0 15px; /* match body-content */
    position: absolute;
    width: 100%;
    z-index: 2;
}

.hero__text h1 {
    color: inherit;
    font-size: 10rem;
    font-weight: 900;
    letter-spacing: -.03em;
    margin-left: -.1em;
    padding-top: 1em;
    text-shadow: 0 .03em .03em rgba(0,0,0,.5);
}

@media screen and (max-width: 480px) {
    .hero__text h1 {
        font-size: 5rem;
    }
}