/* WHA Rides — container + grid utilities. Mobile-first. */

.wha-container {
	width: 100%;
	max-width: var(--wha-container);
	margin-inline: auto;
	padding-inline: 1.25rem;
}

@media (min-width: 782px) {
	.wha-container {
		padding-inline: 2rem;
	}
}

.wha-grid {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: 1fr;
}

.wha-grid--2 { grid-template-columns: 1fr; }
.wha-grid--3 { grid-template-columns: 1fr; }
.wha-grid--4 { grid-template-columns: repeat(2, 1fr); }

@media (min-width: 640px) {
	.wha-grid--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 782px) {
	.wha-grid--2 { grid-template-columns: repeat(2, 1fr); }
	.wha-grid--3 { grid-template-columns: repeat(3, 1fr); }
	.wha-grid--4 { grid-template-columns: repeat(4, 1fr); }
}

.wha-flex {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.wha-flex--between {
	justify-content: space-between;
}

.wha-flex--wrap {
	flex-wrap: wrap;
}