/* About 16 — "Bienvenidos..." de bbcasita.cl. Titular con 30px de aire; banda con
   200px/150px de relleno y tarjetas de 1/4 con icono negro de 50px (en bbcasita son SVG de
   Elementor sin relleno propio, que se ven negros) y título h4 centrado. */

.gpf-about-16 .gpf-about-16__head {
    padding: 30px 10px;
}

.gpf-about-16 .gpf-about-16__band {
    position: relative;
    padding: 200px 0 150px;
    background-color: var(--gpf-bbc-secondary);
}

.gpf-about-16 .gpf-about-16__overlay {
    position: absolute;
    inset: 0;
    background-color: var(--gpf-bbc-secondary);
    opacity: 0.5;
}

.gpf-about-16 .gpf-about-16__grid {
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    padding: 0 10px;
}

.gpf-about-16 .gpf-about-16__card {
    display: flex;
    flex: 0 0 calc(25% - 20px);
    flex-direction: column;
    /* Sin esto una palabra larga ("Celebraciones") ensancha la tarjeta por sobre el 25%
       y la cuarta de la fila salta a una línea nueva */
    min-width: 0;
    align-items: center;
    justify-content: center;
    min-height: 284px;
    margin: 10px;
    padding: 30px;
    border-radius: 10px;
    background-color: #FFFFFF;
    text-align: center;
}

.gpf-about-16 .gpf-about-16__icon {
    margin-bottom: 20px;
    color: #000000;
    font-size: 50px;
    line-height: 1;
}

.gpf-about-16 .gpf-about-16__icon svg {
    width: 50px;
    height: 50px;
    fill: currentColor;
}

.gpf-about-16 .gpf-about-16__card .gpf-bbc-h {
    line-height: 1.2;
    text-align: center;
}

@media (max-width: 767px) {
    .gpf-about-16 .gpf-about-16__band {
        padding: 100px 0 50px;
    }

    .gpf-about-16 .gpf-about-16__card {
        flex-basis: calc(100% - 20px);
        min-height: 200px;
    }
}