@layer components {
    .rtds-cta-banner {
        @apply rtds-grid rtds-rounded-xl rtds-min-h-36;
    }

    .rtds-cta-banner--img-bg {
        @apply rtds-bg-cover rtds-bg-center rtds-relative rtds-overflow-hidden;
    }

    :where(.rtds-cta-banner--img-bg) .rtds-cta-banner__content {
        @apply rtds-relative rtds-text-white;
    }

    /* manage overlay */

    .rtds-cta-banner--img-bg {
        @apply before:rtds-content-[''] before:rtds-absolute before:rtds-top-0 before:rtds-left-0 before:rtds-w-full before:rtds-h-full before:rtds-bg-black before:rtds-opacity-50;
    }

    /* ICON BG RIGHT */

    .rtds-cta-banner--bg-icon-right {
        @apply rtds-bg-no-repeat rtds-bg-[position:right_center];
    }

    .rtds-cta-banner--bg-sviluppo-toscana {
        background-size: 5em; 
        background-position: right bottom 3em;
        background-repeat: no-repeat;
    }

    .rtds-cta-banner--max-width {
        max-width: 500px; /* o il valore che preferisci */
    }
    
    /* Opzionale: arrotonda gli angoli quando c'è il max-width */
    .rtds-cta-banner--max-width {
        border-radius: 8px; /* o il valore del tuo design system */
        overflow: hidden; /* per mantenere il background-image dentro i bordi arrotondati */
    }

    /* ========================================
   VARIANTE 2-COL-TEST
   ======================================== */

.rtds-cta-banner--2-col-test {
    @apply rtds-rounded-2xl rtds-overflow-hidden;
    background-position: center bottom;
    background-size: auto 40%; /* o la dimensione che preferisci */
    padding-bottom: 12rem; /* spazio per l'icona */
}

/* Desktop: icona torna a destra */
@screen lg {
    .rtds-cta-banner--2-col-test {
        background-position: right center;
        background-size: auto 80%;
        padding-bottom: 0;
    }
}

}