@use "../../../../../static/sass/frontend/common-frontend/functions";

.ct-product-hero {

	.flexy-container {
		overflow: hidden;
	}

	.flexy-pills {
		@include functions.media-breakpoint-down (md) {
			--thumbs-spacing: 10px;
		}

		@include functions.media-breakpoint-up (lg) {
			max-width: 70%;
			margin: -8% auto 0 auto;

			--thumbs-spacing: 20px;
		}

		ol {
			margin: 0 calc(var(--thumbs-spacing) * -1);
		}

		li {
			padding-top: var(--thumbs-spacing);
			padding-inline: var(--thumbs-spacing);

			img {
				width: 100%;
				border-radius: 2px;
				border: 3px solid #fff;
			}
		}
	}
}