.sonni-text-marquee-2026 {
	padding-top: 19px;
	padding-bottom: 19px;
	color: var(--sonni-blue);
	background: var(--sonni-lightblue);

	@media screen and (min-width: 768px) {
		padding-top: 16px;
		padding-bottom: 20px;
	}

	&.alternative-style {
		background: var(--sonni-blue);
		color: var(--sonni-white);
	}

	&.logo-slider {
		padding-top: 0;
		padding-bottom: 0;

		.text__scroller {
			.text__grid {
				grid-gap: 48px;

				@media screen and (min-width: 768px) {
					grid-gap: 80px;
				}

				@media screen and (min-width: 1600px) {
					grid-gap: 120px;	
				}
			}
		}
	}

	.text__grid {

		.text {
			margin: 0;
			position: relative;
			font-family: 'IvyJournal';
			font-size: 22px;

			&:after {
				content: '\2219';
				position: absolute;
				right: -16px;
				top: 50%;
				transform: translateY(-50%);

				@media screen and (min-width: 768px) {
					right: -24px;
				}

				@media screen and (min-width: 1600px) {
					right: -34px;
				}
			}
		}
	}

	.text__scroller {
		white-space: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;

	    &::-webkit-scrollbar { 
	        display: none;
	    }

		.text__grid {
			display: flex;
			align-items: center;
			justify-content: space-between;
			grid-gap: 24px;

			@media screen and (min-width: 768px) {
				grid-gap: 40px;
			}

			@media screen and (min-width: 1600px) {
				grid-gap: 60px;	
			}
		}
	}

	/* Taken from https://codepen.io/hexagoncircle/pen/wvmjomb */

	.marquee {
		display: flex;
		overflow: hidden;
		user-select: none;
		gap: 24px;

		@media screen and (min-width: 768px) {
			gap: 40px;
		}

		@media screen and (min-width: 1600px) {
			gap: 60px;	
		}
	}

	.marquee__group {
		flex-shrink: 0;
		display: flex;
		align-items: center;
		justify-content: space-around;
		min-width: 100%;
		animation: scroll-x 50s linear infinite;
	}

	@keyframes scroll-x {
		from {
		transform: translateX(0);
		}
		to {
		transform: translateX(-100%);
		}
	}

}