/* ========================================
   TARJETAS - BASE UNIVERSAL
======================================== */


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

.cards-container {

    width: 100%;

    display: grid;

}


/* ========================================
   TARJETA BASE
======================================== */

.card {

    position: relative;

    width: 100%;

    min-width: 0;

    overflow: hidden;

    background: #F4F4F2;

    border-radius: 0;

}


/* ========================================
   TARJETA INTERACTIVA
======================================== */

.card.is-interactive {

    cursor: pointer;

}


/* ========================================
   IMAGEN
======================================== */

.card-image {

    position: relative;

    width: 100%;

    overflow: hidden;

}


.card-image img {

    display: block;

    width: 100%;

    height: auto;

}


/* ========================================
   CONTENIDO
======================================== */

.card-content {

    position: relative;

    width: 100%;

}


/* ========================================
   ICONO
======================================== */

.card-icon {

    display: flex;

}


/* ========================================
   CABECERA
======================================== */

.card-header {

    width: 100%;

}


/* ========================================
   TAG
======================================== */

.card-tag {

    display: inline-block;

}


/* ========================================
   NÚMERO
======================================== */

.card-number {

    display: inline-block;

}


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

.card-title {

    margin: 0;

}


/* ========================================
   SUBTÍTULO
======================================== */

.card-subtitle {

    margin: 0;

}


/* ========================================
   DESCRIPCIÓN
======================================== */

.card-description {

    margin: 0;

}


/* ========================================
   META
======================================== */

.card-meta {

    width: 100%;

}


.card-meta-item {

    display: flex;

}


/* ========================================
   LISTA
======================================== */

.card-items {

    margin: 0;

    padding: 0;

    list-style: none;

}


.card-items li {

    display: flex;

}


/* ========================================
   ACCIÓN
======================================== */

.card-action {

    cursor: pointer;

}