/* Grid con cuatro columnas base */

/* Grid de cards para pantallas > 1200px */
.grid-four-columns {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    padding-top: 14px;
}

/* Grid de cards para pantallas <= 1200px */
@media (max-width: 1200px) {
    .grid-four-columns {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Grid de cards para pantallas <= 860px */
@media (max-width: 860px) {
    .grid-four-columns {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
}

/* Grid de cards para pantallas <= 540px */
@media (max-width: 540px) {
    .grid-four-columns {
        grid-template-columns: 1fr;
    }
}

/* Grid con tres columnas base */

/* Grid de cards para pantallas > 1200px */
.grid-tree-columns {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    padding-top: 14px;
}

/* Grid de cards para pantallas <= 1200px */
@media (max-width: 1200px) {
    .grid-tree-columns {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Grid de cards para pantallas <= 860px */
@media (max-width: 860px) {
    .grid-tree-columns {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Grid de cards para pantallas <= 540px */
@media (max-width: 540px) {
    .grid-tree-columns {
        grid-template-columns: 1fr;
    }
}

/* Grid con dos columnas base */

/* Grid de cards para pantallas > 1200px */
.grid-two-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    padding-top: 14px;
}

/* Grid de cards para pantallas <= 1200px */
@media (max-width: 1200px) {
    .grid-two-columns {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
}

/* Grid de cards para pantallas <= 860px */
@media (max-width: 860px) {
    .grid-two-columns {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
}

/* Grid de cards para pantallas <= 540px */
@media (max-width: 540px) {
    .grid-two-columns {
        grid-template-columns: 1fr;
    }
}

/* Grid con una columna base */

/* Grid de cards para pantallas > 1200px */
.grid-one-columns {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 18px;
    padding-top: 14px;
}

/* Grid de cards para pantallas <= 1200px */
@media (max-width: 1200px) {
    .grid-one-columns {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
}

/* Grid de cards para pantallas <= 860px */
@media (max-width: 860px) {
    .grid-one-columns {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
}

/* Grid de cards para pantallas <= 540px */
@media (max-width: 540px) {
    .grid-one-columns {
        grid-template-columns: 1fr;
    }
}