/* 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-100);
    font-weight: inherit;
    line-height: var(--size-font-line-height-m);
    font-style: var(--font-style-normal);
    margin-bottom: 8px;
    color: #474747CC;
}

/* 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;
}

.ibd-hero-banner2-primary .banner .image img {
    height: 250px;
    background-size: cover;
}

.ibd-hero-banner2-primary .banner .image-mob img {
    background-image: url("/documents/20122/23111856/informacionLegal576.jpg");
    background-size: cover;
    height: 150px;
    width: 328px;
    background-position-x: 63%;
}

@media(min-width: 576px) {
    .banner .image-mob img {
        width: 492px !important;
        background-position-x: center;
        background-position-y: center;
    }
}

@media(min-width: 768px) {
    .banner .image-mob img {
        width: 672px !important;
        background-position-y: center;
    }
}

@media(min-width: 992px) {

    .ibd-hero-banner2-primary {
        height: 300px !important;
    }

    .ibd-hero-banner2-primary .banner .card{
        height: 138px;
    }

    .banner .image img {
        background-position-y: bottom;
        background-image: url("/documents/20122/23111856/informacionLegal1920.jpg");
    }

    .banner .card.ibd_banner__titulo,
    .banner .card .ibd_banner__subtitulo,
    .banner .card .ibd_banner_descripcion {
        text-align: center;
    }

    .banner .card {
        display: flex;
        width: 25rem;
        padding: 2rem 1.5rem;
        flex-direction: column;
        align-items: center;
        border-radius: 1rem;
        background: var(--ibd__white);
        align-self: center;
        margin-bottom: 0;
        z-index: 1;
        top: -30px;
        max-height: 368px;
        justify-content: center;
    }

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

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

@media(min-width: 1200px) {
    .banner .image img {
        background-position-y: 92%;
    }
}

@media(min-width: 1920px) {
    .banner .image img {
        background-position-y: 84%;
        background-position-x: center;

    }
}