@layer components {
.carousel {
	& {
		display: grid;
		grid-template-rows: 1fr auto;
		grid-template-areas: "slides" "controls";
	}

	& > .slides {
		display: grid;
		grid-area: slides;
		place-content: start stretch;
		contain: content;

		&:where(:has(:focus-visible)) {
			overflow-clip-margin: 0.325rem;
		}

		& > .slide {
			grid-area: 1 / 1;

			& img {
				border-radius: 1rem;
				/* aspect-ratio: 5 / 3; */
				block-size: 100%;
				max-block-size: 100vb;
				object-fit: contain;
			}

			&:where(.slides.fade .slide) {
				transition-property: opacity, content-visibility, visibility;

				&:not([data-current]) {
					opacity: 0;
				}

				&:is([data-current]) {
					&:has(~ .slide:not([data-current])) {
						transition-timing-function: step-start;
					}

					& ~ .slide:not([data-current]) {
						transition-timing-function: var(--transition-easing), step-end, step-end;
					}
				}

				&:not([data-current]) {
					&:has(~ .slide[data-current]) {
						transition-timing-function: step-end;
					}

					& ~ .slide[data-current] {
						transition-timing-function: var(--transition-easing), step-start, step-start;
					}
				}
			}
		}

		&.animated {
			& > .slide {
				transition-behavior: allow-discrete;
				transition-duration: var(--transition-duration);
				transition-property: content-visibility, visibility, transform, opacity;
				transition-timing-function: var(--transition-easing);

				&:not([data-current]) {
					visibility: hidden;

					/**
                      * Diese Supports-Query überprüft, ob ein Gerät mit Safari
                      * bzw. WebKit geöffnet wird und schließt diese für den
                      * folgenden Style aus, da content-visibility derzeit noch
                      * visuelle Artefakte bei einer Überblendung aufweist.
                      */
					@supports not (-webkit-appearance: -apple-pay-button) {
						content-visibility: hidden;
					}
				}

				&:is([data-current]) {
					&:has(~ .slide:not([data-current])) {
						transition-timing-function: step-start, step-start,
							var(--transition-duration);
					}

					& ~ .slide:not([data-current]) {
						transition-timing-function: step-end, step-end, var(--transition-duration);
					}
				}

				&:not([data-current]) {
					&:has(~ .slide[data-current]) {
						transition-timing-function: step-end, step-end, var(--transition-duration);
					}

					& ~ .slide[data-current] {
						transition-timing-function: step-start, step-start,
							var(--transition-duration);
					}
				}
			}

			&.fade {
				& > .slide {
					&:not([data-current]) {
						opacity: 0;
					}

					&:is([data-current]) {
						&:has(~ .slide:not([data-current])):first-child {
							transition-timing-function: step-start;
						}
					}

					&:not([data-current]) {
						&:has(~ .slide[data-current]) {
							transition-timing-function: step-end;
						}
					}
				}
			}

			&.translate {
				& > .slide {
					transition-duration: calc(var(--transition-duration) * 2.5);

					&:is([data-current]) {
						& ~ .slide:not([data-current]) {
							transform: translateX(100%);
						}

						&:first-child {
							& ~ .slide:not([data-current]):last-child {
								transform: translateX(-100%);
							}
						}
					}

					&:not([data-current]) {
						&:has(~ .slide[data-current]) {
							transform: translateX(-100%);
						}

						&:first-child {
							&:has(~ .slide[data-current]:last-child) {
								transform: translateX(100%);
							}
						}
					}
				}
			}
		}
	}

	& > .controls {
		display: flex;
		grid-area: controls;
		flex-flow: row nowrap;
		align-items: center;
		place-self: center;
		gap: calc(var(--gutter) / 4);
		inline-size: 100%;
		overflow-x: auto;

		& :is([aria-disabled="true"]) {
			opacity: initial;
			filter: none;
			cursor: wait;
		}

		& > .pause {
			margin-inline-end: auto;

			&:not(.carousel[data-autoplay] button) {
				display: none;
			}

			&:where([data-paused="true"]) [data-paused="false"],
			&:where([data-paused="false"]) [data-paused="true"] {
				display: none;
			}
		}

		& > .previous {
			grid-area: previous;

			&:not(.carousel[data-autoplay] button) {
				margin-inline-start: auto;
			}
		}

		& .buttons {
			inline-size: 100%;
			overflow-x: auto;
		}

		& .buttons-content {
			display: flex;
			flex-flow: row nowrap;
			justify-content: center;
			align-items: center;
			gap: calc(var(--gutter) / 4);
			margin-block-end: 0;
			padding: calc(var(--gutter) / 4);
			inline-size: fit-content;

			& .buttons-content > * {
				inline-size: calc(var(--gutter) * 3);
			}
		}

		& > .next {
			margin-inline-end: auto;
		}

		& > button {
			block-size: fit-content;
		}
	}
}

.carousel {
	margin-block-end: calc(var(--gutter) * 1.625);

	& .controls {
		& .button {
			display: block;
			box-shadow:
				0 calc(var(--gutter) / 4) calc(var(--gutter) / 4) calc(var(--gutter) / -4)
					color-mix(in oklch, transparent, var(--color-primary) 17.5%),
				0 calc(var(--gutter) * 3 / 4) calc(var(--gutter) / 2) calc(var(--gutter) * -4)
					color-mix(in oklch, transparent, var(--color-primary) 22.5%);
			border: var(--border-line) color-mix(in oklch, transparent, var(--color-primary) 8.75%);
			border-radius: 1rem;
			background-color: var(--color-accent);
			padding: 0.675em;
			inline-size: 3em;
			max-inline-size: fit-content;
			block-size: 3em;
			color: var(--button-link-color);

			& svg {
				font-size: 1.2em;
				stroke: currentColor;
				stroke-width: 0.0125em;
			}
		}

		& .buttons {
			gap: calc(var(--gutter) / 6);

			& > * {
				display: flex;
				inline-size: fit-content;
			}
		}

		& .slide {
			transition:
				transform var(--transition),
				opacity var(--transition);
			inline-size: calc(var(--gutter) * 2.5);

			&:not([aria-selected="true"], :hover, :focus-visible) {
				opacity: 0.5;
			}
		}
	}

	& .slides {


		& .slide {
			& img {
				border-radius: 0 !important;
				/* min-block-size: calc(var(--content-height) / 2); */
				max-block-size: calc(var(--content-height) * 5 / 6);
			}
		}
	}

	&-caption {
		position: absolute;
		opacity: 1;
		margin-inline: auto;
		margin-block: 0;
		inset-block-end: calc(1em + 1%);
		inset-inline: 0;
		border: var(--border-line) color-mix(in oklch, transparent, var(--color-primary) 17.5%);
		border-radius: 1rem;
		background-color: var(--color-white);
		padding-inline: calc(var(--gutter) * 2 / 3);
		padding-block: calc(var(--gutter) * 2 / 3 - 0.125em);
		inline-size: fit-content;
		max-inline-size: min(74ch, 100% - (1em + 1%) * 2);
		color: var(--color-primary);
	}
}

.carousel .button {
	display: none;
}

@media (min-width: 744px) {
	.carousel .button {
		display: block;
	}


}

@media (min-width: 960px){
	.carousel .slides{
		border-radius: 1em;
	}
}

.gslide-description {
	margin-block-start: var(--gutter);
	background-color: var(--color-white);
	color: var(--color-black);
}

}