static-scroll {
	position: relative;
	text-align: center;
	height: 300vh;

	>div {
		display: grid;
		position: sticky;
		top: calc(50% - 275px);
		align-items: center;
		height: 550px;
		--percentage: 75%;

		&:before {
			content: '';
			position: absolute;
			height: 100%;
			left: calc(100% + ((100vw - clamp(250px, 80vw, 1100px)) / 2) - 50px);
			transform: translateX(-100%);
			width: 1rem;
			border-radius: 5rem;
			background: linear-gradient(to bottom, transparent 0%, transparent calc(var(--percentage) - 10%), grey var(--percentage), transparent calc(var(--percentage) + 10%));
		}

		>static-scroll-item {
			display: grid;
			grid-template-rows: auto 1fr;
			grid-template-columns: 1fr 1fr;
			opacity: 0;
			transition: opacity .3s ease;
			grid-column: 1;
			grid-row: 1;
			column-gap: 5rem;
			row-gap: 1rem;
			align-items: center;
            list-style: none;

			>h2 {
				grid-column: 1 / -1;
				margin: 0;
				font-size: 2.4375rem;
				font-weight: 300;
				letter-spacing: 1.75rem;
				line-height: 1;
			}

			>div {
				font-size: 25rem;
				line-height: 1;
				font-weight: 900;
				color: var(--red);
				grid-column: 1;
				text-align: right;
			}

			>ul {
				display: block;
				margin: 0;
				padding: 0;
				list-style: none;
				text-align: start;
				grid-column: 2;

				li {
					font-size: 2.9rem;
					color: var(--grey);
                    line-height: 1.2;

					>img {
						border-radius: unset;
						object-fit: contain;
						height: 100%;
					}
				}
			}

			&[selected] {
				opacity: 1;
			}

			@media (max-width: 800px) {
				grid-template-columns: 1fr 2fr;
				column-gap: 1rem;

				>div {
					font-size: 12.5rem;
				}
			}
		}
	}
}