header { 
	display: grid;
	grid-template-columns: repeat(auto-fill,minmax(12rem, 1fr));
	font-size: clamp(24px, 2vw, 36px);
	background-color: #eeeeee;
}

header {
	grid-column: 1 / -1;
	grid-row: 1;
	padding: 2em;
}

article { 
	display: grid;
	grid-template-rows: repeat(auto-fill,1fr);
	padding: 5em;
	font-size : clamp(18px, calc(20px + ((1vw - .48rem) * 1,389)), 32px);
	background-color: #eeeeee;
}

h1 {
	text-align: center;
}
p{
	text-indent: 5%;
}

a:link {
	color: red;
}
a:visited {
	color: red;
}
a:hover {
	color: hotpink;
}
a:active {
	color: red;
}
a:link {
	text-decoration: none;
}
a:visited {
	text-decoration: none;
}
a:hover {
	text-decoration: none;
}
a:active {
	text-decoration: none;
}

ul {
  list-style: none;
  padding: 0;
}

.galerie {
	display: grid;
	grid-template-columns: 20px 1fr 20px;
	align-content: start;
}

.galerie > * {
  grid-column: 2 / -2;
}

.galerie > .full {
  grid-column: 1 / -1;
}

.galerie {
  width: 100%;
  background: #DBD0BC;
}

.hs {
	display: grid;
	grid-gap: 10px;
	grid-template-columns: 10px;
	grid-auto-flow: column;
	grid-auto-columns: repeat(9, 610px);
	grid-template-rows: minmax(200px, 1fr);
	overflow-x: scroll;
	scroll-snap-type: x proximity;
	padding-bottom: 10px;
	margin-bottom: 5px;
}

.hs::before,
.hs::after {
	content: '';
	width: 10px;
}

.hs > li,
.foto {
  scroll-snap-align: center;
  padding: 15px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #fff;
  border-radius: 8px;
}

footer {
	grid-column: -4 / span 4;
	grid-row: 6;
	align-self: end;
	justify-self: end;
	padding: 1em;
}