:root {
    --banner-ratio: 4 / 1;
}

.main-banner {
    position: relative;
    width: 100%;
    top: 0;
    left: 0;
}

    .main-banner .banner-ratio {
        width: 100%;
        aspect-ratio: var(--banner-ratio);
        overflow: hidden;
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: center;
        align-items: center;
        z-index: 1;
    }

        .main-banner .banner-ratio .banner-backimage {
            width: 100%;
            position: absolute;
            top: 0;
            left: 0;
            aspect-ratio: var(--banner-ratio);
            z-index: 1;
        }

        .main-banner .banner-ratio .banner-center {
            position: relative;
            z-index: 2;
            color: #fff;
            width: var(--page-width);
            top: -25px;
            overflow: visible;
            height: fit-content;
        }

            .main-banner .banner-ratio .banner-center .banner-title {
                font-size: 3rem;
                font-family: bold;
                text-transform: uppercase;
                width: 100%;
            }

            .main-banner .banner-ratio .banner-center .banner-stitle {
                position: relative;
                top: 8px;
                font-size: 1.2rem;
                font-family: regular;
                width: 100%;
            }

    .main-banner .banner-info {
        position: relative;
        background-color: var(--green-light);
        width: 680px;
        height: 200px;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-content: flex-start;
        justify-content: space-around;
        align-items: flex-start;
        padding-top: 60px;
        z-index: 2;
        top: -100px;
    }

        .main-banner .banner-info .banner-titleinfo {
            font-family: bold;
            font-size: 1.3rem;
            text-transform: uppercase;
            margin-bottom: 10px;
        }

        .main-banner .banner-info .banner-textinfo {
            font-family: regular;
            font-size: 1.2rem;
        }


@media(max-width:1420px) {
    :root {
        --banner-ratio: 3 / 1;
    }
}

@media(max-width:1350px) {
    .main-banner .banner-center {
        padding: 0 30px;
    }
}

@media(max-width:960px) {
    :root {
        --banner-ratio: 2 / 1;
    }
}

@media(min-width:1800px) {
    .main-banner .banner-info {
        left: calc(100% / 10);
    }
}

@media(min-width:2500px) {
    .main-banner .banner-info {
        left: calc(100% / 5);
    }
}