.banner-element {
    max-width: 100%;
    margin-inline: auto;
}

.banner-element img {
    box-sizing: border-box;
    display: block;
    max-width: 100%;
    background-color: var(--bs-body-bg);
}

.banner-element .cta {
    width: fit-content;
    width: -moz-fit-content;
    /* FF */
    width: -webkit-fit-content;
    /* iOS */
    max-width: 100%;

    color: #000;
    /* iOS */
    color: var(--alfa-black, black);
}

.banner-element .cta::after {
    content: '\1F862';
    margin-left: 1ch;
    font-size: 1.2em;
}

.banner-element.image-left {
    display: grid;
    grid-template-columns: 47% 1fr;
    /* figma */
}

.banner-element.image-left .image-wrapper {
    min-width: 50%;
}

.banner-element.image-left .content-wrapper {
    display: flex;
    flex-flow: column wrap;
    justify-content: center;
    gap: 1em;
    min-width: 50%;
    padding: 8em;

    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none"><path d="M 1 1 L 1 99 L 99 50 Z" fill="none" stroke="white" stroke-width="0.1"/></svg>');
    /* background-image: url('/modules/abcweb_theme/views/img/arrow.svg'); */
    background-size: 80% 100%;
    background-repeat: no-repeat;
    background-position: -6px center;
    background-color: #808080;
    /* iOS */
    background-color: var(--alfa-grey, grey);
}

@supports not (gap: 1em) {
    .banner-element.image-left .content-wrapper>* {
        margin-bottom: 1em;
    }
}

.banner-element p:empty {
    display: none;
}

.banner-element ul {
    list-style: disc;
    padding-left: 1rem;
}






/* Mobile */
/* @media (max-width: 1024px) {
    .banner-element.image-left {
        grid-template-columns: 51% 1fr;
    }

    .banner-element.image-left .content-wrapper {
        padding: 0;
        padding-left: 32px;
        padding-right: 20px;
    }
} */







/* Desktop */
/* @media screen and (min-width: 1025px) {
    .no-desktop {
        display: none !important;
    }
} */

/* Tablet */
/* @media screen and (min-width: 768px) and (max-width: 1024px) {
    .no-tablet {
        display: none !important;
    }
} */

/* Mobile */
/* @media screen and (max-width: 767px) {
    .no-mobile {
        display: none !important;
    }

    .banner-element.image-left {
        display: block;
    }

    .banner-element .image-wrapper,
    .banner-element .content-wrapper {
        width: 100%;
    }
} */

/* RESPONSIVE */

/* XXL larger desktops >= 1400 */
@media screen and (min-width: 1400px) { /* 1401 - inf */
    /**/
}
/* XL large desktops >= 1200 */
@media screen and (max-width: 1399.98px) { /* 1201 - 1400 */
    /**/
    .banner-element.image-left .content-wrapper {
        padding: 4rem;
    }
}
/* LG desktops >= 992 */
@media screen and (max-width: 1199.98px) { /* 993 - 1200 */

}
/* MD tablets >= 768 */
@media screen and (max-width: 991.98px) { /* 769 - 992 */
    .banner-element.image-left {
        grid-template-columns: 47% 1fr;
    }

    .banner-element.image-left .content-wrapper {
        padding: 0;
        padding-left: 32px;
        padding-right: 20px;
    }
}
/* SM phones >= 576 */
@media screen and (max-width: 767.98px) { /* 577 - 768 */
    .banner-element.image-left {
        display: block;
    }

    .banner-element .image-wrapper,
    .banner-element .content-wrapper {
        width: 100%;
    }

    .banner-element.image-left .content-wrapper {
        margin-top: 10px;
        padding: 30px 15px;
    }
}
/* XS small phones < 576 */
@media screen and (max-width: 575.98px) { /* 0 - 576 */
    /**/
}