@charset "UTF-8"

*{
	box-sizing: border-box;
}

html {
	font-size: 16px;
	font-family: Arial, sans serif;
}

body {
	background-color: #fbfbfb;
}

h1, h2, h3 {
	margin-top: 0;
}

header h1 {
	margin: 0;
}

main p {
	margin-bottom: 0;
}

.container {
	display: grid;
	margin: 0 2rem;
	grid-template-columns: 2fr 6fr 4fr;
	grid-gap: 2rem 1rem;
	grid-template-rows: 3rem;
	grid-template-areas: 
		"logo menu menu" 
		"content content sidebar"
		"sponsors sponsors sponsors"
		"footer footer footer";
}

.logo {
	grid-area: logo;
	align-self: center;
}

.main-header {
	height: 3rem;
}

.main-menu {
	grid-area: menu;
	align-self: center;
	justify-self: end;
}

.main-menu ul {
	margin: 0;
	padding: 0;
	display: flex;
}
.main-menu__item {
	list-style-type: none;
	padding: 0;
	font-size: 1.1rem;
	margin-right: 0.5rem;
}
.main-menu .main-menu__item:last-of-type {
	margin-right: 0;
}

.content-area {
	grid-area: content;
}

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

.sponsors-wrapper {
	grid-area: sponsors;
}

.sponsors {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	grid-template-rows: auto;
	grid-column-gap: 1rem;
}

.sponsor {
	margin-left: 0;
	margin-right: 0;
	background-color: #fff;
	border-radius: .625rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.footer {
	grid-area: footer;
}

@media all and (max-width: 992px) {
    .container {
        margin: 0 1rem;
    }

    .sponsors {
        grid-column-gap: 0.5rem;
    }
}

@media all and (max-width: 768px) {
    html {
        font-size: 14px;
    }

    .container {
        grid-template-areas: 
        "logo menu menu"
        "content content content"
        "sidebar sidebar sidebar"
        "sponsors sponsors sponsors"
        "footer footer footer"
        ;
    }

    .sponsors {
        grid-template-columns: 1fr;
        grid-column-gap: 0;
        grid-row-gap: 1rem;
    }
}

@media all and (max-width: 540px) {
    .container {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        grid-template-areas: 
			"logo" 
			"content" 
			"sidebar" 
			"sponsors" 
			"footer" 
			"menu";
        grid-gap: 2rem 0;
    }

    .main-menu {
        justify-self: start;
    }
}

/*  Older browsers */

.content-area {
    display: inline-block;
    vertical-align: top;
    width: 69%;
}

.sidebar {
    display: inline-block;
    vertical-align: top;
    width: 30%;
}

.sponsor {
    vertical-align: middle;
}

.main-menu, .content-area, .sidebar, .sponsors-wrapper, .footer  {
    margin-top: 2rem;
}

@media all and (max-width: 760px) {
    .content-area, .sidebar {
        display: block;
        width: 100%;
    }

    .sponsor {
        width: auto;
    }
}

@supports (display: grid) {
    .content-area, .sidebar {
        width: auto;
    }

    .main-menu, .content-area, .sidebar, .sponsors-wrapper, .footer  {
        margin-top: 0;
    }
}