.main-banner-container {
    width: 99vw;
    position: absolute;
    left: 50%;
    top: var(--header-height);
    transform: translateX(-50%);
}

.main-banner-container img {
    width: 100%;
    height: auto;
}

@media (max-width: 768px) {
    .main-banner-container:not(.wide) .web {
        display: none;
        pointer-events: none;
    }

    .main-banner-container.wide {
        height: 200px !important;
    }

    .main-banner-container {
        max-width: none;
        width: 100%;
        height: 150px;
    }

    .main-banner-container .mobile {
        display: flex;
        height: 100%;
        object-fit: cover;
    }

    .main-banner-container.wide .wide-top {
        display: none;
    }

    .main-banner-container.wide .wide-title {
        display: none;
    }
}

.main-banner-container.wide {
    /*width: min(1320px, 95vw);*/
    /*max-width: calc(var(--body-max-width) - 30px);*/
    height: 375px;
    position: absolute;
    left: 50%;
    top: var(--header-height);
    transform: translateX(-50%);
    overflow: hidden;
}

.main-banner-container.wide picture {
    display: block;
    width: 100%;
    height: 100%;
}

.main-banner-container.wide img {
    height: 100%;
    object-fit: cover;
}

.main-banner-container.wide picture img:not(.wide-top) {
    position: relative;
    z-index: 1;
}

.main-banner-container.wide::after {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    background: linear-gradient(
        0deg,
        #fafafa 0%,
        rgba(250, 250, 250, 0) 100%
    );
    height: 42%;
    content: "";
    z-index: 2;
    pointer-events: none;
}

.main-banner-container.wide .wide-top {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 51;
    bottom: 0;
}

.main-banner-container.wide .wide-title {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 10%);
    z-index: 30;
    opacity: 0;
    top: 50%;
    animation: titleFading 2s forwards;
    animation-delay: 0.5s;
}

@keyframes titleFading {
    0% {
        opacity: 0;
        transform: translate(-50%, 10%);
    }
    25% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 1;
        transform: translate(-50%, -55%);
    }
}