/* Styles for simple site*/

html {
    webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: "PT Sans", sans-serif;
    font-weight: 300;
    font-size: 18px;
    line-height: 25px;
}

*,
*:before,
*:after {
    margin: 0;
    padding: 0;
}

/*Layout*/
.wrapper {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: 1rem;
    row-gap: 0;

    @media (min-width: 425px) {
        grid-template-columns: repeat(8, 1fr);
    }

    @media (min-width: 768px) {
        grid-template-columns: repeat(12, 1fr);
    }
}

body {
    min-height: 100vh;
    grid-template-rows: 1fr 5fr 200px;
    grid-template-areas: "header header header header"
    "main main main main"
    "footer footer footer footer";

    @media (min-width: 425px) {
        grid-template-rows: 1fr 5fr 90px;
        grid-template-areas: "header header header header header header header header"
            "main main main main main main main main "
            "footer footer footer footer footer footer footer footer";
    }

    @media (min-width: 768px) {
        grid-template-areas: "header header header header header header header header header header header header"
            "main main main main main main main main main main main main"
            "footer footer footer footer footer footer footer footer footer footer footer footer";
    }
}

footer {
    grid-area: footer;
    background-color: #CDD3C1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1rem;
    font-size: 0.9rem;
    line-height: 1rem;
    @media (min-width: 425px) {
        flex-direction: row;
        justify-content: space-between;
        align-items: baseline;
    }
}

header {
    background-color: #6C755C;
    grid-area: header;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem;
}

main {
    grid-area: main;
    grid-template-rows: 250px 1fr;
    grid-template-areas: "aside aside aside aside"
    "section section section section";
    @media (min-width: 425px) {
        grid-template-areas: "aside aside aside section section section section section"
    "aside aside aside section section section section section";
    }
    @media (min-width: 768px) {
        grid-template-areas: "aside aside section section section section section section"
    "aside aside section section section section section section";
    }
}

.section {
    grid-area: section;
    padding: 1rem;
}

.aside {
    grid-area: aside;
    display: flex;
    padding: 1rem;
    justify-content: center;
    border-bottom: 5px dashed  #6C755C;
    border-right: none;
    @media (min-width: 425px) {
        justify-content: start;
        border-bottom:none;
        border-right: 5px dashed  #6C755C;
    }
}

/*typography*/
.text--white {
    color: white;
}
.text-h2--small {
    font-size: 1rem;
    line-height: 1.2rem;
}

h1 {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 2rem;
    letter-spacing: 5px;
}

h2 {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.8rem;
    margin-bottom: 0.5rem;
}

a {
    display: inline-block;
    color: black;
    text-decoration: none;
    margin-top: 1rem;
    @media (min-width: 425px) {
        margin-top: 0;
    }
}

a:hover{
    color: #6C755C;
    font-weight: 700;
}