// @import "../../../../src/sass/variables/variables";

/* Mobile-first implies defaults, there is no "first" breakpoint,
   and we don't need a minimum viewport width to support. */

.content {
    grid-area: #{"1 / 1 / span 1 / span 8"};
}

main {
    grid-area: #{"1 / 1 / span 1 / span 8"};
}

footer {
    grid-area: #{"2 / 1 / span 1 / span 8"};
}

@media screen and (min-width: 512px) {
    // .site-nav {
    //     grid-area: #{1 / 1 / span 1 / span 5};
    // }

    .content {
        grid-area: #{1 / 1 / span 1 / span 16};
    }

    main {
        grid-area: #{1 / 1 / span 1 / span 16};
    }

    footer {
        grid-area: #{2 / 1 / span 1 / span 16};
    }
}

@media screen and (min-width: 768px) {
    .site-nav {
        grid-area: #{1 / 1 / span 1 / span 5};
    }

    .content {
        grid-area: #{1 / 1 / span 1 / span 16};
    }

    main {
        grid-area: #{1 / 6 / span 1 / span 11};
    }

    footer {
        grid-area: #{2 / 1 / span 1 / span 16};
    }
}

@media screen and (min-width: 1024px) {
    .site-nav {
        grid-area: #{1 / 1 / span 1 / span 3};
    }

    main {
        grid-area: #{1 / 4 / span 1 / span 13};
    }
}
