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

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

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

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

.midden {
   background-color: var(--lightgrey);
}

.vacatures {
   background-color: var(--cream);
   border-radius: 20px;
}

.vac-regels {
	display: grid;
	grid-template-columns: 50% auto;
   /*grid-template-areas: 'infotekst' 'geenvacatures';*/
	row-gap: 30px;
   border: var(--border-th) solid blue;
}

.geenvacatures {
	padding: 20px;
	grid-area: geenvacatures;
	/*grid-column-start: 1;*/
	grid-column-end: span 2;
	text-align: left;
}

.vac-tekst1, .vac-tekst2, .vac-tekst3 {
	position: relative;
	bottom: -80px;
	left:   40px;
   font-family: "comic-sans", sans-serif;
   border: var(--border-th) solid blue;
}

.vac_tkst_sp1, .vac_tkst_sp2, .vac_tkst_sp3 {
   font-family: "comic-sans", sans-serif;
   border: var(--border-th) solid blue;
	/*text-align: left;*/
}

.vac-figuur1, .vac-figuur2, .vac-figuur3 {
	width: 170px;
   border: var(--border-th) solid blue;
}

.infotekst {
	padding: 20px;
	text-align: left;
	grid-area: infotekst;
	/*grid-column-start: 1;*/
	grid-column-end: span 2;
}

.blocksp {
	display: none;
}

@media only screen and (max-width: 1100px) {
  #container {
    grid-template-columns: 20% auto 20%;}
}

@media only screen and (max-width: 900px) {
 #container {
    grid-template-columns: 15% auto 15%;}
}

@media only screen and (max-width: 600px) {
#container {
	display: none;}
.blocksp {
	display: block;
	width: 90%;
   margin: auto;
   background-color: var(--cream);
   border-radius: 30px;
   text-align: center;
   font-family: "comic-sans", sans-serif;
   padding-bottom: 0px;}
}