/* ==========================================================================
   PROJECT 1: RESPONSIVE ADAPTATIONS (MINIMALIST & SPACIOUS)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. MEDIUM MOBILE & PHABLETS (>= 480px)
   -------------------------------------------------------------------------- */
@media (min-width: 480px) {
    .hero-dates-capsule {
        flex-direction: row;
        justify-content: space-around;
        padding: 28px 40px;
    }

    .capsule-sep {
        width: 1px;
        height: 48px;
    }

    .venue-actions {
        flex-direction: row;
        justify-content: center;
    }
}

/* --------------------------------------------------------------------------
   2. TABLETS & LARGER (>= 768px)
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
    :root {
        --section-space: 140px;
    }

    .nav-links {
        display: flex;
    }

    .hero-names {
        flex-direction: row;
        align-items: baseline;
        gap: 24px;
    }

    .names-separator {
        margin: 0;
    }

    .hero-parents-block {
        flex-direction: row;
        justify-content: center;
        align-items: flex-start;
        gap: 36px;
    }

    .parent-spacer {
        width: 1px;
        height: 60px;
    }

    .events-list {
        flex-direction: row;
        justify-content: center;
        gap: 60px;
    }

    .event-item {
        flex: 1;
        max-width: 360px;
    }

    .arch-wireframe-wrap {
        max-width: 580px;
        height: 720px;
    }
}

/* --------------------------------------------------------------------------
   3. DESKTOPS (>= 1024px)
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
    :root {
        --section-space: 160px;
    }

    .hero-screen {
        padding: 140px 20px 80px;
    }

    .hero-screen::before {
        background-position: center 46%;
    }

    .events-list {
        gap: 80px;
    }
}