@import "reset.css";


/* @group FONTS */

@font-face {
  font-family: 'Bitter';
  src: url('../fonts/Bitter-VariableFont_wght.woff2') format('woff2 supports variations'),
       url('../fonts/Bitter-VariableFont_wght.woff2') format('woff2-variations');
  font-weight: 100 900;
	font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Bitter';
  src: url('../fonts/Bitter-Italic-VariableFont_wght.woff2') format('woff2 supports variations'),
       url('../fonts/Bitter-Italic-VariableFont_wght.woff2') format('woff2-variations');
  font-weight: 100 900;
	font-style: italic;
  font-display: swap;
}

/* @end */

/* @group ROOT */

:root {
	
	--body-min-width: 320px;
	
	--color-blue: 					#092b42;
	--color-blue-light: 		#3d95bd;
	--color-green: 				#607000;
	--color-green-light:		#8d9107;
	--color-red: 					#d10000;
	--color-red-dark:			#800000;
	--color-turquoise: 		#80d8d9;
	--color-pink: 					#ffa3c2;
	--color-orange: 				#ed5317;
	--color-white: 				#fff;

	--color-base: 					var(--color-blue);
	--color-background: 		var(--color-white);
	
	--font-family: 'Bitter', Times, serif;
	
	--font-xs: 	400 14px/1.5em var(--font-family);
	--font-sm: 	400 16px/1.5em var(--font-family);
	--font: 		400 clamp(18px, 2.4vw, 24px)/1.5em var(--font-family);
	--font-md:	400 clamp(24px, 3vw, 30px)/1.3em var(--font-family);
	--font-lg:		400 clamp(32px, 4vw, 40px)/1.2em var(--font-family);
	
	--spacing-inline:	clamp(1rem, 4vw, 2rem);
	--spacing-block: 	clamp(1.5rem, 5vw, 2rem);
	
	--max-width: 38rem;
}

/* @end */

/* @group BASE */

html,
body {
	min-width: var(--body-min-width);
	color: var(--color-base);
	font: var(--font);
}

body {
	overflow-x: hidden;
	background-color: var(--color-blue);
}

strong {
	font-weight: 600;
}

em {
	font-style: italic;
}

mark {
	color: var(--color-blue-light);
}

small {
	font: var(--font-xs);
}

img {
	height: auto;
}

h1 {
	font: var(--font-lg);
	font-weight: 600;
}

h1:has(+ *) {
	padding-bottom: .5em;
}

h1:has(+ .period) {
	padding-bottom: .1em;
}

h1:has(+ h2):not(:last-child) {
	padding-bottom: unset;
}

h2 {
	font: var(--font-md);
	font-weight: 600;
}

h2:not(:first-child) {
	margin-top: 1.5em;
}

h1 + h2:not(:first-child) {
	margin-top: .25em;
}

h2:not(:last-child) {
	margin-bottom: .5em;
}

h3 {
	font-weight: 600;
}

h3:not(:first-child) {
	margin-top: 1.5em;
}

h3:not(:last-child) {
	margin-bottom: 1em;
}

h4 {
	font-weight: 550;
}

h4:not(:first-child) {
	margin-top: 1.5em;
}

h4:not(:last-child) {
	margin-bottom: 1em;
}

p:not(:last-child) {
	margin-bottom: 1em;
}

.text-block ul:not(:last-child) {
	margin-bottom: 1em;
}

.text-block li {
   display: flex;
}

.text-block li:not(:last-child) {
	margin-bottom: .5em;
}

	.text-block li::before {
		content: "•";
	  flex: 0 0 0.5em;
	  margin-right: 0.5em;
	}

.region {
	display: inline-block;
	font: var(--font);
}

	.region::before {
		content: "(";
	}
	
	.region::after {
		content: ")";
	}
	
.opening-hours {
	margin-bottom: 1em;
	color: var(--color-blue-light);
}

/* @end */

/* @group Links & Buttons */

.speaker-button {
	width: 3em;
	height: 3em;
	padding: .9em;
	color: white;
	background-color: rgba(0,0,0,.35);
	border-radius: 50%;
}

	.speaker-button:hover {
		cursor: pointer;
	}

.accordion-link:hover {
	cursor: pointer;
}

.bubble a,
.teaser-block a,
.events-block a,
.event-block a,
.text-block a:not(.button),
.footer__text a {
	text-decoration: underline;
	text-decoration-color: var(--color-pink);
	text-decoration-thickness: .08em;
	text-underline-offset: .2em;
}

.bubble a,
.teaser-block a {
	text-decoration-color: var(--color-green-light);
}

.button {
	display: block;
	width: max-content;
	margin-inline: auto;
	padding-inline: 1em;
	border-radius: 1em;
	background-color: rgba(0,0,0,.3);
	line-height: 2em;
}

	.button::after {
		content: "→";
		display: inline-block;
		margin-left: .5em;
	}

/* @end */

/* @group Header */

.header {
	pointer-events: none;
	position: fixed;
	z-index: 30;
	top: 0;
	right: 0;
	left: 0;
	display: grid;
	grid-template-columns: 3em 1fr 3em;
	column-gap: clamp(1em, 7vw, 3em);
	padding-block: .75em;
	padding-inline: var(--spacing-inline);
	color: var(--color-white);
}

.header--fixed {
	background-color: var(--color-blue);
	box-shadow: 0 0 .5em rgba(0,0,0,.7);
	font-size: .6em;
}

	body.home .header:not(.header--fixed) .header__logo {
		display: none;
	}
	
	.header__logo {
		pointer-events: auto;
		grid-column: 1;
	}

		.header__logo svg {
			width: 3em;
			height: auto;
			transition: font-size .2s ease-in-out 0s;
		}
		
	.header__info {
		grid-column: 2;
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		/*height: 100%;*/
		justify-content: center;
		align-content: center;
		font-size: .6rem;
		line-height: 1.2em;
		text-align: center;
		opacity: 0;
	}
	
	.header--fixed .header__info {
		opacity: .6;
	}
	
	.header__menu-toggle {
		pointer-events: auto;
	}

/* @end */

/* @group Logo */

	.logo svg {
		vertical-align: bottom;
	}

/* @end */

/* @group Menu toggle */

.menu-toggle {
	width: 3em;
	height: 3em;
	vertical-align: top;
	color: var(--color-white);
}

.menu-toggle:hover {
	cursor: pointer;
}

/* @end */

/* @group Hamburger */

.hamburger {
	position: relative;
}

	.hamburger > * {
		display: block;
		position: absolute;
		height: .15em;
		width: 100%;
		border-radius: .07em;
		background-color: currentColor;
		transition: all 300ms ease-in-out 0s;
	}
	
	.hamburger > *:nth-child(1) {
		transform: translateY(.6em);
	}

	.hamburger > *:nth-child(3) {
		transform: translateY(-.6em);
	}
	
	.hamburger--open > *:nth-child(1) {
		width: 80%;
		margin-left: 10%;
		transform: rotate(45deg);
	}
	
	.hamburger--open > *:nth-child(2) {
		opacity: 0;
	}
	
	.hamburger--open > *:nth-child(3) {
		width: 80%;
		margin-left: 10%;
		transform: rotate(-45deg);
	}

/* @end */

/* @group Overlay */

.overlay {
	position: fixed;
	z-index: 20;
	top: 0;
	right: -100vw;
	width: 100vw;
	transition: all .2s ease-in-out 0s;
}

.overlay--open {
	right: 0;
}

	.overlay__menus {
		display: flex;
		margin-left: auto;
		flex-direction: column;
		width: 100vw;
		min-height: 100dvh;
		padding: 5rem 2rem 2rem;
		color: var(--color-white);
		background-color: var(--color-base);
	}
	
	.overlay--open .overlay__menus {
		box-shadow: 0 0 .5em rgba(0,0,0,.7);
	}
	
		.overlay__menu:last-child {
			margin-top: auto;
		}
		
	@media (min-width: 600px) {
		
		.overlay__menus {
			width: 62vw;
		}
		
	}
		

/* @end */

/* @group Menu */

.menu {
	display: flex;
	flex-direction: column;
	row-gap: .5em;
	font: var(--font-md);
}

/* @end */

/* @group Background */

.background {
	position: fixed;
	z-index: -1;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

.background--video,
.background--image img {
	width: 100%;
	height: 100%;
	vertical-align: bottom;
	object-fit: cover;
}

/* @end */

/* @group Cover */

.cover {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 50rem;
	height: calc(100vh - 6rem);
	margin-inline: auto;
	padding-block: 10vh;
	padding-inline: var(--spacing-inline);
	color: var(--color-white);
}

	.cover__branding {
		
	}

	.cover__logo {
		display: block;
		width: 100%;
		text-align: center;
	}
	
		.cover__logo img {
			width: 100%;
		}
		
	.cover__audio {
		position: relative;
		z-index: 15;
		text-align: center;
	}
		
	@media (max-width: 999px) { /* Vertical logo */
			
			.cover__logo {
				max-width: 70vh;
			}
	}
	
	@media (max-width: 999px) and (orientation: landscape) {
		
		.cover {
			height: 100vh;
		}
		
			.cover__logo,
			.cover__audio {
				width: 50%;
				align-self: flex-start;
			}
		
	}
	
	@media (min-width: 1000px) { /* Horizontal logo */
		
		.cover__logo,
		.cover__audio {
			position: absolute;
			left: 0;
			top: 50%;
			width: 100%;
		}
		
		.cover__logo {
			transform: translateY(-100%);
		}
		
		.cover__audio {
			transform: translateY(100%);
		}
		
			.cover__logo img {
				max-width: var(--max-width);
			}
		
	}
	
	@media (min-width: 1000px) and (orientation: portrait) {
		
		
		
	}
		
	.cover__speaker-button {
		margin-top: 1em;
	}
	
	.cover__bubble {
		position: absolute;
		z-index: 5;
		right: 0;
		bottom: -1rem;
	}

/* @end */

/* @group  Bubble */

.bubble {
	width: 100%;
	max-width: 19em;
}

	.bubble__inner {
		position: relative;
		margin-inline: calc(-.5 * var(--spacing-inline));
	}
	
		.bubble__inner::before,
		.bubble__inner::after {
			content: "";
			pointer-events: none;
			display: block;
			position: absolute;
			z-index: 2;
			-webkit-mask-size: cover;
		  mask-size: cover;
		  -webkit-mask-repeat: no-repeat;
		  mask-repeat: no-repeat;
			background-color: var(--color-pink);
		}

		.bubble__inner::before {
			top: 0;
			right: 0;
			width: 100%;
			aspect-ratio: 40 / 23;
			-webkit-mask-image: url(../images/bubble-top.svg);
		  mask-image: url(../images/bubble-top.svg);
			transform: translateY(-100%);
		}
		
		.bubble__inner::after {
			bottom: 0;
			left: 0;
			width: 320%;
			aspect-ratio: 8 / 3;
			-webkit-mask-image: url(../images/bubble-left.svg);
		  mask-image: url(../images/bubble-left.svg);
			transform: translateX(-100%);
		}

	.bubble__figure {
		position: relative;
		aspect-ratio: 8 / 5;
		display: flex;
		align-items: center;
		overflow: hidden;
		-webkit-mask-image: url(../images/bubble-body.svg);
	  mask-image: url(../images/bubble-body.svg);
		-webkit-mask-size: 100%;
	  mask-size: 100%;
	  -webkit-mask-repeat: no-repeat;
	  mask-repeat: no-repeat;
		background-color: var(--color-pink);
	}
	
	.bubble__text {
		padding: 13% 18% 5% 10%;
		color: var(--color-blue);
		text-align: center;
	}
	
	.bubble h1 {
		padding-bottom: unset;
	}

/* @end */

/* @group Main */

.main {
	max-width: var(--max-width);
	padding-top: 4.5rem; /* Placeholder for header */
	margin-inline: auto;
}

.cover + .main {
	padding-top: unset;
}

/* @end */

/* @group Breadcrumb */

.breadcrumb {
	display: flex;
	flex-wrap: wrap;
	margin-top: .75em;
	margin-bottom: .75em;
	color: var(--color-white);
	font: var(--font);
	font-weight: 500;
}

	.breadcrumb > *:not(:last-child)::after {
		content: "→";
		display: inline-block;
		padding-inline: .5em;
	}
	
	.breadcrumb *.active {
		opacity: .5;
	}
	
@media (max-width: 44rem) {
	
	.breadcrumb {	
		padding-inline: var(--spacing-inline);
	}
	
}

/* @end */

/* @group Submenu-header */

.submenu-header {
	padding-top: var(--spacing-block);
	padding-inline: var(--spacing-inline);
	background-color: var(--color-green);
	color: var(--color-white);
}

/* @end */

/* @group Submenu */

.submenu {
	padding-block: .75em;
	padding-inline: var(--spacing-inline);
	background-color: var(--color-green);
	color: var(--color-white);
	border-bottom: 2px solid var(--color-white);
}

	.submenu > *:not(:last-child) {
		border-bottom: 1px solid currentColor;
	}

	.submenu a {
		display: flex;
		column-gap: 1em;
		align-items: center;
		padding-block: 1.25em;
	}
	
	.submenu a.active {
		opacity: .4;
	}
	
	.submenu__figure {
		flex: 0 0 max-content;
		order: 2;
	}
	
		.submenu__figure img {
			width: 4.5em;
			margin-block: -.75em;
			height: auto;
			border-radius: 50%;
		}
	
	.submenu__content {
		flex: 1 1 auto;
	}
	
	h2.submenu__title {
		display: inline-block;
		margin: unset;
		font: var(--font-md);
		font-weight: 600;
	}
	
	.submenu__subheading {
		display: inline-block;
		font: var(--font);
	}
	
	.submenu--topics .submenu__subheading,
	.submenu--topic .submenu__subheading {
		margin-right: .25em;
		font: var(--font-lg);
		font-style: italic;
	}
	
	.submenu--topics .submenu__title,
	.submenu--topic .submenu__title {
		font: var(--font);
		font-weight: 600;
	}

/* @end */

/* @group Events-block */

.events-block {
	padding-bottom: var(--spacing-block);
	padding-inline: var(--spacing-inline);
	background-color: var(--color-background);
}

/* @end */

/* @group Events */

.events {
	display: flex;
	flex-direction: column;
	row-gap: 1.5em;
}

	.events__date {
		color: var(--color-blue-light);
	}

/* @end */

/* @group Event-block */

.event-block {
	padding-block: var(--spacing-block);
	padding-inline: var(--spacing-inline);
	background-color: var(--color-background);
}

.gallery-block + .event-block {
	padding-top: unset;
}

/* @end */

/* @group  Curio */

.curio {
	max-width: 24rem;
	margin-inline: auto;
}

	.curio__inner {
		position: relative;
		margin-inline: -2rem;
	}

		.curio__inner::before {
			content: "";
			pointer-events: none;
			display: block;
			position: absolute;
			z-index: 2;
			top: 0;
			left: 0;
			width: 360%;
			aspect-ratio: 18 / 7;
			-webkit-mask-image: url(../images/curio-top.svg);
		  mask-image: url(../images/curio-top.svg);
			-webkit-mask-size: cover;
		  mask-size: cover;
		  -webkit-mask-repeat: no-repeat;
		  mask-repeat: no-repeat;
			background-color: var(--color-turquoise);
			transform: translateY(-100%) translateX(-13.888888889%);
		}

	.curio__figure {
		position: relative;
		aspect-ratio: 5 / 4;
		overflow: hidden;
		-webkit-mask-image: url(../images/curio-body.svg);
	  mask-image: url(../images/curio-body.svg);
		-webkit-mask-size: 100%;
	  mask-size: 100%;
	  -webkit-mask-repeat: no-repeat;
	  mask-repeat: no-repeat;
		color: var(--color-red-dark);
		background-color: var(--color-turquoise);
		text-align: center;
	}

	.curio__image {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		object-fit: contain;
	}
	
	.curio__text {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		padding-top: 22%;
		padding-inline: 15%;
	}

/* @end */

/* @group Blocks */

*[class$="-block"] {
	color: var(--color-base);
	background-color: var(--color-background);
}

/* @group Image-block */

.image-block {
	
}

	.image-block img {
		width: 100%;
		height: auto;
		aspect-ratio: 1/1;
	}
	
	@media (min-width: 640px) {
		
		.image-block img {
			aspect-ratio: 3/2;
		}
		
	}

/* @end */

/* @group Audio-block */

.audio-block {
	
}

	.audio-block img {
		width: 100%;
		height: auto;
		aspect-ratio: 1/1;
	}
	
	.audio-block__audio {
		position: relative;
		z-index: 1;
		margin-top: -2.5em;
		margin-inline: auto;
		width: 5em;
	}
	
	@media (min-width: 640px) {
		
		.audio-block img {
			aspect-ratio: 3/2;
		}
		
	}
	
/* @group Play-button */

.play-button {
	width: 5em;
	height: 5em;
	color: white;
	background-color: var(--color-orange);
	border-radius: 50%;
	vertical-align: bottom;
}

	.play-button:hover {
		cursor: pointer;
	}

/* @end */

/* @end */

/* @group Bordure-block */

.bordure-block {
	
}

	.bordure-block img {
		width: 100%;
		height: auto;
		aspect-ratio: 3/1;
	}
	
	@media (min-width: 640px) {
		
		.bordure-block img {
			aspect-ratio: 9/2;
		}
		
	}

/* @end */

/* @group Text-block */

.text-block {
	padding-top: 2em;
	padding-bottom: 2em;
	padding-inline: var(--spacing-inline);
}

.heading-block + .text-block {
	padding-top: .5em;
}

.image-block + .text-block {
	padding-top: 1.5em;
}

.text-block:has(+ .button-block) {
	padding-bottom: unset;
}

.text-block[style*="background-color"] {
	color: var(--color-white);
}

	.text-block img {
		width: calc(100% + 2 * var(--spacing-inline));
		margin-top: -2em;
		margin-bottom: 1em;
		margin-inline: calc(-1 * var(--spacing-inline));
	}
	
	.text-block__linktext {
		margin-top: 3em;
		text-align: center;
	}
	
	.text-block__subheading {
		color: var(--color-blue-light);
	}

/* @end */


/* @group Button-block */

.button-block {
	padding-block: 2em;
}

.button-block[style*="background-color"] {
	color: var(--color-white);
}

/* @end */

/* @group Gallery-block */

.gallery-block {
	padding-bottom: 2em;
	border-bottom: none;
	text-align: center;
}

.gallery-block[style*="background-color"] {
	color: var(--color-white);
}

	.gallery-block__caption {
		margin-top: 1em;
	}
	
	.gallery-block img {
		aspect-ratio: 1/1;
	}
	
	@media (min-width: 640px) {
		
		.gallery-block img {
			aspect-ratio: 3/2;
		}
		
	}

/* @end */

/* @group Curio-block */

.curio-block {
	padding-bottom: 2em;
	background-color: var(--color-green-light);
}

/* @end */

/* @group Teaser-block */

.teaser-block {
	padding-block: var(--spacing-block);
	padding-inline: var(--spacing-inline);
	background-color: var(--color-pink);
	color: var(--color-base);
	border-bottom: 2px solid var(--color-white);
}

/* @end */

/* @group Heading-block */

.heading-block {
	padding-top: 2em;
	padding-bottom: unset;
	padding-inline: var(--spacing-inline);
}

.audio-block + .heading-block {
	padding-top: 1em;
}

	.heading-block__subheading {
		color: var(--color-blue-light);
		font-weight: 400;
		font-style: italic;
	}

/* @end */

/* @end */

/* @group Section */

.section {
	color: var(--color-base);
	background-color: var(--color-background);
}

.heading-block + .section .text-block:first-child {
	padding-top: .5em;
}

.section[style*="color:"] *[class$="-block"] {
	color: var(--color-white);
	background-color: unset;
}

.section--border {
	border-bottom: 2px solid var(--color-white);
}

/* @end */

/* @group Splide */

.splide {
	
}

		.splide__slide img {
		  width: 100%;
		}
	
	.splide__pagination {
		line-height: 1;
	}
	
		.splide__pagination > * {
			display: unset;
		}
		
			.splide__pagination > *::before {
				content: "";
				display: none;
				width: unset;
			}
			
			.splide__pagination__page {
				padding-top: 1em;
				padding-inline: .5em;
				transition: all .15s ease-in-out 0s;
			}
			
				.splide__pagination__page::before {
					content: "";
					display: block;
					width: .5em;
					height: .5em;
					background-color: currentColor;
					border-radius: 50%;
					opacity: .25;
					transition: opacity .15s ease-in-out 0s;
				}
				
				.splide__pagination__page.is-active::before {
					opacity: 1;
				}
			
				.splide__pagination__page:not(.is-active):hover {
					cursor: pointer;
				}
				
					.splide__pagination__page:hover::before {
						opacity: 1;
					}

/* @end */

/* @group Gallery */

.gallery {
	z-index: 2;
}

/* @end */

/* @group Accordion */

.accordion {
	max-height: 0;
	overflow: hidden;
	transition: max-height .3s ease-in-out;
}

/* @end */

/* @group Topics & Topic */

.topics-section {
	
}

	h1.topics-section__title {
		padding: var(--spacing-inline);
		color: var(--color-white);
		background-color: var(--color-green);
	}

.topics {
	
}

.topic {
	background-color: var(--color-white);
}

	.topic__header {
		color: var(--color-white);
		padding: var(--spacing-inline);
		background-color: var(--color-green);
	}
	
		.topic__header h1 {
			transition: all .2s ease-in-out 0s;
		}
	
	.topic__header--open {
		padding-bottom: unset;
		color: var(--color-red);
		background-color: var(--color-white);
	}
	
		.topic__header--open h1 {
			margin-bottom: unset;
			font: var(--font);
			font-weight: 500;
			letter-spacing: 0;
		}
	
	.topic:nth-child(even) .topic__header {
		text-align: right;
	}
	
	.topic__main {
		
	}
	
		.topic__main h2 {
			font-weight: 500;
		}
	
	.topic__text {
		padding-top: 1em;
		padding-bottom: 2em;
		padding-inline: var(--spacing-inline);
	}

/* @end */

/* @group Persons & Person */

.persons-section {
	padding-block: var(--spacing-block);
	padding-inline: var(--spacing-inline);
	background-color: var(--color-white);
}

	.person-section__picture {
		width: calc(100% + 2 * var(--spacing-inline));
		margin-top: calc(-1 * var(--spacing-block));
		margin-bottom: 1em;
		margin-inline: calc(-1 * var(--spacing-inline));
	}
	
	.person-section h1 {
		
	}
	
	.person-section__persons {
		margin-top: 2em;
	}

.persons {
	
}

.person {
	
}

.person:not(:last-child) {
	margin-bottom: 2em;
}

	.person__header {
		
	}
	
	.person--open .person__header {
		margin-bottom: 1em;
	}	
	
		.person--open .person__header .accordion-link {
			display: none;
		}
		
	.person__portrait {
		width: 100%;
		margin-bottom: 1em;
	}
	
	.person__role {
		margin-bottom: .5em;
		color: var(--color-blue-light);
	}
	
	.person .accordion-link {
		margin-top: 1em;
	}


/* @end */

/* @group Footer */

.footer {
	display: grid;
	row-gap: 2rem;
	max-width: var(--max-width);
	margin-inline: auto;
	padding-block: 3em;
	padding-inline: var(--spacing-inline);
	color: var(--color-white);
	background-color: var(--color-blue);
	font: var(--font-sm);
}

	.footer > *:first-child {
		display: flex;
		flex-direction: column;
		row-gap: 2em;
	}
	
	.footer__social {
		margin-bottom: auto;
	}
	
	
	
	@media (max-width: 799px) {
		
		.footer__logos {
			padding-top: 2rem;
			border-top: 1px solid currentColor;
			text-align: center;
		}
		
			.footer__logos img {
				margin-inline: auto;
			}
		
	}

	@media (min-width: 800px) {
		
		.footer {
			grid-template-columns: 1fr 1fr;
		}
		
			.footer > *:not(:last-child) {
				padding-bottom: 2rem;
				border-bottom: 1px solid currentColor;
			}
			
			.footer__logos {
				grid-column: 2;
			}
		
	}
/* @group Links */
	
	.links {
		display: flex;
		flex-direction: column;
		row-gap: .75em;
		font: var(--font-md);
		font-weight: 600;
	}
	
	/* @end */
	
	/* @group Social */
	
	.social {
		display: flex;
		column-gap: 1em;
		font-size: 2em;
	}
	
	.social a[href*="youtube"],
	.social a[href*="instagram"] {
		display: inline-block;
		width: 1.5em;
		overflow: hidden;
		white-space: nowrap;
	}
	
		.social a[href*="youtube"]::before,
		.social a[href*="instagram"]::before {
		  content: "";
			display: inline-block;
		  -webkit-mask-size: cover;
		  mask-size: cover;
		  width: 1.5em;
		  height: 1.5em;
		  background-color: currentColor;
		  vertical-align: middle;
		}
	
		.social a[href*="youtube"]::before {
		  -webkit-mask-image: url(../images/youtube.svg);
		  mask-image: url(../images/youtube.svg);
		}
		
		.social a[href*="instagram"]::before {
		  -webkit-mask-image: url(../images/instagram.svg);
		  mask-image: url(../images/instagram.svg);
		}
	
	/* @end */
	
	/* @group Logos */
	
	.logos {
		display: flex;
		flex-direction: column;
		row-gap: 4em;
	}
	
		.logos img {
			display: block;
			max-width: 100%;
			margin-top: 1em;
		}
	
	/* @end */

/* @end */