/* -------- base -------- */
main {
    margin-top: 0;
}

/* -------- hero layout -------- */
.landing {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.landing-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 900px;
    margin-top: 5rem;
    gap: 2rem;
    /* small breathing room between text and phone */
}

#landing {
    min-height: 100vh;
    padding: 0 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.landing-text {
    text-align: left;
    font-weight: 900;
    line-height: .85;
    font-size: 4rem;
    margin: 0 0 5rem;
    /* allow text to take remaining space next to phone */
    flex: 1 1 auto;
    min-width: 0;
    /* avoid overflow in flex containers */
}

.landing-text p {
    margin: 0;
}

.landing-text h1 {
    font: inherit;
    /* inherit family, weight, size, line-height */
    margin: 0;
    /* reset UA margins */
}

/* -------- phone mock-up -------- */
.phone-container {
    position: relative;
    flex: 0 0 auto;
    /* don't shrink in the row */
    width: clamp(260px, 22vw, 380px);
    /* responsive size */
    max-width: 100%;
    /* never overflow small screens */
    overflow: visible;
    /* ensure no clipping if animated later */
}

.phone-container img.frame {
    display: block;
    width: 100%;
    height: auto;
    /* preserve original aspect ratio */
    user-select: none;
    pointer-events: none;
}

/* -------- breakpoints -------- */
@media (min-width: 480px) {
    .landing-text {
        font-size: 4rem;
        margin-left: 2rem;
    }
}

@media (min-width: 768px) {
    .landing-text {
        font-size: 6rem;
        margin: 0 0 4rem;
    }

    .section-content {
        margin-bottom: 0;
    }
}

@media (min-width: 1024px) {
    .landing-container {
        flex-direction: row;
        align-items: center;
        margin-top: 10rem;
        max-width: 900px;
    }

    .landing-text {
        font-size: 7rem;
        margin: 0 10rem 0 5rem;
    }
}

@media (min-width: 1440px) {
    .landing-text {
        font-size: 8rem;
        margin-left: 2rem;
    }
}