.locations-block {
	padding-block: var(--space-40);
}

.locations-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-md);
}

.location-card {
	background: var(--color-surface);
    border: 1px solid var(--color-ink);
    border-radius: 8px;
    padding: var(--space-md)
}

.location-card-media {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 8px;
    height: 350px;
}

.location-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    max-width: 338px;
    max-height: 400px;
    scale: 1.1;
}

.location-card-badge {
	position: absolute;
	top: 12px;
	right: 12px;
	padding: 6px 12px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.9);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.location-card-line {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	margin: 8px 0 0;
}

.locations-footer {
	margin-top: var(--space-lg);
	text-align: center;
}

.locations-carousel .carousel-dots {
	display: none;
}

@media (max-width: 900px) {
	.locations-grid {
		display: flex;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		gap: var(--space-md);
	}

	.locations-grid::-webkit-scrollbar {
		display: none;
	}

	.locations-grid .location-card {
		flex: 0 0 100%;
		scroll-snap-align: start;
	}

	.locations-carousel .carousel-dots {
		display: flex;
	}

	.location-card,
	.location-card-media {
		border-radius: 16px;
	}
}