@function mobile-columns($left-margin, $right-margin) {
    $s1: $left-margin;
    $s3: $right-margin;
    // IDK if it'll work when $s1, $s3
    // are specified in units other than vw
    $s2: 100vw - $s1 - $s3;
    @return $s1 $s2 $s3;
}

@function full-columns($page-width, $logo-width, $left-margin, $right-margin) {
    $s1: $left-margin;
    $s2: $logo-width - $left-margin;
    $s3: $page-width - $s1 - $s2 - $right-margin;
    $s4: $right-margin;
    @return $s1 $s2 $s3 $s4;
}

.site-logo {
    grid-area: site-logo;
}

.site-title {
    grid-area: site-title;
}

.site-description {
    grid-area: site-description;
}

.site-contacts {
    grid-area: contacts;
}

.site-navigation {
    grid-area: navigation;
}

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

.site-content {
    grid-area: content;
    display: flex;
    flex-direction: column;
    max-width: 100%;
}

.site-comments {
    grid-area: comments;
}

@media(max-width: $tablet-width) {
    $left-margin: 2vw;
    $right-margin: 2vw;

    .site-container {
        margin: 0;
        display: grid;
        justify-content: center;
        justify-items: center;
        grid-template-columns: mobile-columns($left-margin, $right-margin);
        grid-template-rows: minmax(2rem, min-content)
                                  minmax(2rem, min-content)
                                  minmax(2rem, min-content)
                                  minmax(2rem, min-content)
                                  minmax(2rem, min-content)
                                  minmax(2rem, auto)
                                  minmax(8rem, min-content)
                                  minmax(2rem, auto);
        grid-template-areas:
            " site-logo           site-logo      site-logo"
            " site-title         site-title      site-title"
            " site-description site-description  site-description"
            " contacts            contacts       contacts"
            " navigation         navigation      navigation"
            " left-margin          content       right-margin "
            " left-margin          footer        right-margin "
            " left-margin         comments       right-margin ";
    }

    .site-logo {
        display: flex;
        flex-direction: row;
        justify-content: center;
        width: 100%;
    }

    .site-logo > img {
        width: 100%;
        flex-shrink: 0;
    }

    .site-description {
        text-align: center;
    }

    .site-content {
        margin-left: 2vw;
        margin-right: 2vw;
    }

    .site-contacts {
        justify-content: center;
    }
}

@media(min-width: $tablet-width) {
    .site-container {
        margin-top: 0;
        margin-bottom: 0;
        overflow-y: scroll;
        display: grid;
        justify-content: center;
        grid-template-columns: full-columns($page-width, $logo-width, $left-margin, $right-margin);
        grid-template-rows: min-content
                                min-content
                                min-content
                                minmax(2rem, min-content)
                                minmax(2rem, auto)
                                minmax(8rem, min-content)
                                minmax(2rem, auto);
        grid-template-areas:
            "  site-logo     site-logo     site-title        site-title    "
            "  site-logo     site-logo     site-description  site-description "
            "  site-logo     site-logo     contacts          contacts      "
            "  navigation    navigation    navigation        navigation   "
            "  left-margin   content       content           right-margin "
            "  left-margin   footer        footer            right-margin "
            "  left-margin   comments      comments          right-margin ";
    }

    .site-logo {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .site-title {
        padding-left: $logo-title-margin;
    }

    .site-logo > img {
        width: $logo-width;
        flex-shrink: 0;
    }

    .site-contacts {
        justify-content: flex-start;
        padding-left: $logo-title-margin;
    }

    .site-description {
        padding-left: $logo-title-margin;
    }
}

.site-title {
    display: flex;
    justify-content: flex-start;
}

.site-description {
    margin-bottom: 1rem;
    width: 100%;
}

.site-navigation {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-evenly;
    align-content: center;
    width: 100%;
    max-width: 100vw;
}

.site-navigation > * {
    text-decoration: none;
    margin-right: 1rem;
}

.site-contacts {
    display: flex;
    flex-flow: row wrap;
    align-items: space-between;
    align-content: center;
    width: 100%;
}

.site-contacts > * {
    text-decoration: none;
    margin-right: 1rem;
}

.article-header {
    text-align: center;
    margin-bottom: 4rem;
}

.site-comments {
    width: 100%;
    display: block;
}