@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;

}