.c-first-screen {
    min-height: 50%;
    width: 100%;
    position: relative;
    padding-bottom: 160px;
    background-position: center;
    background-size: cover;
}

.c-first-screen *,
.c-first-screen *::before,
.c-first-screen *::after {
    box-sizing: border-box;
}

.c-first-screen--narrow-image {
    min-height: 50%;
    padding-bottom: 0;
    background-repeat: no-repeat;
    background-position-y: -170px;
}

.c-first-screen__content {
    padding-bottom: 40px;
    background-image: linear-gradient(to top, rgba(0, 0, 0, .2), rgba(0, 0, 0, .7));
}

.c-first-screen__header {
    padding-top: 50px;
    margin-bottom: 80px;
}

.c-first-screen__navigation {
    width: 100%;
}

.c-first-screen__navigation.container,
.c-first-screen__main > .container {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    padding-right: 15px;
    padding-left: 15px;
}

@media (width >= 576px) {
    .c-first-screen__navigation.container,
    .c-first-screen__main > .container {
        max-width: 540px;
    }
}

@media (width >= 768px) {
    .c-first-screen__navigation.container,
    .c-first-screen__main > .container {
        max-width: 720px;
    }
}

@media (width >= 992px) {
    .c-first-screen__main > .container {
        max-width: 960px;
    }
}

@media (width >= 1200px) {
    .c-first-screen__main > .container {
        max-width: 1140px;
    }
}

@media (width >= 992px) {
    .c-first-screen__navigation.container {
        max-width: min-content;
    }
}

.c-first-screen__main {
    background-color: #f5f5f5;
}