/**
 * CONTENTS
 *
 * SETTINGS
 * Global...............Globally-available variables and config.
 *
 * TOOLS
 * Mixins...............Useful mixins.
 *
 * GENERIC
 * Normalize.css........A level playing field.
 * Box-sizing...........Better default `box-sizing`.
 *
 * BASE
 * Headings.............H1–H6 styles.
 *
 * OBJECTS
 * Wrappers.............Wrapping and constraining elements.
 *
 * COMPONENTS
 * Page-head............The main page header.
 * Page-foot............The main page footer.
 * Logo.................Logo elements.
 * Filter...............Filter elements.
 * Card.................Card elements.
 *
 * TRUMPS
 * Text.................Text helpers.
 */


/* GENERAL HEADER STYLE */

#HeaderSection {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    grid-template-areas:
            "Logo . Nav SignNav";
    margin: 0 2.5rem;
}

@media screen and (max-width: 700px){
    #HeaderSection {
        margin: 2rem 0 0 0;
        grid-template-columns: auto 1fr auto;
        grid-template-areas:
                "Logo . SignNav"
                "Nav Nav Nav";
    }
}

/*#HeaderSection, .HeaderMenu {*/
/*    display: flex;*/
/*    justify-content: space-between;*/
/*}*/

#SearchSection h1 {
    font-weight: bold;
}

/*------------------------------------*\
  #FILTER-SECTION
\*------------------------------------*/

#FilterSection {
    display: flex;
    flex-wrap: wrap;
    margin: 2.125rem 0;
    align-content: center;
}

@media screen and (max-width: 700px) {
    #FilterSection {
        margin-right: 0;
        margin-left: 0;
    }
}

.FilterSection--title {
    margin-right: 34px;
}