@font-face {
    font-family: Montserrat;
    /*noinspection CssUnknownTarget*/
    src: url(../fonts/montserrat/Montserrat-Regular.otf) format("opentype");
}

@font-face {
    font-family: MontserratSemiBold;
    /*noinspection CssUnknownTarget*/
    src: url(../fonts/montserrat/Montserrat-SemiBold.otf) format("opentype");
}


@font-face {
    font-family: Montserrat;
    font-weight: bold;
    /*noinspection CssUnknownTarget*/
    src: url(../fonts/montserrat/Montserrat-Bold.otf) format("opentype");
}

@font-face {
    font-family: Montserrat;
    font-weight: 200;
    /*noinspection CssUnknownTarget*/
    src: url(../fonts/montserrat/Montserrat-Light.otf) format("opentype");
}


body, h1, h2, h3, h4, h5, p {
    font-family: Montserrat, "Helvetica Neue", sans-serif;
}


/* Global CSS variables */
:root {
    --spacing-company: 4rem;
    --spacing: 0.2rem;
}

/* Typography */
h2,
h3,
hgroup > :last-child {
    font-weight: 200;
}

small {
    color: var(--muted-color);
    font-size: 0.8rem;
}

.smaller {
    font-size: 0.7rem;
}

/* Header */
.hero {
    background-color: #394046;
    background-image: url("../img/kaschu_one_bg.jpg");
    background-position: center;
    background-size: cover;
}

header {
    padding: 6rem 0 var(--spacing-company) 0;
}

header hgroup > :last-child {
    color: var(--h3-color);
}

header hgroup {
    margin-bottom: var(--spacing-company);
}

/* Main */
@media (min-width: 992px) {
    main .grid {
        grid-column-gap: var(--spacing-company);
        grid-template-columns: auto 25%;
    }
}

form.grid {
    grid-row-gap: 0;
}

/* Aside nav */
aside img {
    margin-bottom: 0.25rem;
    border-radius: 16px;
}

aside p {
    margin-bottom: var(--spacing-company);
    line-height: 1.25;
}

.center {
    text-align: center;
}