/* ==========================================================
   WHY US
========================================================== */

.why-us {

    padding: 25px 35px 30px;

    background: var(--navy);

    color: white;

}


.section-heading-light h2 {

    color: white;

}


.why-grid {

    max-width: 1380px;

    margin: 0 auto;

    display: grid;

    grid-template-columns: repeat(4, 1fr);

}


.why-card {

    padding: 0 30px;

    text-align: center;

    border-right: 1px solid rgba(255,255,255,0.18);

}


.why-card:last-child {

    border-right: none;

}


.why-icon {

    height: 45px;

    color: var(--gold-light);

    font-size: 32px;

    display: flex;

    justify-content: center;

    align-items: center;

}


.why-card h3 {

    font-family: "Playfair Display", serif;

    font-size: 15px;

    font-weight: 500;

    margin-bottom: 6px;

}


.why-card p {

    font-size: 10px;

    line-height: 1.6;

    color: #e7e7e7;

}

/* ==========================================================
   RESPONSIVE - WHY US
========================================================== */

@media (max-width: 700px) {

    /* ======================================================
       CONTENEDOR
    ====================================================== */

    .why-us .content-container {

        width: 100%;

        max-width: none;

        margin: 0;

    }


    .why-us {

        width: 100%;

        padding: 30px 0 35px;

    }


    /* ======================================================
       TÍTULO
    ====================================================== */

    .why-us .section-heading {

        padding: 0 20px;

    }


    /* ======================================================
       GRID
    ====================================================== */

    .why-grid {

        width: 100%;

        max-width: none;

        margin: 0;

        display: grid;

        grid-template-columns: repeat(2, minmax(0, 1fr));

        gap: 0;

    }


    /* ======================================================
       TARJETAS
    ====================================================== */

    .why-card {

        min-width: 0;

        padding: 25px 15px 28px;

        text-align: center;

        border-right: 1px solid rgba(255, 255, 255, 0.18);

        border-bottom: 1px solid rgba(255, 255, 255, 0.18);

    }


    /* Quitar borde derecho de la segunda
       columna */

    .why-card:nth-child(2n) {

        border-right: none;

    }


    /* Quitar borde inferior de las dos
       últimas tarjetas */

    .why-card:nth-child(3),
    .why-card:nth-child(4) {

        border-bottom: none;

    }


    /* ======================================================
       ICONOS
    ====================================================== */

    .why-icon {

        height: 50px;

    }


    .why-icon img {

        width: 42px;

        height: 42px;

        object-fit: contain;

        margin: 0 auto;

    }


    /* ======================================================
       TÍTULOS
    ====================================================== */

    .why-card h3 {

        font-size: 14px;

        line-height: 1.35;

        margin: 8px 0 7px;

    }


    /* ======================================================
       TEXTO
    ====================================================== */

    .why-card p {

        font-size: 10px;

        line-height: 1.6;

        max-width: 180px;

        margin: 0 auto;

    }

}