/**
 * layout.css
 *
 * Sections, major components and containing elements
 * Layouts specify widths and margins
 *
 * - Grid systems have their own stylesheet
 * - Mostly use single class names
 * - No use of ID's
 * - No use of !important
 * - Prefix layout classes with l-
 *
**/

/*.l-container {
	margin: 0 auto;
    padding: var(--size__space-normal) var(--size__site-gutter) var(--size__space-small);
	position: relative;
}*/

.l-header {
    border-bottom: 7px solid var(--color-bravo);
}

.l-header--left {
    grid-column-start: 1;
}

.l-header--right {
    bottom: 20px;
    position: absolute;
    right: 0;
    width: 100%;
}

.l-footer {
    background-color: var(--color-delta);
    border-top: 8px solid var(--color-bravo);
    color: var(--color-alpha);
    font-family: var(--font-family-markot);
    font-size: var(--step--1);
    padding: var(--size__space-medium) 0;
}

.home .l-footer {
    border-top: 0;
}

.l-footer > div {
    align-items: center;
    padding: 0 var(--size__space-medium-small);
}

.l-footer p {
    margin: 0;
}

.l-footer a,
.l-footer h2 {
    color: var(--color-alpha);
    text-decoration: none;
    margin: 0;
}

.l-footer a:hover,
.l-footer a:focus,
.l-footer a:active {
    text-decoration: underline;
}

.l-footer > div > div:last-child {
    text-align: right;
}

.l-heroSection,
.l-featuredSection {
    background-color: var(--color-charlie);
    margin-bottom: var(--size__space-small);
    padding: var(--size__space-medium-larger) 0;
}

.l-heroSection .grid-2 {
    grid-gap: 41px;
    grid-template-columns: 1fr;
    justify-items: center;
}

.l-featuredSection {
    background-color: var(--color-bravo);
}

.l-featuredSection .grid-3 {
    grid-gap: 28px;
    grid-template-columns: 1fr;
    justify-items: center;
}

.l-heroSection h2,
.l-featuredSection h2 {
    color: var(--color-alpha);
    font-family: var(--font-family-markot);
    font-size: var(--step-5);
    margin: 0 0  var(--size__space-medium);
    position: relative;
    text-align: center;
    top: calc(var(--size__space-small) * -1);
}

@media screen and (min-width: 768px) {
    
    .l-heroSection .grid-2 {
        grid-template-columns: 1fr 1fr;
    }

    .l-featuredSection .grid-3 {
        grid-template-columns: 1fr 1fr 1fr;
    }

}

@media screen and (min-width: 1024px) {

	/*.l-sidebar {
		padding-top: 3px;
	}*/

    .l-header--right {
        display: flex;
        grid-column-start: 3;
        justify-content: space-between;
        position: static;
    }

}