.div3::-webkit-scrollbar {
  width: 16px;
}

.div3::-webkit-scrollbar-track {
  border-radius: 8px;
  background-color: var(--kleur3);
  border: 1px solid var(--kleur1);
}

.div3::-webkit-scrollbar-thumb {
  border-radius: 8px;
border: 3px solid transparent;
  background-clip: content-box;
  background-color: var(--kleur4);
}

body {
  height: -webkit-fill-available;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 10fr 0.5fr;
  grid-column-gap: 0px;
  grid-row-gap: 20px;
}

main {
  display: grid;
  min-height: 0;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px;
}

.div1 { 
  grid-area: 1 / 1 / 2 / 2;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-column-gap: 20px;
  grid-row-gap: 20px;
}
.div1 h1, .div1 h2 {
  grid-area: 1 / 1 / 2 / 2;
  display: contents;
}
.div1 img {
  grid-area: 1 / 2 / 2 / 3;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 10px;
}
.div1 p {
  grid-area: 2 / 1 / 3 / 3;
}

.div2 { 
  grid-area: 2 / 1 / 3 / 2; 
}

.div3 { 
  grid-area: 1 / 2 / 3 / 4; 
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(auto, 1fr);
  grid-column-gap: 20px;
  grid-row-gap: 20px;
}

.div3 article {
  aspect-ratio: 3 / 2;
  border: solid 2px var(--kleur1);
  display: grid;
  
}

.div1, .div2, .div3 {
  min-height: 0;
  overflow: auto;
}