/**
$max: fontsize for desktop in px
$lineHeight: lineheight for desktop in px
$min: fontsize for mobile in px
$marginBottom: factor of the bottommargin to the base of 40px on desktop --> ist umgestellt, war vorher marginTop
*/
.mono__filter {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  min-height: min(4.1666666667vw, 80px);
  align-items: center;
}
.mono__filter_option {
  margin: 10px 0;
  border: 1px solid;
  border-radius: 40px;
  line-height: 200%;
  padding: 0 10px;
  cursor: pointer;
}
.mono__filter_option--active {
  border-color: var(--blue);
  color: var(--blue);
}

.mono_col--grid {
  min-height: 150px;
  display: grid;
  grid-template-columns: repeat(1, 1fr);
}
@media (min-width: 768px) {
  .mono_col--grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .mono_col--grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (min-width: 1024px) and (min-width: 1024px) {
  .mono_col--grid:not(:has(:nth-child(4n))) > *:nth-last-child(-n+4) {
    grid-column: span 2;
  }
}