:root{
  --card-radius: 18px;
  --note-radius: 16px;
  --note-shadow: 0 6px 24px rgba(0,0,0,.12);
  --note-max: 460px; 
}

.overlap-card{
  position: relative;
  display: flex;
  margin-bottom: 3rem;
  overflow: visible;
}

.overlap-img{
  width: 80%;         
  max-width: 900px;
  display: block;
  object-fit: cover;
  border-radius: var(--card-radius);
  aspect-ratio: 16/9;
}

.overlap-note{
  position: absolute;
  bottom: 0%;
  background: #fff;
  color: #111;
  border-radius: var(--note-radius);
  box-shadow: var(--note-shadow);
  padding: clamp(16px, 2vw, 24px);
  max-width: 50%;
  width: fit-content;
  z-index: 1;
}

.overlap-note.wide{
  max-width: 70%;  
  width: 70%;
  bottom:-70%;
}

.overlap-note.geel{
	background-color: #ffe163;
}

.overlap-card.left  { justify-content: flex-start; }
.overlap-card.left  .overlap-note { right: 0%; transform: translateY(12%); }

.overlap-card.right { justify-content: flex-end; }
.overlap-card.right .overlap-note { left: 0%;  transform: translateY(12%); }

@media (max-width: 767.98px){
  .overlap-card{ display:block; }
  .overlap-img{ width:100%; max-width:none; }
  .overlap-note{
    position: static;
    transform: none;
    margin-top: 12px;
    max-width: 100%;
    width: auto;
  }
  .overlap-note.wide{
    position: static;
    transform: none;
    margin-top: 12px;
    max-width: 100%;
    width: auto;
  }
}

.overlap-card.side-by-side {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 1rem;               
}

.overlap-card.side-by-side .overlap-note {
  position: static;   
  transform: none;    
  margin-left: 2rem;  
  display: flex;
  flex-direction: column;
  flex: 1 1 0;         
  max-width: none;     
  box-shadow: var(--note-shadow);
  margin: 0;
}

.overLow1 {
	margin-top: 24rem!important;
}
.overLow2 {
	margin-top: 28rem!important;
}
.overLow3 {
	margin-top: 16rem!important;
}
.overLow4 {
	margin-top: 16rem!important;
}
.overLow5 {
	margin-top: 12rem!important;
}
.indexLow1 {
	margin-top: 3rem!important;
}
.indexLow2 {
	margin-top: 15rem!important;
	margin-bottom: 15rem!important;
}

.klantLow1 {
	margin-top: 4rem!important;
}
.klantLow2 {
	margin-top: 17rem!important;
	margin-bottom: 10rem!important;
}
.klantLow3 {
	margin-bottom: 18rem!important;
}

@media (max-width: 767.98px){
  .overlap-card.side-by-side {
    flex-direction: column;   
    align-items: stretch;
    gap: 1rem;
  }

  .overlap-card.side-by-side .overlap-note {
    margin-left: 0;         
    width: 100%;
    max-width: 100%;
  }
}
@media (max-width: 767.98px) {
  .overlap-card {
    display: block;
    overflow: visible;
  }

  .overlap-card .overlap-img {
    width: 100%;
    max-width: none;
    margin-bottom: 1rem;
    aspect-ratio: auto; 
  }

  .overlap-card .overlap-note {
    position: static;
    bottom: auto;
    left: auto;
    right: auto;
    transform: none;
    max-width: 100%;
    width: 100%;
    margin: 0 0 1.5rem 0;
    box-shadow: var(--note-shadow);
  }
  .overlap-card.right .overlap-note {
	  transform: none;
  }
  .overlap-card.left .overlap-note {
	  transform: none;
  }

 
  .klantLow1,
  .klantLow2,
  .klantLow3 {
    margin-top: 0rem !important;
    margin-bottom: 0rem !important;
  }
  .overLow1,
  .overLow2,
  .overLow3,
  .overLow4,
  .overLow5{
	  margin-top: 0rem !important;
    margin-bottom: 0rem !important;
  }
  .indexLow1,
  .indexLow2,
  .indexLow3,
  .indexLow4,
  .indexLow5{
	  margin-top: 0rem !important;
    margin-bottom: 0rem !important;
  }
}