@media (min-width: 769px) {
	#modal .details {
		display: flex !important;
		flex-direction: column !important;
		justify-content: flex-start !important;
		gap: 12px !important;
		align-self: start !important;
		margin-top: 0 !important;
		height: var(--lasak-modal-media-height, auto) !important;
		max-height: var(--lasak-modal-media-height, none) !important;
		overflow: hidden !important;
	}

	#modal .details > * {
		flex: 0 0 auto;
	}

	#modal .measure-guide-container {
		margin-top: auto !important;
	}

	#modal .slider {
		display: grid !important;
		grid-template-columns: 74px minmax(0, 1fr) !important;
		column-gap: 14px !important;
		align-items: start !important;
	}

	#modal .slides {
		grid-column: 2 !important;
		align-self: start !important;
	}

	#modal .slider-thumbs {
		display: flex !important;
		flex-direction: column !important;
		gap: 10px !important;
		grid-column: 1 !important;
		grid-row: 1 !important;
		align-self: start !important;
		justify-self: center !important;
		max-height: 100% !important;
		overflow-y: auto !important;
		overflow-x: hidden !important;
		padding: 6px 0 !important;
		width: 74px !important;
	}

	#modal .slider-thumbs .thumb {
		display: block !important;
		width: 74px !important;
		height: 96px !important;
		border-radius: 14px !important;
		opacity: 0.82;
	}

	#modal .slider-thumbs .thumb.active {
		border-color: #7c69ef !important;
		opacity: 1 !important;
	}

	#modal .slider-counter,
	#modal .slider-dots {
		grid-column: 2 !important;
	}

	#modal .slider-btn.prev {
		left: 98px !important;
	}

	#modal .slider-btn.next {
		right: 10px !important;
	}
}

@media (min-width: 769px) and (max-width: 1024px), (min-width: 769px) and (max-width: 1180px) and (hover: none), (min-width: 769px) and (max-width: 1180px) and (pointer: coarse) {
	#modal .details {
		height: auto !important;
		max-height: none !important;
		overflow: visible !important;
		transform: none !important;
		padding-top: 0 !important;
	}

	#modal .measure-guide-container {
		margin-top: 0 !important;
	}

	#modal .slider {
		grid-template-columns: minmax(0, 1fr) !important;
		column-gap: 0 !important;
		align-items: start !important;
		height: auto !important;
	}

	#modal .slides {
		grid-column: 1 !important;
		align-self: start !important;
	}

	#modal .slider-thumbs {
		display: none !important;
	}

	#modal .slider-counter,
	#modal .slider-dots {
		grid-column: 1 !important;
	}

	#modal .slider-btn.prev {
		left: 12px !important;
	}

	#modal .slider-btn.next {
		right: 12px !important;
	}
}