section.paragraph--type--banner {
    width: 100%;
}
.paragraph--type--banner .region {
    max-width: none;
    padding: 0;
    position: relative;
}

.paragraph--type--banner .content-wrap {
    position: absolute;
    max-width: 40rem;
    padding: 6vw;
}

.paragraph--type--banner.orient-top-left .content-wrap {
    top: 0;
}

.paragraph--type--banner.orient-bottom-left .content-wrap {
    bottom: 11rem;
    left: 9rem;
}

.paragraph--type--banner.orient-top-right .content-wrap {
    top: 0;
    right: 0;
}

.paragraph--type--banner.orient-bottom-right .content-wrap {
    bottom: 11rem;
    right: 9rem;
}

.paragraph--type--banner.box-on .content-wrap {
    background-color: rgba(255,255,255, 0.85);
    border-radius: 25px;
    padding: 5rem 8rem;
    max-width: 27%;
}

.paragraph--type--banner.box-on .content-wrap .copy {
    padding-bottom: 2rem;
}

.paragraph--type--banner.orient-top-left.box-on .content-wrap {

    /* border: 1px solid #fff; */
    top: 4rem;
    left: 6rem;
    right: auto;
}

.paragraph--type--banner.orient-top-right.box-on .content-wrap {
    right: 6rem;
    top: 6rem;
    left: auto;
}

.paragraph--type--banner.box-on .content-wrap::before {
    content: " ";
    position: absolute;
    /* z-index: -1; */
    top: 1rem;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    border: 2px solid #fff;
    border-radius: 19px;
    z-index: 5;
}

.paragraph--type--banner.color-light .content-wrap h2 {
    color: #fff;
}

.paragraph--type--banner .content-wrap .headline,
.paragraph--type--banner .content-wrap .copy,
.paragraph--type--banner .content-wrap .banner-button {
    position: relative;
    z-index: 10;
}

.paragraph--type--banner .content-wrap .copy {
    margin-bottom: 2rem;
    position: relative;
    z-index: 10;
}

.paragraph--type--banner.color-light .content-wrap .copy {
    color: #f7f7f7;
}

.paragraph--type--banner .image {
    margin-bottom: -9px;
}

.paragraph--type--banner .image img {
    width: 100%;
}

@media screen and (max-width: 1480px) {
    .paragraph--type--feature .image > div,
    .paragraph--type--banner .image > div{
        aspect-ratio: 500 / 320;
    }
    .paragraph--type--banner .image img,
    .paragraph--type--feature .image img {
        object-fit: cover;
        object-position: center;
        height: 100% !important;
        width: auto !important;
    }
}

@media screen and (max-width: 900px) {
    .paragraph--type--banner .content-wrap {
        position: relative;
        bottom: auto !important;
        max-width: none !important;
        background-color: var(--color-uw-page);
        left: unset !important;
        right: unset !important;
        margin-inline: 6vw;
        padding: 0 !important;
        margin-top: 3rem;
        background: none;
    }
    .paragraph--type--banner .content-wrap::before{
        border: none !important;
    }
    .paragraph--type--banner.color-light .content-wrap h2,
    .paragraph--type--banner.color-light .content-wrap .copy {
        color: var(--color-uw-body);
    }

    .paragraph--type--banner .banner-button {
        padding-bottom: 2rem;
    }
}