/* Para mostrar las categorias en un grid. (max 4 - estilo grande) */
.grid-four-columns {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
@media (max-width: 1050px) {
  .grid-four-columns {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 730px) {
  .grid-four-columns {
    grid-template-columns: 2fr;
  }
}

/* Para mostrar las categorias en un grid. (max 10 - estilo pequeño) */
.grid-ten-columns {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 0.4rem;
}
@media (max-width: 1050px) {
  .grid-ten-columns {
    grid-template-columns: repeat(8, 1fr);
  }
}
@media (max-width: 730px) {
  .grid-ten-columns {
    grid-template-columns: 5fr;
  }
}

/* Contenedor para cada categoria. */
.indirectus-category {
	width: fit-content;
	max-width: 240px;
	text-align: center;
}

/* Dentro de una categoria, contenedor de un enlace. */
.indirectus-category .indirectus-category-link {
	aspect-ratio: 1 / 1;
  	width: 100%;
  	overflow: hidden;
}

/* Dentro de una categoría, imagen de la categoria. */
.indirectus-category .indirectus-category-link .indirectus-category-image {
	width: 100%;
  	height: 100%;
  	object-fit: cover;
  	object-position: center;
  	display: block;
	border-radius: 1rem;
}

/* Dentro de una categoría, titulo de la categoria. */
.indirectus-category .indirectus-category-title {
	max-width: 100%;
    font-size: 1rem;
    background-color: var(--wp--preset--color--base);
    padding: 4px 8px;
    a {
        color: var(--wp--preset--color--base-2);
    }
}

/* Dentro de una categoría, descripción de la misma. */
.indirectus-category .indirectus-category-description {
	color: lightgray;
    font-size: 0.6rem;
    font-weight: 900;
    text-align: justify;
}

.indirectus-subcategories-section-title {
    width: -webkit-fill-available;
    font-size: 0.8rem;
    font-weight: 600;
    background-color: var(--wp--preset--color--base);
    padding: 4px 8px;
    color: var(--wp--preset--color--base-2);    
}

/* Dentro de una subcategoría, titulo de la subcategoria. */
.indirectus-category .indirectus-subcategory-title {
	max-width: 100%;
    font-size: 0.6rem;
    background-color: var(--wp--preset--color--base);
    padding: 3px 6px;
    a {
        color: var(--wp--preset--color--base-2);
    }
}