@layer components {
	.quick { background: var(--gray-section-2); padding-block: var(--section-gap); }
	.quick__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); }
	.quick-card { background: var(--red-deep); color: #fff; }
	.quick-card__link {
		display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
		height: 112px;
		padding: var(--sp-4);
		color: #fff;
		transition: background-color var(--dur) var(--ease);
	}
	.quick-card__link:hover { background: var(--red); }
	.quick-card__icon { width: 44px; height: 44px; stroke-width: 1.75; }
	.quick-card__label {
		font-size: var(--fs-label);
		font-weight: var(--fw-bold);
		letter-spacing: var(--ls-ui);
		text-transform: uppercase;
		text-align: center;
		line-height: 1.1;
	}
	@media (min-width: 768px) { .quick__grid { grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); } }
	@media (min-width: 1024px) { .quick__grid { grid-template-columns: repeat(6, 1fr); gap: var(--sp-5); } }
	@media (min-width: 1280px) { .quick__grid { gap: 30px; } }
}