.supt-section-devices {
	@mixin clamp padding-block, $spacing-16, $spacing-32, $breakpoint-xs, $breakpoint-xl;
	background: $color-grey-background;

	&__title {
		@extend %t-h2;
		text-align: center;
		margin-bottom: 0;
	}

	/* Navigation container */
	&__navigation {
		@mixin clamp gap, $spacing-5, $spacing-10, $breakpoint-xs, $breakpoint-xl;
		@mixin clamp margin-block, $spacing-6, $spacing-12, $breakpoint-xs, $breakpoint-xl;
		display: flex;
		align-items: flex-start;
		position: relative;
	}

	/* Navigation buttons */
	&__prev,
	&__next {
		display: none;
		@media (min-width: $breakpoint-md) {
			display: block;
		}

		&:has(.supt-button__link[disabled]) {
			opacity: 0.5;
			pointer-events: none;
		}
	}

	&__prev {
		@media (min-width: $breakpoint-md) {
			left: auto;
		}

		.supt-icon-chevron {
			rotate: 90deg;
			translate: 0px 1px;
		}
	}

	&__next {
		@media (min-width: $breakpoint-md) {
			right: auto;
		}

		.supt-icon-chevron {
			rotate: -90deg;
			translate: 1px 1px;
		}
	}

	/* Arrow icon sizing */
	&__arrow-icon {
		width: 2.625rem;
		height: 2.625rem;
		color: white;

		@media (min-width: $breakpoint-md) {
			width: 2.875rem;
			height: 2.875rem;
		}

		@media (min-width: 992px) {
			width: 3.125rem;
			height: 3.125rem;
		}
	}

	/* Slider styles */
	&__thumbs {
		margin-inline: calc(-1 * var(--supt-container-padding-inline));
		padding-inline: var(--supt-container-padding-inline);

		@media (min-width: $breakpoint-md) {
			margin-inline: 0;
			padding-inline: 0;
			width: 100%;
		}
	}

	/* Slide styles */
	&__thumb {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-align: center;
		gap: 8px;
		cursor: pointer;
		transition: color 0.2s ease;
		/*
		width: 100px;
		@media (min-width: $breakpoint-md) {
			width: 108px;
		} */

		&:hover {
			.supt-section-devices__thumb__title {
				color: $color-grey-5;
			}
		}

		&.swiper-slide-active {
			.supt-section-devices__thumb__title {
				color: $color-main;
			}
		}

		&__title {
			@extend %t-body-xs;
			font-weight: 500;
			color: $color-grey-4;

			transition: color 0.3s;
		}
	}

	&__devices {
		position: relative;
		height: 100%;
	}

	&__device {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;

		pointer-events: none;

		&:first-child {
			position: static;
		}

		&.-active {
			pointer-events: auto;
		}

		&__content,
		&__image {
			opacity: 0;
		}

		&__image {
			@mixin clamp padding, $spacing-6, $spacing-12, $breakpoint-xs, $breakpoint-xl;
			aspect-ratio: 615 / 518;
			background-color: $color-white;
			border-radius: $border-radius-brand;
			overflow: hidden;
			img {
				display: block;
				width: 100%;
				height: 100%;
				object-fit: contain;
			}
		}

		&__content {
			padding: 0 24px;
			margin-top: 20px;
			@media (min-width: $breakpoint-md) {
				margin-top: 0;
				padding-right: 0;
				padding-left: 34px;
			}
		}

		&__name {
			@extend %t-h4;
			color: $color-main;
		}

		&__features {
			display: flex;
			flex-direction: column;
			gap: 24px;
			margin-top: 24px;
		}

		&__feature {
			display: flex;
			align-items: center;
			gap: 20px;

			@extend %t-body-sm;
			font-weight: 500;
			color: $color-black;

			svg {
				@mixin clamp width, 28, 48, $breakpoint-xs, $breakpoint-xl;
				@mixin clamp height, 28, 48, $breakpoint-xs, $breakpoint-xl;
				flex-shrink: 0;
				margin-bottom: auto;
			}
		}
	}
}