#heroBannerMedidasTempestades {
    margin: var(--size-space-0) auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 32px 16px;
    gap: 32px;
}

#heroBannerMedidasTempestades .bloque-contenido-texto {
    margin: var(--size-space-0) auto;
    width: 100%;
}

#heroBannerMedidasTempestades .bloque-contenido-texto .contentBlock {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--size-space-32);
    margin: var(--size-space-0);
}

#heroBannerMedidasTempestades picture {
    width: 100%;
}

#heroBannerMedidasTempestades picture img {
    height: 150px;
    width: 100%;
    object-fit: cover;
    border-radius: var(--border-radius-l);
}

#heroBannerMedidasTempestades .bloque-contenido-texto .contentBlock .textBlock {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--size-space-8);
    align-self: stretch;
    margin: var(--size-space-0);
    padding: var(--size-space-0);
}

#heroBannerMedidasTempestades .bloque-contenido-texto .contentBlock .textBlock h1 {
    color: #2C2C2C;
    text-align: left;
    margin: var(--size-space-0);
    padding: var(--size-space-0);
    width: 100%;
}

@media (min-width: 576px) {
    #heroBannerMedidasTempestades {
        padding: 32px 0;
        max-width: 492px;
    }
}

@media (min-width: 768px) {
    #heroBannerMedidasTempestades {
        max-width: 672px;
    }
    #heroBannerMedidasTempestades picture img {
        height: 200px;
    }
}

@media (min-width: 992px) {
    #heroBannerMedidasTempestades {
        background: url("/documents/46699/30352909/img-desktop-medidas-apoio-tempestades.webp");
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        padding: var(--size-space-40) 0;
        border-radius: 0 0 48px 48px;
        max-width: none;
        height: 307px;
        justify-content: center;
    }

    #heroBannerMedidasTempestades .bloque-contenido-texto {
        padding: var(--size-space-0);
        max-width: 828px;
    }

    #heroBannerMedidasTempestades picture {
        display: none;
    }

    #heroBannerMedidasTempestades .bloque-contenido-texto .contentBlock {
        max-width: 408px;
        padding: var(--size-space-32) var(--size-space-24);
        border-radius: var(--border-radius-l);
        margin: var(--size-space-0) auto var(--size-space-0) var(--size-space-0);
        background: var(--Color-Surface-General-1);
    }

    #heroBannerMedidasTempestades .bloque-contenido-texto .contentBlock .textBlock h1{
        text-align: center;
        width: 100%;
    }
}

@media (min-width: 1200px) {
    #heroBannerMedidasTempestades .bloque-contenido-texto {
        max-width: 996px;
    }
}

@media (min-width: 1440px) {
    #heroBannerMedidasTempestades .bloque-contenido-texto {
        max-width: 1272px;
    }
}