.banner {
    position: relative;
    background-image: url("../images/banner-background.png");
    background-size: cover;
    background-repeat: no-repeat;
    min-height: 900px;
    overflow: hidden;
    margin-top: 100px;
}

    .banner .big-logo {
        position: absolute;
        top: 212px;
        left: 50%;
        transform: translateX(-50%);
    }

        .banner .big-logo img {
            height: 406px;
        }

    .banner .left-side {
        position: absolute;
        left: 0;
        width: 735px;
        height: 900px;
        background-image: url("../../SevenOctoberSongs/images/banner-left-side.png");
        background-size: contain;
        background-repeat: no-repeat;
    }

    .banner .right-side {
        position: absolute;
        right: 0;
        width: 764px;
        height: 900px;
        background-image: url("../../SevenOctoberSongs/images/banner-right-side.png");
        background-size: contain;
        background-repeat: no-repeat;
    }

    .banner .gradient {
        position: absolute;
        bottom: 0;
        height: 540px;
        width: 100%;
        background: linear-gradient(180deg, rgba(9, 43, 63, 0) 0%, #092B3F 100%);
    }

.full-width-container {
    position: relative;
    background-image: url("../images/container-background.png");
    background-position: bottom center;
    background-repeat: no-repeat;
    background-size: contain;
}

.content-container {
    max-width: 1280px;
    margin: 0 auto;
    padding-bottom: 180px;
}

.about-project {
    margin-bottom: 140px;
}

    .about-project .title {
        font-size: 64px;
        font-family: 'DavidLibre', sans-serif;
        font-weight: bold;
        line-height: 60.67px;
        margin-bottom: 16px;
    }

        .about-project .title .highlight {
            color: #F6D95B;
        }

    .about-project .description {
        max-width: 800px;
        font-size: 20px;
        line-height: 1.5;
    }

.producers {
    margin: 0 auto;
    max-width: 815px;
    text-align: center;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.75;
}

    .producers .item {
        margin-left: 16px;
        display: inline-block;
    }

        .producers .item:last-child {
            margin-left: 0;
        }

        .producers .item .title {
            margin-left: 4px;
        }

            .producers .item .title:last-child {
                margin-left: 0;
            }

    .producers .value {
        font-weight: bold;
    }

@media (min-width: 1367px) and (max-width: 1700px) {
    .banner .left-side {
        width: 500px;
    }

    .banner .right-side {
        width: 550px;
    }
}

@media (min-width: 1025px) and (max-width: 1366px) {
    .banner {
        min-height: 675px;
        margin-bottom: 63px;
    }

        .banner .big-logo {
            top: 244px;
        }

            .banner .big-logo img {
                height: 304px;
            }

        .banner .left-side {
            width: 443px;
            height: 675px;
        }

        .banner .right-side {
            width: 450px;
            height: 627px;
        }

        .banner .gradient {
            height: 0;
        }

    .full-width-container {
        background-image: url("../images/container-background-laptop.png");
    }

    .content-container {
        max-width: 100%;
        margin: 0 auto;
        padding: 0 43px 180px 43px;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .banner {
        min-height: 443px;
        margin-top: 60px;
        margin-bottom: 80px;
    }

        .banner .big-logo {
            top: 212px;
        }

            .banner .big-logo img {
                height: 140px;
            }

        .banner .left-side {
            width: 304px;
            height: 443px;
            background-image: url("../../SevenOctoberSongs/images/banner-left-side-tablet.png");
        }

        .banner .right-side {
            top: 95px;
            width: 180px;
            height: 350px;
            background-image: url("../../SevenOctoberSongs/images/banner-right-side-tablet.png");
        }

        .banner .gradient {
            height: 0;
        }

    .full-width-container {
        background-image: url("../images/container-background-tablet.png");
    }

    .content-container {
        max-width: 100%;
        padding-bottom: 290px;
    }

    .about-project {
        margin-bottom: 80px;
        padding: 0 30px;
    }

        .about-project .title {
            font-size: 40px;
            line-height: 40px;
            margin-bottom: 8px;
        }

            .about-project .title .highlight {
                color: #F6D95B;
            }

        .about-project .description {
            max-width: 100%;
            font-size: 20px;
            line-height: 30px;
        }

    .producers {
        max-width: 100%;
        text-align: right;
        padding: 0 30px;
    }
}

@media screen and (max-width: 767px) {
    .banner {
        background-image: url("../images/banner-background-mobile.png");
        background-size: cover;
        min-height: 725px;
        margin-top: 60px;
        margin-bottom: 30px;
    }

        .banner .big-logo {
            top: 310px;
        }

            .banner .big-logo img {
                height: 140px;
            }

        .banner .left-side {
            width: 304px;
            height: 443px;
            background-image: url("../../SevenOctoberSongs/images/banner-left-side-mobile.png");
        }

        .banner .right-side {
            top: 374px;
            width: 180px;
            height: 350px;
            background-image: url("../../SevenOctoberSongs/images/banner-right-side-mobile.png");
        }

        .banner .gradient {
            height: 40px;
        }

    .full-width-container {
        background-image: url("../images/container-background-mobile.png");
    }

    .content-container {
        max-width: 100%;
        padding-bottom: 160px;
    }

    .about-project {
        margin-bottom: 80px;
        padding: 0 30px;
    }

        .about-project .title {
            font-size: 40px;
            font-weight: bold;
            line-height: 40px;
            margin-bottom: 8px;
        }

        .about-project .description {
            max-width: 100%;
        }

    .producers {
        max-width: 100%;
        text-align: right;
        padding: 0 30px;
    }
}

@media screen and (max-width: 1200px) {
    .banner {
        margin-top: 60px;
    }
}