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

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

main {
  display: grid;
  grid-template-columns: 20% auto 20%;
  background-color: var(--white);
  border: var(--border-th) solid blue;
}

.kantlijn {position: relative; z-index: 0;}
.content  {position: relative; z-index: 1;}

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

.content {
  margin: auto;
  text-align: justify;
  font-family: "comic-sans", sans-serif;
  /*font-family: "Times New Roman", Times, serif;*/
  /*font-family: Arial, Helvetica, sans-serif;*/
  font-size: 20px;
  color: var(--darkgrey);
  background-color: var(--white);
  padding: 20px;
  border: var(--border-th) solid blue;
  font-family: "comic-sans", sans-serif;
}


.img-left {
  float: left;
  margin-left: -15%;   /* laat de foto deels in de marge steken*/ 
  margin-right: 1rem;
  max-width: 35%;
  height: auto;
}


.img-right {
  float: right;
  margin-left: 1rem;
  margin-right: -15%;
  max-width: 30%;
  height: auto;
}

.vid1 {
  float: right;
  margin-left: 1rem;
  margin-right: -15%;
  max-width: 35%;
  height: auto;
}

.vid2 {
  float: left;
  margin-left: -15%;
  margin-right: 1rem;
  max-width: 35%;
  height: auto;
}

@media only screen and (max-width: 600px) {
  .img-left, .vid1, .vid2 {
    float: none;
    margin: 1rem auto;
    max-width: 100%;}
  main     {grid-template-columns: 5% auto 5%;}
  .content {font-size: 15px;}
}