/* ==========================================================
   TARJETA PRINCIPAL
========================================================== */

.trav-card{

    display:grid;
    grid-template-columns:35px 1fr;
    gap:10px;
    align-items:flex-start;
    padding:18px;
    margin:18px 0;
    border:1px solid #e5e7eb;
    border-radius:12px;
    background:#f8f9fb;
    transition:.25s;

}

/* ==========================================================
   EFECTO HOVER DE LA TARJETA
========================================================== */

.trav-card:hover{

    background:#f2f5f9;

}

/* ==========================================================
   CONTENEDOR DEL ÍCONO
========================================================== */

.trav-card-icon{

    width:30px;
    text-align:center;

}

/* ==========================================================
   TAMAÑO DEL ÍCONO
========================================================== */

.trav-card-icon img{

    width:34px;
    height:auto;
    display:block;
    margin:auto;

}

/* ==========================================================
   TÍTULO DEL COMPONENTE
   (Hotel, Vuelos, Incluye, Tours, etc.)
========================================================== */

.trav-card-content h6{

    margin:0 0 8px;
    font-size:15px;
    font-weight:700;
    color:#143a74;

}

/* ==========================================================
   DESCRIPCIÓN DEL COMPONENTE
========================================================== */

.trav-card-text{

    margin:0;
    color:#555;
    line-height:1.7;
    font-size:13px;

}

/* ==========================================================
   TARJETA "NO INCLUYE"
========================================================== */

.trav-card-danger{

    background:#fff7f7;
    border:1px solid #ffbcbc;

}

/* ==========================================================
   TÍTULO "NO INCLUYE"
========================================================== */

.trav-card-danger h6{

    color:#d22;

}

/* ==========================================================
   TÍTULOS DEL ÍNDICE
   (Shortcode [trav_titles])
========================================================== */

.trav-title-item{

    display:block;
    margin-bottom:10px;
    font-size:15px;
    font-weight:600;
    color:#143a74;

}

/* ==========================================================
   RESPONSIVE
========================================================== */

@media(max-width:768px){

    .trav-card{

        grid-template-columns:35px 1fr;

    }

}