sticky-feature {
	--color-button-outline: rgba(var(--color-foreground), 1);

	@media (width >= 750px) {
		display: flex;
		min-height: 100vh;
		position: relative;
	}

	&.t-dark {
		--color-button-outline: #fff;
		color: #fff;
	}

	.sticky-feature__pagination-wrapper {
		position: absolute;
		top: 0;
		right: 53px;
		height: 100%;
	}

	.sticky-feature__pagination {
		display: flex;
		flex-direction: column;
		gap: 21px;
		margin: 50vh 0;
		position: sticky;
		top: 50%;
		transform: translateY(-50%);

		@media (width < 750px) {
			display: none;
		}
	}

	.sticky-feature__pagination-bullet {
		display: block;
		width: 6px;
		height: 6px;
		border-radius: 50%;
		background-color: #111;
		transition: background-color 0.3s;

		&.active {
			background-color: #8F8F8F;
		}
	}
	&.t-dark .sticky-feature__pagination-bullet {
		background-color: #fff;

		&.active {
			background-color: #8F8F8F;
		}
	}

	.sticky-feature__images {
		position: sticky;
		top: 0;
		height: 100vh;
		width: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #f0f0f0;
		overflow: hidden;

		@media (width < 750px) {
			display: none;
		}
	}

	.sticky-feature__image {
		width: 100%;
		height: 100%;
		object-fit: cover;
		opacity: 0;
		transition: opacity 0.4s ease-in-out;
		position: absolute;
		top: 0;
		left: 0;

		&.active {
			opacity: 1;
		}
	}

	.sticky-feature__content-wrapper {
		@media (width < 750px) {
			display: flex;
			flex-direction: column;
		}
		@media (width >= 750px) {
			width: 50%;
		}
	}

	.sticky-feature__mobile-image {
		width: 100%;
		height: auto;
		aspect-ratio: 1;
		object-fit: cover;

		@media (width >= 750px) {
			display: none;
		}
	}

	.sticky-feature__content {
		display: flex;
		justify-content: center;
		flex-direction: column;
		background-color: #efefef;
		line-height: normal;
		transition: background-color 0.4s ease-in-out, color 0.4s ease-in-out;

		@media (width < 750px) {
			padding: 25px;
		}
		@media (width >= 750px) {
			min-height: 100vh;
			padding: 90px;
		}
	}
	&.t-dark .sticky-feature__content {
		background-color: #111;
	}

	.sticky-feature__subheading {
		font-size: 10px;
		font-weight: 500;
		letter-spacing: 0.1em;
		line-height: normal;
		color: #666666;
		margin-bottom: 10px;
		text-transform: uppercase;
	}

	.sticky-feature__heading {
		font-family: "NordBold";
		font-size: 35px;
		font-weight: 700;
		color: inherit;
		margin-bottom: 20px;
		letter-spacing: -0.03em;
	}

	.sticky-feature__text,
	.sticky-feature__features {
		max-width: 600px;
	}

	.sticky-feature__text {
		color: inherit;
		font-size: 14px;
	}

	.sticky-feature__features {
		margin: 50px 0 0;
		padding: 0;
		font-size: 12px;
		letter-spacing: 0.1em;
		text-transform: uppercase;
		border-collapse: collapse;

		tr {
			border-bottom: 1px solid #e3e3e3;
			transition: border-color 0.4s ease-in-out;
		}

		th,td {
			padding: 12px 0;
			text-align: left;
		}

		th {
			font-weight: normal;
			padding-right: 50px;
		}

		th + td {
			font-weight: 600;
		}
	}
	&.t-dark .sticky-feature__features tr {
		border-color: #333;
	}

	.sticky-feature__measurements {
		@media (width < 750px) {
			margin-top: 25px;
		}
		@media (width >= 750px) {
			margin-top: 50px;
		}
	}
}