.smc-carousel {
	width: 100%;
	box-sizing: border-box;
}

.smc-carousel *,
.smc-carousel *::before,
.smc-carousel *::after {
	box-sizing: border-box;
}

.smc-main-wrap {
	width: 100%;
	overflow: hidden;
	background: #f4f4f4;
}

.smc-main-image {
	display: block;
	width: 100%;
	height: var(--smc-height, 580px);
	object-fit: var(--smc-fit, cover);
	transition: opacity 180ms ease;
}

.smc-main-image.is-changing {
	opacity: 0.35;
}

.smc-thumbnails {
	display: flex;
	flex-wrap: wrap;
	gap: var(--smc-gap, 20px);
	margin-top: 20px;
	padding: 16px 0;
	border: 0;
	background: #fff;
}

.smc-thumbnail-button {
	display: block;
	flex: 0 0 var(--smc-thumb-width, 110px);
	width: var(--smc-thumb-width, 110px);
	height: var(--smc-thumb-height, 110px);
	padding: 0;
	border: 3px solid transparent;
	background: transparent;
	cursor: pointer;
	overflow: hidden;
	transition: border-color 160ms ease, transform 160ms ease;
}

.smc-thumbnail-button:hover,
.smc-thumbnail-button.is-active {
	border-color: transparent;
	transform: translateY(-2px);
	opacity: 0.88;
}

.smc-thumbnail-button:focus,
.smc-thumbnail-button:focus-visible {
	border-color: transparent;
	outline: none;
	box-shadow: none;
}

.smc-thumbnail-button img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.smc-notice {
	padding: 12px;
	border-left: 4px solid #d63638;
	background: #fff;
}

@media (max-width: 767px) {
	.smc-main-image {
		height: min(var(--smc-height, 580px), 420px);
	}

	.smc-thumbnails {
		display: grid;
		grid-template-columns: repeat(var(--smc-mobile-columns, 4), minmax(0, 1fr));
		gap: 10px;
		padding: 10px 0;
	}

	.smc-thumbnail-button {
		width: 100%;
		height: auto;
		aspect-ratio: 1 / 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.smc-main-image,
	.smc-thumbnail-button {
		transition: none;
	}
}