/*
============================================================
PICTURE.CSS
Layout voor pagina's met afbeeldingen naast de tekst
============================================================
*/

/* ---------------------------------------------------------
   Hoofdindeling van de pagina
--------------------------------------------------------- */

.page-layout {

  display: flex;
  align-items: flex-start;

  gap: 30px;

}


/* ---------------------------------------------------------
   Linkerkolom: tekst
--------------------------------------------------------- */

.page-main-content {

  flex: 1;

  min-width: 0;

}


/* ---------------------------------------------------------
   Rechterkolom: afbeeldingen
--------------------------------------------------------- */

.page-images {

  width: 30%;

  display: flex;
  flex-direction: column;

  gap: 20px;

}


/* ---------------------------------------------------------
   Container voor een afbeelding
--------------------------------------------------------- */

.page-image-item {

  margin: 0;

}


/* ---------------------------------------------------------
   Afbeelding zelf
--------------------------------------------------------- */

.page-image-item img {

  display: block;

  max-width: 100%;
  height: auto;

  /* uitlijnen naar rechts */

  margin-left: auto;

}


/* ---------------------------------------------------------
   Onderschrift
--------------------------------------------------------- */

.page-image-item figcaption {

  margin-top: 6px;

  font-size: 0.9rem;

  line-height: 1.4;

  text-align: right;

  color: #555;

}


/*
============================================================
RESPONSIVE
============================================================
*/

@media (max-width: 900px) {

  .page-layout {

    flex-direction: column;

  }

  .page-images {

    width: 100%;

  }

  .page-image-item img {

    margin-left: 0;

  }

  .page-image-item figcaption {

    text-align: left;

  }

}