/*
 * Sección "Cuatro categorías" del Home.
 *
 *   Contenedor sección          → categories
 *     Título                    → categories__title
 *     Contenedor grilla         → categories__grid
 *       Tarjetas                → category-card (ver category-card.css)
 *     Botón                     → btn btn--ink categories__button
 *
 * 1 columna en celular angosto, 2 en mobile y tablet, 4 en desktop.
 */

.categories {
	--row-gap: 0px;

	display: block;
	width: 100%;
	padding: clamp(56px, 6vw, 88px) var(--wrap-gutter);
}

.categories__title { padding-bottom: clamp(24px, 3vw, 40px); }
.categories__title .elementor-heading-title {
	max-width: 14em;
	font-family: var(--font-display);
	font-weight: 800;
	font-size: clamp(30px, 3.8vw, 54px);
	letter-spacing: -.04em;
	line-height: 1.02;
	color: var(--color-ink);
}

.categories__grid {
	--row-gap: 16px;
	--column-gap: 16px;

	display: grid;
	grid-template-columns: minmax(0, 1fr);
}

.categories__button { margin-top: clamp(28px, 3vw, 40px); }

@media (min-width: 521px) {
	.categories__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1025px) {
	.categories__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}