.horizontal-gallery {
	--max-image-width: 600px;
	.horizontal-gallery__top-bar {
		display: flex;
		gap: 16px;
		width: 100%;
		margin-bottom: 16px;

		h2 {
			font-size: 32px;
			line-height: 48px;
			font-family: var(--font-headings);
			text-align: center;
			color: var(--color-brand-text-accent);
			flex-grow: 1;
			margin-top: 0;
			margin-bottom: 0;
			@container (max-width: 600px) {
				font-size: 28px;
				line-height: 34px;
			}
		}

		.horizontal-gallery__buttons,
		&::before {
			display: flex;
			width: 200px;
			content: " ";
			align-items: center;
			flex-shrink: 0;
			justify-content: center;

			@container (max-width: 600px) {
				display: none !important;
			}
		}

		@container (max-width: 600px) {
			&::before {
				/* repeated from above, as the above selector somehow does
                not apply to the :before pseudo-element */
				display: none !important;
			}
		}

		button {
			border: none;
			background: none;
			cursor: pointer;
			font-size: 40px;
			color: var(--color-brand-text-accent2);
		}
	}

	.horizontal-scroller__element-container {
		scrollbar-width: none;
		&::-webkit-scrollbar {
			width: 0px;
			height: 0;
			background: transparent; /* make scrollbar transparent */
		}
	}

	.horizontal-scroller__element {
		max-width: 100cqw;
		align-items: center;

		&,
		picture,
		img {
			border-radius: 10px;
			max-height: min(75vh, 700px);
			width: auto !important;
			max-width: 100cqw;
		}

		picture {
			height: auto;
			width: 100% !important;
			background-image: none !important;
		}
	}
}