main{
  padding-top: 70px;
}
.masonryGrid{
  margin: 0 1rem 0 1rem;
}

:root {
    --grid-gutter: 15px;
}

.card-header-img{
  border-top-left-radius: var(--bs-card-inner-border-radius);
  aspect-ratio: 1 / 1;
  padding:5% 5% 0 5%;

  .card-img-bento{
    border-top-left-radius: var(--bs-card-inner-border-radius);
    border-top-right-radius: var(--bs-card-inner-border-radius);
    width: 100%;
   height: 100%;
   object-fit: contain;
   object-position: center bottom;

   background-color: #FFF;
  }
}



/* ========================================
   Mobile — 2 kolommen
   ======================================== */

.grid-sizer,
.grid-item {
    /* width: calc((100% - var(--grid-gutter)) / 2); */
    width: 100%;
}

.grid-item--wide,
.grid-item--large,
.grid-item--brand {
    width: 100%;

    .col-6{
      width:100%;
    }
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
  .grid-sizer,
  .grid-item {
      width: calc((100% - var(--grid-gutter)) / 2);
  }
}

/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
@media (min-width: 768px) {

  .grid-sizer,
  .grid-item {
      width: calc((100% - (var(--grid-gutter) * 2)) / 3);
      --wide-size: calc((100% - (var(--grid-gutter) * 2)) / 1.5);
  }

  .grid-item--wide,
  .grid-item--brand {
      width: calc(var(--wide-size) + var(--grid-gutter));
  }

  .grid-item--large {
      width: 100%;
  }

}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {

  .grid-sizer,
  .grid-item {
      width: calc((100% - (var(--grid-gutter) * 3)) / 4);
      --wide-size: calc((100% - (var(--grid-gutter) * 3)) / 2);
  }

  .grid-item--wide,
  .grid-item--brand {
      width: calc(var(--wide-size) + var(--grid-gutter));
  }

  .grid-item--large {
      width: calc((100% - var(--grid-gutter)) / 2);
  }

}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  .grid-sizer,
  .grid-item {
      width: calc((100% - (var(--grid-gutter) * 4)) / 5);
      --wide-size: calc((100% - (var(--grid-gutter) * 4)) / 2.5);
  }

  .grid-item--wide,
  .grid-item--brand {
      width: calc(var(--wide-size) + var(--grid-gutter));
  }

  .grid-item--large {
      width: calc((100% - var(--grid-gutter)) / 2);
  }

}

/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {

  .grid-sizer,
  .grid-item {
      width: calc((100% - (var(--grid-gutter) * 5)) / 6);
      --wide-size: calc((100% - (var(--grid-gutter) * 5)) / 3);
  }

  .grid-item--wide,
  .grid-item--brand {
      width: calc(var(--wide-size) + var(--grid-gutter));
  }

  .grid-item--large {
      width: calc((100% - var(--grid-gutter)) / 2);
  }

}