/* Banner. */

.banner {
    position: relative;
    margin-bottom: 0!important;
}

.banner .container {
    position: absolute;
    inset: 0;

    padding-block: var(--section-gap);
    z-index: 1;
}

.banner-background {
    padding-bottom: calc(var(--section-gap) * 2);
}

.banner-dec {
    pointer-events: none;
    position: absolute;
    inset: 0;
}

.banner-dec-img:first-child {
    position: absolute;
    top: 50%;
    left: var(--container-padding);
}

.banner-dec-img:first-child img {
    width: 100%;
    max-width: clamp(100px, 11vw, 228px);
    -webkit-border-radius: 150px 150px 0 0;
    -moz-border-radius: 150px 150px 0 0;
    border-radius: 150px 150px 0 0;
}

.banner-dec-img:last-child {
    position: absolute;
    left: 50%;
    bottom: calc(var(--section-gap) * .8);
}

.banner-dec-img:last-child img {
    width: 100%;
    max-width: clamp(160px, 14vw, 260px);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

.banner-title {
    max-width: min(733px, 50%);
    margin-left: auto;
}

/* Banner. */

@media only screen and (max-width: 767px) {

    .banner {
        display: flex;
        flex-direction: column;
    }

    .banner .container {
        position: static;
        order: -1;
    }
    .banner-background {
        margin-top: -40px;
        background-color: var(--color-background);
    }

    .banner-background img {
        min-width: 600px;
        mix-blend-mode: lighten;
    }

    .banner-title {
        margin-left: 0;
        max-width: none;
    }
}