* {
  margin: 0;
  box-sizing: border-box;
  }

body {
  background-color: var(--lightgrey); /*lightgrey*/
}

/*.text {
	background-color: lightblue;
	text-align: center;
}*/

#container {
  display: grid;
  grid-template-columns: 10% auto 10%;
}

.kantlijn {
  background-color: var(--yellow);
  border: var(--border-th) solid blue;
}


.midden {
	background-color: blue;

}

.text {
/*	grid-column-start: 1;
	grid-column-end: 4;*/
   text-align: center;
   background-color: var(--yellow);
  font-family: "comic-sans", sans-serif;
}

.contents {
	display: grid;
	grid-template-columns: auto auto auto;
	column-gap: 10px;
   background-color: var(--yellow);
}

.foto {
	/*border: 1px solid black;*/
	margin-bottom: 100px;
   background-color: var(--cream);
   border-radius: 20px;
   /*aspect-ratio: 1 / 1;*/
}

.foto img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /*background-color: var(--cream);*/
}

.foto-sp {
	display:none;
}

.foto-sp img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /*background-color: var(--cream);*/
}

img {
	transition: scale 0.5s;
}

img:hover {
  scale: 1.03;
}

.caption {
	text-align: center;
}

@media only screen and (max-width: 800px) {
  #container {
    display: grid;
    grid-template-columns: 5% auto 5%;}
  #items {display: block;
    padding: 0px;
    background-color: var(--lightgrey);}
  .date, .location, .info {padding: 5px;background-color: var(--yellow);}
  .info{margin: 0px 0px 30px 0px;}
}

@media only screen and (max-width: 600px) {
  #container {
    display: none;}
  .foto-sp {
	display:block;
   background-color: var(--yellow);}
}