/* =========================================================================
 * Feature Grid 003 — Amenities by Group
 *
 * Four columns (the block's grid), each a small title over a list with a gold
 * check and a fading hairline under each row. Two columns on tablets, one on
 * phones.
 * ========================================================================= */

.feature-grid-003 {
	background: var(--color-surface);
}

.feature-grid-003__head {
	margin-bottom: var(--space-lg);
}

.feature-grid-003__head > * {
	margin-block: 0;
}

.feature-grid-003__head h2 {
	margin-top: var(--space-sm);
}

.feature-grid-003 .feature-grid-003__grid {
	gap: var(--space-lg) var(--space-md);
	align-items: start;
}

.feature-grid-003__title.feature-grid-003__title {
	margin: 0 0 var(--space-sm);
	font-size: var(--heading-4);
}

.feature-grid-003__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.feature-grid-003__list li {
	display: flex;
	align-items: baseline;
	gap: var(--space-xs);
	margin: 0;
	padding-block: var(--space-xs);
	background: var(--fade-rule) bottom / 100% 1px no-repeat;
	line-height: 1.5;
}

.feature-grid-003__list li::before {
	content: "";
	flex: none;
	width: 16px;
	height: 16px;
	transform: translateY(2px);
	background-color: var(--color-accent);
	-webkit-mask: url("../../assets/masks/check.svg") center / contain no-repeat;
	mask: url("../../assets/masks/check.svg") center / contain no-repeat;
}

@media (max-width: 64rem) {
	.feature-grid-003 .feature-grid-003__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 40rem) {
	.feature-grid-003 .feature-grid-003__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}