/* =========================
   HERO
========================= */

.hero {
    height: 100vh;

    background-image:
        linear-gradient(
            rgba(255,255,255,0.45),
            rgba(255,255,255,0.65)
        ),
        url("https://images.unsplash.com/photo-1521335629791-ce4aec67dd47");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    display: flex;
    align-items: center;

    padding-left: 100px;
}


/* =========================
   MAIN SS HERO
========================= */

.ss-hero {
    height: 100vh;

    position: relative;

    display: flex;
    align-items: flex-end;

    background: url('https://images.unsplash.com/photo-1515886657613-9f3515b0c78f?q=80&w=2000') center center/cover;

    overflow: hidden;

    margin-bottom: 120px;

    padding: 0 100px 120px;
}

.hero-overlay {
    position: absolute;
    inset: 0;

    background: rgba(0,0,0,.25);
}

.hero-content {
    position: relative;

    z-index: 2;

    max-width: 700px;

    color: #fafaf3;

    margin-left: 100px;
    margin-top: 120px;
}

.hero-kicker {
    display: block;

    margin-bottom: 20px;

    font-size: 12px;
    letter-spacing: 4px;

    text-transform: uppercase;
}

.hero-title {
    font-size: clamp(60px,8vw,120px);

    line-height: .95;

    font-family: 'Playfair Display', serif;

    font-weight: 500;

    margin-bottom: 30px;
}

.hero-subtitle {
    font-size: 20px;

    max-width: 500px;

    line-height: 1.7;

    margin-bottom: 40px;
}

.hero-btn {
    display: inline-block;

    padding: 16px 40px;

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

    color: #fff;

    text-decoration: none;

    letter-spacing: 2px;

    text-transform: uppercase;

    transition: .35s ease;
}

.hero-btn:hover {
    background: #fff;
    color: #000;
}