/*!*********************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[0].use[2]!./slicing/src/scss/wt-components/blog-post-overview.scss ***!
  \*********************************************************************************************************************************************************************************************************/
.blog-post-overview {
  padding: 2rem;
  background-color: rgb(var(--background-color-grey));
}
@media only screen and (min-width: 1200px) {
  .blog-post-overview {
    padding: 1.5rem 2rem;
  }
}
@media only screen and (min-width: 1630px) {
  .blog-post-overview {
    padding: 3rem 0;
  }
}
.blog-post-overview__wrapper {
  max-width: 144rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}
@media only screen and (min-width: 1920px) {
  .blog-post-overview__wrapper {
    max-width: 163rem;
  }
}
.blog-post-overview__inner-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  align-items: stretch;
}
@media only screen and (min-width: 1200px) {
  .blog-post-overview__inner-wrapper {
    gap: 3rem;
  }
}
.blog-post-overview__item {
  flex: 100% 0 0;
}
@media only screen and (min-width: 576px) {
  .blog-post-overview__item {
    flex-basis: calc((100% - 2rem) / 2);
  }
}
@media only screen and (min-width: 768px) {
  .blog-post-overview__item {
    flex-basis: calc((100% - 6rem) / 3);
  }
}
@media only screen and (min-width: 1200px) {
  .blog-post-overview__item {
    flex-basis: calc((100% - 15rem) / 6);
  }
}
.blog-post-overview__btn-wrapper {
  width: 100%;
  margin: 1.6rem 0;
  text-align: center;
}

.blog-posts-sections {
  padding: 1.5rem 2rem;
  background-color: rgb(var(--background-color-grey));
}
@media only screen and (min-width: 1630px) {
  .blog-posts-sections {
    padding: 3rem 0;
  }
}
.blog-posts-sections__container {
  max-width: 144rem;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 3rem;
}
@media only screen and (min-width: 1920px) {
  .blog-posts-sections__container {
    max-width: 163rem;
    flex-wrap: nowrap;
  }
}
.blog-posts-sections__column {
  flex: 100% 0 0;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
@media only screen and (min-width: 1630px) {
  .blog-posts-sections__column {
    flex-basis: calc(67% - 1.5rem);
    gap: 4rem;
  }
  .blog-posts-sections__column:last-child {
    flex-basis: calc(33% - 1.5rem);
  }
}
@media only screen and (min-width: 992px) {
  .blog-posts-sections__column--reverse {
    flex-direction: row-reverse;
  }
}
@media only screen and (min-width: 1630px) {
  .blog-posts-sections__column--reverse {
    flex-direction: column;
  }
}
@media only screen and (min-width: 992px) {
  .blog-posts-sections__column--reverse .blog-posts-sections__row {
    flex: calc(50% - 1rem) 0 0;
  }
}
@media only screen and (min-width: 1630px) {
  .blog-posts-sections__column--reverse .blog-posts-sections__row {
    flex: initial;
  }
}
.blog-posts-sections__row {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
@media only screen and (min-width: 992px) {
  .blog-posts-sections__row {
    flex-direction: row;
  }
}
@media only screen and (min-width: 1200px) {
  .blog-posts-sections__row {
    gap: 3rem;
  }
}
.blog-posts-sections__row .blog-featured-posts {
  flex: calc(50% - 1rem) 0 0;
  padding: 0;
}
@media only screen and (min-width: 1200px) {
  .blog-posts-sections__row .blog-featured-posts {
    flex-basis: calc(50% - 1.5rem);
  }
}
.blog-posts-sections__row .blog-featured-posts__container {
  max-width: calc(100vw - 2rem);
}
.blog-posts-sections__row .blog-featured-posts__container .blog-featured-posts__title-wrapper {
  width: calc(100% - 2rem);
}
@media only screen and (min-width: 576px) {
  .blog-posts-sections__row .blog-featured-posts__container .blog-featured-posts__title-wrapper {
    width: 100%;
  }
}
.blog-posts-sections__row .blog-featured-posts__container .blog-featured-posts__wrapper {
  flex-wrap: nowrap;
  overflow-x: auto;
}
@media only screen and (min-width: 576px) {
  .blog-posts-sections__row .blog-featured-posts__container .blog-featured-posts__wrapper {
    overflow-x: initial;
  }
}
.blog-posts-sections__row .blog-featured-posts__container .blog-featured-posts__wrapper .blog-post-card {
  flex: 260px 0 0;
  height: auto;
}
@media only screen and (min-width: 576px) {
  .blog-posts-sections__row .blog-featured-posts__container .blog-featured-posts__wrapper .blog-post-card {
    flex-basis: calc(50% - 1rem);
  }
}
@media only screen and (min-width: 1200px) {
  .blog-posts-sections__row .blog-featured-posts__container .blog-featured-posts__wrapper .blog-post-card {
    flex-basis: calc(50% - 1.5rem);
  }
}
.blog-posts-sections__row .blog-featured-posts--column .blog-featured-posts__wrapper {
  height: auto;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 2rem;
}
.blog-posts-sections__row .blog-featured-posts--column .blog-featured-posts__wrapper .blog-post-card {
  flex: 100%;
  min-height: initial;
  background-color: transparent;
}
.blog-posts-sections__row .blog-featured-posts--column .blog-featured-posts__wrapper .blog-post-card__anchor {
  height: auto;
  display: flex;
  gap: 2rem;
}
.blog-posts-sections__row .blog-featured-posts--column .blog-featured-posts__wrapper .blog-post-card__image {
  display: none;
  flex: 120px 0 0;
  height: 70px;
}
@media only screen and (min-width: 768px) {
  .blog-posts-sections__row .blog-featured-posts--column .blog-featured-posts__wrapper .blog-post-card__image {
    display: initial;
  }
}
.blog-posts-sections__row .blog-featured-posts--column .blog-featured-posts__wrapper .blog-post-card__body {
  padding: 0.5rem 0;
  gap: 0.5rem;
}
.blog-posts-sections__row .blog-featured-posts--column .blog-featured-posts__wrapper .blog-post-card__category-title {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  color: rgb(var(--primary-color));
  text-transform: uppercase;
  font-size: 1.3rem;
  line-height: 1.3rem;
}
@media only screen and (min-width: 768px) {
  .blog-posts-sections__row .blog-featured-posts--column .blog-featured-posts__wrapper .blog-post-card__category-title {
    color: #d1d1d1;
  }
}
.blog-posts-sections__row .blog-featured-posts--column .blog-featured-posts__wrapper .blog-post-card__category-title--green {
  color: rgb(var(--leaf-green));
}
.blog-posts-sections__row .blog-featured-posts--column .blog-featured-posts__wrapper .blog-post-card__category-title__icon {
  fill: rgb(var(--primary-color));
  vertical-align: bottom;
}
@media only screen and (min-width: 768px) {
  .blog-posts-sections__row .blog-featured-posts--column .blog-featured-posts__wrapper .blog-post-card__category-title__icon {
    display: none;
  }
}
.blog-posts-sections__row .blog-featured-posts--column .blog-featured-posts__wrapper .blog-post-card__category-title__icon--green {
  fill: rgb(var(--leaf-green));
}
.blog-posts-sections__row .blog-featured-posts--column .blog-featured-posts__wrapper .blog-post-card__category {
  display: none;
  right: initial;
  left: 85px;
}
@media only screen and (min-width: 768px) {
  .blog-posts-sections__row .blog-featured-posts--column .blog-featured-posts__wrapper .blog-post-card__category {
    display: flex;
  }
}
.blog-posts-sections__row .blog-featured-posts--column .blog-featured-posts__wrapper .blog-post-card__link {
  display: none;
}
.blog-posts-sections__row .blog-featured-posts--column .blog-featured-posts__wrapper .blog-post-card::after {
  content: initial;
}
.blog-posts-sections__row .blog-featured-posts--4 {
  flex-basis: 100%;
}
@media only screen and (min-width: 576px) {
  .blog-posts-sections__row .blog-featured-posts--4 .blog-featured-posts__container .blog-featured-posts__wrapper {
    flex-wrap: wrap;
  }
}
@media only screen and (min-width: 992px) {
  .blog-posts-sections__row .blog-featured-posts--4 .blog-featured-posts__container .blog-featured-posts__wrapper .blog-post-card {
    flex: calc(25% - 1.5rem) 0 0;
  }
}
@media only screen and (min-width: 1200px) {
  .blog-posts-sections__row .blog-featured-posts--4 .blog-featured-posts__container .blog-featured-posts__wrapper .blog-post-card {
    flex-basis: calc(25% - 2.25rem);
  }
}
.blog-posts-sections__row .blog-featured-posts--full-width {
  flex-basis: 100%;
}
.blog-posts-sections__row .blog-featured-posts--colleague {
  flex-basis: 100%;
}
.blog-posts-sections__row .blog-featured-posts--colleague .blog-featured-posts__container .blog-featured-posts__wrapper {
  overflow-x: initial;
}
.blog-posts-sections__row .blog-featured-posts--colleague .blog-featured-posts__container .blog-featured-posts__wrapper .blog-post-card {
  flex-basis: 100%;
  min-height: 383px;
}
@media only screen and (min-width: 576px) {
  .blog-posts-sections__row .blog-featured-posts--colleague .blog-featured-posts__container .blog-featured-posts__wrapper .blog-post-card {
    min-height: 30rem;
  }
}
.blog-posts-sections__row .blog-featured-posts--colleague .blog-featured-posts__container .blog-featured-posts__wrapper .blog-post-card::after {
  content: initial;
}
.blog-posts-sections__row .blog-featured-posts--colleague .blog-featured-posts__container .blog-featured-posts__wrapper .blog-post-card__image {
  height: 20rem;
}
@media only screen and (min-width: 576px) {
  .blog-posts-sections__row .blog-featured-posts--colleague .blog-featured-posts__container .blog-featured-posts__wrapper .blog-post-card__image {
    height: 100%;
  }
}
.blog-posts-sections__row .blog-featured-posts--colleague .blog-featured-posts__container .blog-featured-posts__wrapper .blog-post-card__body {
  height: calc(100% - 20rem);
  border-bottom: 5px solid rgb(var(--primary-color));
}
@media only screen and (min-width: 576px) {
  .blog-posts-sections__row .blog-featured-posts--colleague .blog-featured-posts__container .blog-featured-posts__wrapper .blog-post-card__body {
    position: absolute;
    top: 2rem;
    left: 2rem;
    bottom: 2rem;
    width: 22rem;
    height: auto;
    background: rgb(var(--white));
  }
}
.blog-posts-sections__row .blog-featured-posts--colleague .blog-featured-posts__container .blog-featured-posts__wrapper .blog-post-card__title {
  position: relative;
}
.blog-posts-sections__row .blog-featured-posts--colleague .blog-featured-posts__container .blog-featured-posts__wrapper .blog-post-card__title::after {
  content: "";
  position: absolute;
  top: -38px;
  left: 1.5rem;
  width: 2.5rem;
  height: 2rem;
  background-color: rgb(var(--white));
  clip-path: polygon(50% 0, 0% 100%, 100% 100%);
}
@media only screen and (min-width: 576px) {
  .blog-posts-sections__row .blog-featured-posts--colleague .blog-featured-posts__container .blog-featured-posts__wrapper .blog-post-card__title::after {
    top: 1rem;
    left: initial;
    right: -4.5rem;
    width: 3rem;
    height: 3rem;
    clip-path: polygon(0% 100%, 0% 0%, 100% 50%);
  }
}
.blog-posts-sections__panel {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2rem;
  padding: 10rem 4rem 4rem 7rem;
  background-color: rgb(var(--primary-color));
}
@media only screen and (min-width: 992px) {
  .blog-posts-sections__panel {
    align-items: center;
    padding: 8rem;
  }
}
@media only screen and (min-width: 1200px) {
  .blog-posts-sections__panel {
    padding: 6rem;
  }
}
@media only screen and (min-width: 1630px) {
  .blog-posts-sections__panel {
    width: 100%;
    align-items: flex-start;
    margin-top: 3rem;
  }
}
@media only screen and (min-width: 1920px) {
  .blog-posts-sections__panel {
    padding: 10rem;
  }
}
.blog-posts-sections__panel::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: -2px;
  left: 0;
  background-image: url(../../images/icon-bruggetje.svg);
  background-repeat: no-repeat;
  background-size: 7rem;
  z-index: 0;
}
@media only screen and (min-width: 992px) {
  .blog-posts-sections__panel::before {
    background-size: 10rem;
  }
}
.blog-posts-sections__panel__title {
  color: rgb(var(--white));
  font-size: 4rem;
  z-index: 1;
}
.blog-posts-sections__panel__text {
  color: rgb(var(--white));
  z-index: 1;
}
@media only screen and (min-width: 992px) {
  .blog-posts-sections__panel__text {
    font-size: 2rem;
    text-align: center;
  }
}
@media only screen and (min-width: 1630px) {
  .blog-posts-sections__panel__text {
    text-align: initial;
  }
}
.blog-posts-sections__panel .button {
  z-index: 1;
}
@media only screen and (min-width: 1630px) {
  .blog-posts-sections__panel .button {
    width: 100%;
  }
}