.section-container {
    display: flex;
    flex-direction: column;

    justify-content: center;
    align-items: center;

    background: inherit;
    
    padding : 1vh 25vh 5vh 25vh;

    z-index: 9;
}

.content-container {
    display: flex;
    flex-direction: column;

    background-attachment: fixed;
    background-position: center;
    background-repeat: repeat;
    background-size: cover;

    background-image: url("../assets/bg-parallax.png");
    background-image: image-set(
        url("../assets/bg-parallax.webp") type("image/webp"),
        url("../assets/bg-parallax.png") type("image/png")
    );

    padding-top : 6em;

    z-index: 9;

    overflow: hidden;
}

@media screen and (max-width: 1366px) {
    .section-container {
        padding : 5vh 15vh 1vh 15vh;
    }

    .content-container {
        background-size: contain;
        background-image: url("../assets/bg-parallax-1366.png");
        background-image: image-set(
            url("../assets/bg-parallax-1366.webp") type("image/webp"),
            url("../assets/bg-parallax-1366.png") type("image/png")
        );
    }
}

@media screen and (max-width: 768px) {
    .section-container {
        padding : 5vh 1vh 1vh 1vh;
    }

    .content-container {
        background-size: contain;
        background-image: url("../assets/bg-parallax-768.png");
        background-image: image-set(
            url("../assets/bg-parallax-768.webp") type("image/webp"),
            url("../assets/bg-parallax-768.png") type("image/png")
        );
    }    
}

@media screen and (max-width: 480px) {
    .content-container {
        background-size: contain;
        background-image: url("../assets/bg-parallax-480.png");
        background-image: image-set(
            url("../assets/bg-parallax-480.webp") type("image/webp"),
            url("../assets/bg-parallax-480.png") type("image/png")
        );
    }    
}