@use "abstracts";

.landing-grid {
    display: grid;
    grid-template-columns: 1fr minmax(auto, 1200px) 1fr;
    grid-template-areas:
        "navigation     navigation          navigation"
        "hero           hero                hero"
        ".              features-section    ."
        "footer         footer              footer";
}

.grid-area-navigation {
    grid-area: navigation;
    position: sticky;
    top: 0;
    z-index: var(--z-index-sticky);
}

.grid-area-hero {
    grid-area: hero;
    height: 100vh;

    display: flex;
    justify-content: center;
}

.grid-area-features {
    grid-area: features-section;
    height: 80vh;
}

.grid-area-footer {
    grid-area: footer;
}