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

.hero {
    padding: clamp(56px, 8vw, 104px) 0 42px;
}

.hero.hero--banner {
    width: 100%;
    height: clamp(280px, 32vw, 520px);
        height: clamp(280px, 32vw, 400px);
    overflow: hidden;
    padding: 0;
}

.hero__banner-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}



/* =========================================
   FOOTER SECTION
========================================= */

.footer-illustration {
    padding-top: 10rem;
    background: linear-gradient( to bottom, transparent 0 50%, black 50% 100% );
}

.footer-black {
    color: #fff;
    background: #000;
}

.footer-black h2 {
    margin-bottom: 1rem;
    font-size: var(--font-size-heading-sm);
    color: var(--green);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
}

.footer-black p {
    font-size: var(--font-size-body);
    font-weight: 400;
    line-height: clamp(15px 2vw 30px);
}

.footer-black a {
    color: inherit;
    text-decoration: none;
    text-align:center;
}

.footer-black .d-flex a {
    white-space: nowrap;
}

.social-links {
    display: flex;
    gap: 5px;
    margin-top: 2rem;
}

.social-links a {
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 0.78rem;
    font-weight: 900;
}

.footer-black a:hover {
    color: var(--green);
}

.footer-legal {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.75rem 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
    color: rgba(255, 255, 255, 0.8);
    font-size: var(--font-size-body-sm);
}

.footer-legal a,
.footer-legal span {
    color: inherit;
    white-space: nowrap;
}

.signup-form {
    display: grid;
    gap: 8px;
}

.signup-form label {
    color: #fff;
    text-transform: none;
    font-weight: 600;
    letter-spacing:0px;
    font-size: var(--font-size-body-sm);
    text-transform: uppercase;
}

.signup-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
}

.signup-form input {
    width: 100%;
    min-height: 48px;
    padding: 10px 12px;
    border: 2px solid white;
    background: #232323;
    color: white;
}

.signup-form input:focus {
    outline: 2px solid white;
    border-color: white;
}

.copyright {
    margin: 0;
    padding: 0 0 38px;
    color: rgba(255, 255, 255, 0.7);
    text-align: center;
    font-size: 0.82rem;
}

.maintenance-alert > :last-child {
    margin-bottom: 0;
}

@media (max-width: 680px) {
    .signup-row {
        grid-template-columns: 1fr;
    }
}