// COLOR VARIABLES
$color-primary: #c69963;
$color-primary-dark: #B28451;

$color-secondary: #101d2c;

$color-grey-light-1: #f9f7f6;
$color-grey-light-2: #aaa;

$color-grey-dark-1: #54483A;
$color-grey-dark-2: #6D5D4B;

// FONT VARIABLES
$font-primary: 'Nunito', sans-serif;
$font-display: 'Josefin Sans', sans-serif;

// RESPONSIVE BREAKPOINTS
$bp-largest: 75em;   // 1200px
$bp-large: 62.5em;   // 1000px
$bp-medium: 50em;    // 800px;
$bp-small: 37.5em;    // 600px;

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: inherit;
}

html {
    box-sizing: border-box;
    font-size: 62.5%; // 10px/16px = 62.5% -> 1rem = 10px

    @media only screen and (max-width: $bp-largest) {
        font-size: 50%;
    }
}

body {
    font-family: $font-primary;
    color: $color-grey-dark-2;
    font-weight: 300;
    line-height: 1.6;
}

.container {
    display: grid;
    grid-template-rows: 80vh min-content 40vw repeat(3, min-content);
    grid-template-columns: [sidebar-start] 8rem [sidebar-end full-start] minmax(6rem, 1fr) [center-start] repeat(8, [col-start] minmax(min-content, 14rem) [col-end]) [center-end] minmax(6rem, 1fr) [full-end];

    @media only screen and (max-width: $bp-large) {
        grid-template-rows: 6rem 80vh min-content 40vw repeat(3, min-content);
        grid-template-columns: [full-start] minmax(6rem, 1fr) [center-start] repeat(8, [col-start] minmax(min-content, 14rem) [col-end]) [center-end] minmax(6rem, 1fr) [full-end];
    }

    @media only screen and (max-width: $bp-medium) {
        grid-template-rows: 6rem calc(100vh - 6rem);
    }
}