/* MM Tiles — reason tiles (rail or grid). */
.mm-tiles { padding: var(--mm-sec) 0 60px; }
.mm-tiles.mm-tiles--grid { padding-bottom: var(--mm-sec); }
.mm-tiles .tile { width: 320px; min-height: 300px; padding: 30px; border-radius: var(--mm-r-lg); background: var(--mm-mist); display: flex; flex-direction: column; }
.mm-tiles.tone-mist .tile { background: var(--mm-white); }
.mm-tiles.tone-black .tile { background: #1d1d1f; }
.mm-tiles .tile__ico { width: 40px; height: 40px; flex: none; fill: none; stroke: var(--mm-navy); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.mm-tiles.tone-black .tile__ico { stroke: var(--mm-link-dark); }
.mm-tiles .tile h3 { margin-top: 64px; font-size: 24px; line-height: 1.17; font-weight: 650; letter-spacing: -0.022em; }
.mm-tiles .tile p { margin-top: 10px; font-size: 16px; color: var(--mm-grey); }
.mm-tiles.tone-black .tile p { color: #a1a1a6; }

.mm-tiles .tiles__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.mm-tiles .tiles__grid .tile { width: auto; min-height: 260px; }
.mm-tiles .tiles__grid .tile h3 { margin-top: 44px; }

@media (max-width: 1068px) {
	.mm-tiles .tiles__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 833px) {
	.mm-tiles { padding: var(--mm-sec) 0 40px; }
	.mm-tiles .tile { width: 78vw; max-width: 320px; min-height: 260px; padding: 26px; }
	.mm-tiles .tile h3 { font-size: 21px; margin-top: 30px; }
	.mm-tiles .tiles__grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
	.mm-tiles .tiles__grid .tile { width: auto; max-width: none; min-height: 0; }
	.mm-tiles .tiles__grid .tile h3 { margin-top: 24px; }
}