#splash { display: flex; flex: none; align-items: center; justify-content: center; padding: 1em 3em; }
#splash div { display: flex; flex: none; width: 100%; aspect-ratio: 2.75/1; background: url(images/splash.jpg) center calc( 50% - 3em ) no-repeat; background-size: cover; border-radius: 4em;  }

.accordeon { padding: 1em 3em; }
.accordeon a { text-decoration: none; display: block; padding: 1em 6em; font-weight: bold; color: var(--second-text); background: var(--sec-color-grad3); border-radius: 1em; }
.accordeon > section { margin-bottom: 1em; }
.accordeon > section:first-of-type .hidden-panel { display: block; }

.accordeon .panel { overflow: hidden; border-radius: 4em; color: var(--reverse-text); cursor: pointer;  }
.accordeon .panel.active-panel { cursor: unset; }
.accordeon .panel .flex-container {
	display: flex; flex: none; flex-direction: column;
	width: 100%; height: auto; min-height: auto; max-height: 13.5em;
	padding: 4em 27em; background: #0007;
	background: var(--sec-color-grad3);
	color: black;
	transition-property: max-height, background;
  transition-duration: 0.2s;
}

.accordeon .panel .flex-container:hover {
	background: #b5b1aa;
	transition: background 0.2s ease;
}
.accordeon .panel.active-panel .flex-container {
 	max-height: 100em;
 	background: #0007;
	color: var(--reverse-color);
	transition: max-height 1s ease;
}

.hidden-panel { display: none; padding-top: 6em; }

.accordeon .hidden-panel p + ul { margin-top: 2em; }

.accordeon .panel ul {
	margin: 0; padding: 0; list-style-type: none;
	display: flex; flex-direction: column; gap: 3em;
}
.accordeon .panel p { width: 32em; text-align: left;  }
.accordeon .panel .top-panel p { margin: 1em 0; }
.accordeon .panel h3 { display: flex; flex: none; align-items: center; font-weight: 500; margin-bottom: 0.3em; }
.accordeon .panel h3 span.dot { display: inline-block; width: 1em; aspect-ratio: 1/1; margin-right: 0.33em; background: var(--reverse-text); border-radius: 100%; }

#agri .panel { background: url(images/agri.jpg) center center no-repeat; background-size: cover; }
#cosm .panel, #test .panel { background: url(images/cosm.jpg) center top no-repeat; background-size: cover; display: block; }
#mat .panel { background: url(images/mat.jpg) center top no-repeat; }
#nrg .panel { background:  url(images/nrg.jpg) center center no-repeat; background-size: cover; }