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

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

.container {
  display: grid;
  grid-template-columns: 15% auto 15%;
}

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

.text {
  background-color: var(--yellow);
  text-align: center;
  font-family: "comic-sans", sans-serif;
}

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


.foto {
   border: var(--border-th) solid blue;
   background-color: var(--cream);
   aspect-ratio: 1 / 1;
   border-radius: 20px;
}

.foto img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

img {
	transition: scale 0.5s;
}

img:hover {
  scale: 1.03;
}

.vid {
	border: --border-th;
   background-color: var(--cream);
   aspect-ratio: 1 / 1;
   border-radius: 20px;
}

.vid video {
  width: 100%;
  height: 100%;
  object-fit: contain;  
}

.fotosp {
  width: 100vw;
  /*height: 100vh;*/
  display: none;
  /*width: 100%;*/
  background-color: var(--yellow);
}

.fotosp img {
  width: 100%;
  /*width: 100vb;*/
  height: 100%;
  /*object-fit: contain;*/
}

.vidsp video{
	display: none;
   width: 100%;
}

@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;}
  .fotosp {
	 display: block;}
  .vidsp video {
  	 display: block;
  }
}