.main-page-banner {
    padding-bottom: 0.625rem;
}

.main-page-banner .banner-container {
        position: relative;
        border-radius: 0.5rem;
    }

.main-page-banner .banner-container img {
            border-radius: 0.5rem;
        }

.main-page-banner .banner-container::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: calc((100% / 2));
        z-index: 0;
        border-radius: 0.5rem;
        background: linear-gradient(to bottom, transparent, #1f1f22 100%);
    }

.main-page-banner .content-wrapper {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        padding: 1.25rem 1.875rem;
        z-index: 10;
    }

.main-page-banner .content-wrapper .title {
            font-size: 2rem;
            line-height: 2.375rem;
            color: #fff;
            font-weight: 400;
        }

.promotion-list-page .main-page-banner .banner-container::after, .promotion-page .main-page-banner .banner-container::after {
                display: none;
            }

@media screen and (min-width: 64rem) {
    .main-page-banner {
        padding-bottom: 4.0625rem;
    }
        .main-page-banner .banner-container img {
            border-radius: 0.5rem;
            aspect-ratio: 1280 / 350;
        }
        .main-page-banner .content-wrapper {
            padding: 2.5rem 0;
        }
            .main-page-banner .content-wrapper .title {
                font-size: 2.6875rem;
                line-height: 3.125rem;
            }
}

@media screen and (min-width: 96rem) {
    .main-page-banner {
        padding-bottom: 4.375rem;
    }
        .main-page-banner .banner-container img {
            border-radius: 0.5rem;
            aspect-ratio: 1889 / 520;
        }
        .main-page-banner .content-wrapper {
            padding: 3.125rem 0;
        }
            .main-page-banner .content-wrapper .title {
                font-size: 3.75rem;
                line-height: 4.375rem;
            }
}