/** Datei: storage/cache/wthe_Ony9B891Un8xZwRE/assets/scss/blocks/_spacer.scss **/
.spacer {
	position        : relative;
	margin-top      : $content-padding;
	margin-bottom   : $content-padding;
	
	display         : flex;
	justify-content : space-between;
	align-items     : center;
	gap             : $content-padding;
	
	&__image {
		background-image    : var(--separator);
		background-repeat   : no-repeat;
		background-position : center center;
		background-size     : contain;
		flex                : 0 0 auto;
		aspect-ratio        : 1;
		height              : 75px !important;
		
		@container ( max-width : #{$breakpoint-md} ) {
			height : 50px !important;
		}
	}
	
	&__after,
	&__before {
		display : flex;
		flex    : 1 1 auto;
		
		&::before {
			content    : '';
			position   : relative;
			display    : block;
			background : #FFFFFF;
			height     : 2px;
			width      : 100%;
		}
	}
}

/** Datei: storage/cache/wthe_Ony9B891Un8xZwRE/assets/scss/blocks/_gallery.scss **/
.gallery {
	container-type : inline-size;
	
	&__item {
		border: solid 0.5rem var( --color-main );
		
		&__media {
			> img {
				aspect-ratio: 1;
				object-fit: cover;
				object-position: center;
				display: block;
			}
		}
		
		&__content {
			background: var( --color-main );
			padding: 0.5rem;
			
			* {
				color: get_color( white ) !important;
			}
		}
	}
	
	&__content {
		display         : flex;
		justify-content : center;
		align-items     : center;
		flex-wrap       : wrap;
		gap             : $content-padding;
		
		& > * {
			--gallery-count : var(--gallery-columns, 4);
			--gallery-gap   : (#{$content-padding} / var(--gallery-count) * calc(var(--gallery-count) - 1));
			--gallery-width : calc(100% / var(--gallery-count));
			max-width       : calc(var(--gallery-width) - var(--gallery-gap));
			flex-basis      : 100%;
			flex-grow       : 1;
			flex-shrink     : 1;
			
			@container ( max-width : #{$breakpoint-lg} ) {
				max-width : calc(100% / 3 - #{$content-padding / 3 * 2});
			}
			
			@container ( max-width : #{$breakpoint-md} ) {
				max-width : calc(50% - #{$content-padding / 2});
			}
			
			@container ( max-width : #{$breakpoint-sm} ) {
				max-width : 100%;
			}
		}
	}
	
	&--align {
		&--left > .gallery__content { justify-content : flex-start; }
		&--right > .gallery__content { justify-content : flex-end; }
	}
}

/** Datei: storage/cache/wthe_Ony9B891Un8xZwRE/assets/scss/blocks/_title-text.scss **/
.title-text {
	display        : flex;
	gap            : $content-gap;
	container-type : inline-size;
	
	@include margin-bottom();
	
	& &__title { width : 38%; }
	
	& &__content {
		width : 62%;
		display: flex;
		flex-direction: column;
	}
	
	& &__title,
	& &__content {
		&:only-child {
			text-align : center;
			width      : 100%;
		}
	}
	
	&&--left { flex-direction : row; }
	
	&&--right { flex-direction : row-reverse; }
	
	@container ( max-width : #{$breakpoint-md} ) {
		flex-direction : column !important;
		gap            : $content-margin;
		
		& &__title,
		& &__content {
			width : 100%;
		}
	}
}

/** Datei: storage/cache/wthe_Ony9B891Un8xZwRE/assets/scss/blocks/_columns.scss **/
.column {
	flex            : 1 1 100%;
	display         : flex;
	flex-direction  : column;
	justify-content : flex-start;
	
	&--align {
		&--top { justify-content : flex-start; }
		
		&--bottom { justify-content : flex-end; }
	}
	
	&s {
		display : flex;
		gap     : $content-gap;
		gap     : $content-margin;
//		flex    : 1 1 auto;
		
		+ {
			h1, h2, h3, h4, h5, h6 {
				@include margin-top();
			}
		}
		
		@container ( max-width : #{$breakpoint-md} ) {
			flex-direction : column !important;
			gap            : $content-margin;
		}
		
		&:not( :has( ~ & ) ) {
			@include margin-bottom();
		}
	}
}

/** Datei: storage/cache/wthe_Ony9B891Un8xZwRE/assets/scss/blocks/_image.scss **/
.image {
	display        : block;
	
	&&--type {
		&--inline {
			width          : auto;
			display        : inline;
			height         : 1em;
			vertical-align : sub;
			margin         : 0 0.25em;
		}
	}
}

/** Datei: storage/cache/wthe_Ony9B891Un8xZwRE/assets/scss/blocks/_buttons.scss **/
.button {
	display         : inline-flex;
	text-decoration : none;
	justify-content : center;
	align-items     : center;
	border          : 0;
	
	@include transition();
	
	.icon {
		margin-right : 0.5em;
	}
	
	&&--type {
		&--button {
			@include transition();
			
			padding : #{$content-margin / 2} #{$content-margin};
			
			@container ( max-width : #{$breakpoint-sm} ) {
				width : 100%;
			}
			
			&, &:visited {
				background : var(--color-main, get_color(gray, main));
				color      : get_color(white);
			}
			
			&:focus,
			&:hover {
				background : var(--color-accent, get_color(gray, accent));
				color      : get_color(black);
			}
		}
		
		&--link {
			@include transition();
			
			&, &:visited {
				color : var(--color-text, get_color(gray, accent));
			}
			
			&:focus,
			&:hover {
				text-decoration : underline;
			}
		}
	}
	
	&&--color {
		@each $name, $color in map-get($theme-colors, main) {
			&--#{$name} {
				--color-main   : #{get_color($name, main)} !important;
				--color-accent : #{get_color($name, accent)} !important;
				--color-text   : #{contrast(get_color($name, accent), get_color(black), get_color(white))} !important;;
			}
		}
	}
	
	&s {
		display   : inline-flex;
		gap       : $content-margin;
		flex-wrap : wrap;
		width     : 100%;
		
		@include margin-bottom();
		
		&&--type {
			&--horizontal { flex-direction : row; }
			
			&--vertical { flex-direction : column; }
		}
		
		.flex-basis {
			&-- {
				&25 { flex-basis  : calc(25% - #{$content-margin / 4 * 3});}
				&33 { flex-basis  : calc(100% / 3 - #{$content-margin / 3 * 2});}
				&50 { flex-basis  : calc(50% - #{$content-margin / 2 * 1});}
			}
		}
		
		& > * {
			@extend .button--type--button;
			
			flex-basis  : calc(25% - #{$content-margin / 4 * 3});
			flex-grow   : 1;
			flex-shrink : 1;
			
			white-space : nowrap;
			
			@container ( max-width : #{$breakpoint-md} ) {
				flex-basis : calc(50% - #{$content-margin / 2});
			}
			
			@container ( max-width : #{$breakpoint-sm} ) {
				flex-basis : 100%;
			}
		}
		
		&&--color {
			@each $name, $color in map-get($theme-colors, main) {
				&--#{$name} > .button {
					&, &:visited {
						background : var(--color-main, get_color(gray, main));
						color      : get_color(white);
					}
					
					&:focus,
					&:hover {
						background : var(--color-accent, get_color(gray, accent));
						color      : get_color(black);
					}
				}
			}
		}
	}
}

/** Datei: storage/cache/wthe_Ony9B891Un8xZwRE/assets/scss/blocks/_media-text.scss **/
.media-text {
	display        : flex;
	gap            : $content-gap;
	container-type : inline-size;
	
	@include margin-bottom();
	
	& &__media { width : 38%; }
	
	& &__content {
		width : 62%;
		display: flex;
		flex-direction: column;
	}
	
	& &__media,
	& &__content {
		position: relative;
		
		&:only-child {
			text-align : center;
			width      : 100%;
		}
	}
	
	&&--left { flex-direction : row; }
	
	&&--right { flex-direction : row-reverse; }
	
	@container ( max-width : #{$breakpoint-md} ) {
		flex-direction : column !important;
		gap            : $content-padding;
		
		& &__media,
		& &__content {
			width : 100%;
		}
	}
}

/** Datei: storage/cache/wthe_Ony9B891Un8xZwRE/assets/scss/blocks/_blockquote.scss **/
.blockquote {
	margin       : #{$content-gap} 0 !important;
	padding      : #{$content-padding};
	border-color : #{get_color(white)};
	border-style : solid;
	border-width : 2px 0;
	text-align   : center;
	font-size    : 1.2em;
	font-style   : italic;
}