/* Habria que annadir las clases que estan aqui en el html al sacar la estructura html de la plantilla para convertirlo en estatico.
   Luego es sustuir las clases que vienen en la plantilla (h1,h2,h3) y annadir un <p> con la clase .ibd_banner_descripcion.    
*/

h1,
h2 {
    margin: 0;
    padding: 0;
}

/* Title/XS */
.banner .card .ibd_banner__titulo {
    font-family: var(--font-family-1-smbold);
    font-size: var(--size-font-125);
    font-weight: inherit;
    line-height: var(--size-font-line-height-m);
    font-style: var(--font-style-normal);
    margin-bottom: 8px;
}

/* Title/M */
.banner .card .ibd_banner__subtitulo {
    font-family: var(--font-family-1-smbold);
    font-size: var(--size-font-200);
    font-weight: inherit;
    line-height: var(--size-font-line-height-2xl);
    font-style: var(--font-style-normal);
    margin-bottom: 16px;
}

/* Body/Regular/L */
.banner .card .ibd_banner_descripcion {
    font-family: var(--font-family-1-regular);
    font-size: var(--size-font-125);
    line-height: var(--size-font-line-height-m);
    font-style: var(--font-style-normal);
    font-weight: inherit;
    margin-bottom: 32px;
}

@media(min-width: 992px) {
    .banner .card.ibd_banner__titulo, .banner .card .ibd_banner__subtitulo ,.banner .card .ibd_banner_descripcion {
        text-align: center;
    }

    .banner .card .ibd_banner__titulo {
        margin-bottom: 12px;
        text-align: center;
    }

    .banner .card .ibd_banner_descripcion {
        margin-bottom: 24px;
        text-align: center;
    }
}