Scroll Toggle SCSS

_display.scss

.tile-display {
	--transition-time: 1s;
	--transition-easing: ease-in-out;
	text-align: left;
	background-color: swatch(fill);
	border-radius: var(--tile-radius);
	margin-bottom: 150px;

	.tile-content-wrapper {
		--column-gap: 50px;
		--row-gap: 80px;
		--max-width: 925px;
		--padding-top: 125px;
		padding: var(--padding-top) 30px;
		max-width: var(--max-width);
		width: auto;
		margin-left: auto;
		margin-right: auto;
		display: grid;
		grid-column-gap: var(--column-gap);
		grid-row-gap: var(--row-gap);
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: auto auto;
		align-content: start;
		grid-template-areas:
			"image copy"
			"image control";

		@include viewport(medium) {
			--row-gap: 60px;
			--padding-top: 90px;
		}

		@include viewport(small) {
			--row-gap: 30px;
			--padding-top: 30px;
			padding: var(--padding-top) 30px calc(var(--padding-top)*2);
			grid-template-areas:
			  "copy"
				"image"
				"control";
			grid-template-columns: 1fr;
			grid-template-rows: repeat(3, auto);
			place-items: center;
		}
  }