.custom-two-col {
  display: flex;
  align-items: stretch;
  gap: 0px;
  margin: 48px 0;
  min-height: 320px;
  height: 320px;
}

.col.image-col {
  flex: 0 1 38%;   /* Maak de image kolom smaller (bijvoorbeeld 38%) */
  max-width: 42%;  /* Optioneel, zodat de afbeelding niet te breed wordt */
  display: flex;
  align-items: stretch;
}
.col.quote-col {
  flex: 1 1 62%;   /* Quote kolom wordt breder (bijvoorbeeld 62%) */
  max-width: 100%;
  display: flex;
  align-items: stretch;
}

.img-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
}

.img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;    /* altijd croppen, altijd vullen */
  display: block;
}

.quote-box {
    padding: 40px 38px; /* meer ruimte links en rechts aan de binnenkant */
  width: 100%;
  
  height: 100%;         /* altijd even hoog als de afbeelding */
  color: #263248;
  font-family: 'Figtree', Arial, Helvetica, sans-serif;
  font-weight: 100;
  line-height: 1.4;
  font-size: 1.2em;
  position: relative;
  box-shadow: 0 0 8px rgba(40, 60, 110, 0.04);
  display: flex;
  align-items: left;       /* tekst verticaal centreren */
    flex-direction: column;
    height: 100%;

  justify-content: center; /* Verticaal centreren */

  /* Schuine rechter onderhoek */
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 120px), calc(100% - 150px) 100%, 0 100%);
}

.quote-content {
  display: flex;
  align-items: center; /* verticaal centreren binnen beschikbare ruimte */
  justify-content: center;/* optioneel: tekst horizontaal centreren in div */
  text-align: left;       /* tekst zelf aan de linkerkant van het blok */
    margin-bottom: 32px; /* kleine afstand tot de footer-tekst */

}

@media (max-width: 900px) {
  .custom-two-col {
    flex-direction: column;
    gap: 0px;
    height: auto;
    min-height: 0;
  }
  .col.image-col, .col.quote-col {
    flex: 1 1 100%;
    max-width: 100%;
    min-width: 0;
    height: auto;
  }
  .img-wrapper {
    aspect-ratio: 2/1;
    height: 156px;
    min-height: 100px;
    margin-bottom: 14px;
  }
  .quote-box {
    min-height: 90px;
    height: auto;
    padding: 20px 10px;
    font-size: 1em;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 32px), calc(100% - 32px) 100%, 0 100%);
  }
}
.quote-footer {
  margin-top: 2px;
  font-size: 0.92em;
  color: #444c67;
  opacity: 0.88;
  text-align: left; /* gelijke uitlijning als richtext */
}
.quote-footer {
  text-align: left;
}

.quote-footer {
  margin-top: 2px;
  color: #444c67;
  font-size: 0.92em;
  opacity: 0.88;
  text-align: left;
}
@media (max-width: 900px) {
  .quote-footer {
    margin-top: 1px; /* van 2px naar 1px of 0px voor mobiel */
  }
}
.quote-content,
.quote-footer {
  font-family: 'Roboto', Arial, Helvetica, sans-serif;
  color: #263248;
  font-weight: 200;   /* of 500/700 naar wens */
  font-size: 1.15em;  /* optioneel, naar feeling */
}
@media (max-width: 900px) {
  .custom-two-col {
    gap: 0px; /* Ook mobiel minder witruimte */
  }
  .quote-box {
    padding: 20px 10px 20px 22px; /* meer linksruimte op mobiel */
  }
  .col.image-col,
.col.quote-col {
  margin: 0;
  padding: 0;
  border: none;
}