/**
 * Стили UI-блока: Сетка
 *
 * @package medexpress-by-fin-code
 */

.me-grid-cells__wrapper {
	min-width: 0;
	position: relative;
}

.me-grid-cells {
	display: flex;
	flex-wrap: wrap;
	position: relative;
	border-top: 1px solid var(--gray-border-color);
	border-left: 1px solid var(--gray-border-color);
}

.me-grid__cell {
	box-sizing: border-box;
	border-right: 1px solid var(--gray-border-color);
	border-bottom: 1px solid var(--gray-border-color);
	flex-shrink: 0;
	min-width: 0;
	padding: 24px;
	display: flex;
	flex-flow: column nowrap;
	justify-content: space-between;
	align-items: flex-start;
}

.me-grid__cell .me-grid__title {
	margin-bottom: 90px;
	word-break: break-word;
}

.me-grid__cell>*:first-child {
	margin-top: 0;
}

.me-grid__cell>*:last-child {
	margin-bottom: 0;
}

.me-grid .me-grid__text {
	color: rgba(var(--font-color-rgb), 0.6);
}

.me-grid--scrollable {
	position: relative;
	padding-bottom: calc(52px + 18px);
}

.me-grid--scrollable .me-grid-cells {
	overflow-x: auto;
	flex-wrap: nowrap;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.me-grid--scrollable .me-grid-cells__wrapper::after {
	content: '';
	display: block;
	width: 1px;
	height: 100%;
	background: var(--gray-border-color);
	position: absolute;
	right: 0;
	top: 0;
	opacity: 0;
	transition: none;
}

.me-grid--scrollable:not(.is-scrolling) .me-grid-cells__wrapper::after {
	opacity: 1;
	transition: opacity 0.1s;
}

.me-grid--scrollable .me-grid-cells::-webkit-scrollbar {
	display: none;
}

.me-grid__scroll-controls {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	display: flex;
	justify-content: flex-end;
}

/* mobile */

@media (max-width: 768px) {
	.me-grid:not(.me-grid--scrollable) .me-grid-cells {
		flex-direction: column;
		flex-wrap: nowrap;
	}

	.me-grid__cell {
		width: 100% !important;
		padding: 16px;
	}

	.me-grid__cell .me-grid__title {
		margin-bottom: 32px !important;
	}

	.me-grid__scroll-controls {
		justify-content: center;
	}
}