@font-face {
  font-family: "Outfit";
  src: url("../assets/fonts/outfit-variable.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

.be-pubquiz-preview {
  margin: 0;
  min-width: 320px;
  background: #ffffff;
}

.be-pubquiz-preview *,
.be-pubquiz-preview *::before,
.be-pubquiz-preview *::after {
  box-sizing: border-box;
}

.be-how-pubquiz {
  --be-how-plum: #501f3a;
  --be-how-coral: #ff8359;
  --be-how-magenta: #a43886;
  --be-how-grid: 1300px;
  position: relative;
  overflow: hidden;
  padding-block: clamp(62px, 7.6vw, 108px);
  color: var(--be-how-plum);
  background: #ffffff;
  font-family: "Outfit", Arial, sans-serif;
}

.be-activiteiten-page .be-how-pubquiz > .be-container {
  width: min(calc(100% - 160px), var(--be-how-grid));
  margin-inline: auto;
  padding-inline: 0;
}

.be-how-pubquiz .be-row {
  --be-how-grid-gutter-x: 40px;
  display: flex;
  flex-wrap: wrap;
  margin-inline: calc(var(--be-how-grid-gutter-x) * -0.5);
}

.be-how-pubquiz .be-row > * {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding-inline: calc(var(--be-how-grid-gutter-x) * 0.5);
}

.be-how-pubquiz .be-row--align-center {
  align-items: center;
}

.be-how-pubquiz .be-col-12 {
  flex: 0 0 auto;
  width: 100%;
}

.be-how-pubquiz__visual {
  position: relative;
  isolation: isolate;
  width: min(100%, 580px);
  margin-inline: auto;
}

.be-how-pubquiz__image-mask {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1466 / 1280;
  overflow: visible;
  background: transparent;
}

img.be-how-pubquiz__image-mask {
  object-fit: cover;
  object-position: center;
  overflow: hidden;
  -webkit-mask: url("../assets/hoe-werkt-de-pubquiz/pubquiz-image-mask.svg") center / contain no-repeat;
  mask: url("../assets/hoe-werkt-de-pubquiz/pubquiz-image-mask.svg") center / contain no-repeat;
}

.be-how-pubquiz__image {
  pointer-events: none;
}

.be-how-pubquiz__shape {
  position: absolute;
  z-index: 1;
  display: block;
  pointer-events: none;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.be-how-pubquiz__shape--lavender {
  top: 1.3%;
  left: -0.6%;
  width: 61%;
  aspect-ratio: 918 / 440;
  background-image: url("../assets/hoe-werkt-de-pubquiz/zigzag-lavender.svg");
}

.be-how-pubquiz__shape--mint {
  right: -5.5%;
  bottom: -4.8%;
  width: 59%;
  aspect-ratio: 918 / 440;
  background-image: url("../assets/hoe-werkt-de-pubquiz/zigzag-mint.svg");
}

.be-how-pubquiz__content {
  position: relative;
  z-index: 2;
  padding-block: 8px;
}

.be-how-pubquiz__title {
  max-width: 480px;
  margin: 0;
  color: var(--be-how-plum);
  font-size: 44px;
  font-weight: 700;
  line-height: 1.2;
}

.be-how-pubquiz__title span {
  background: linear-gradient(90deg, #ff965e 0%, #ff5b62 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.be-how-pubquiz__intro {
  max-width: 625px;
  margin: 20px 0 0;
  color: var(--be-how-plum);
  font-size: 18px;
  font-weight: 300;
  line-height: 1.4;
}

.be-how-pubquiz__points {
  display: grid;
  gap: 17px;
  margin-top: clamp(40px, 4.1vw, 61px);
}

.be-how-pubquiz__point {
  position: relative;
  z-index: 2;
  padding-left: 23px;
}

.be-how-pubquiz__point::before {
  position: absolute;
  top: 2px;
  bottom: 0;
  left: 0;
  width: 4px;
  border-radius: 999px;
  background: var(--be-how-plum);
  content: "";
}

.be-how-pubquiz__point--magenta::before {
  background: var(--be-how-magenta);
}

.be-how-pubquiz__point--coral::before {
  background: var(--be-how-coral);
}

.be-how-pubquiz__point h3 {
  margin: 0;
  color: var(--be-how-plum);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
}

.be-how-pubquiz__point p {
  max-width: 650px;
  margin: 0;
  color: var(--be-how-plum);
  font-size: 14px;
  font-weight: 300;
  line-height: 1.4;
}

.be-how-pubquiz__shape--content-mint {
  z-index: -1;
  right: 8%;
  bottom: 12%;
  width: 48%;
  aspect-ratio: 919 / 440;
  opacity: 1;
  background-image: url("../assets/hoe-werkt-de-pubquiz/content-zigzag-mint.svg");
}

@media (min-width: 1025px) {
  .be-how-pubquiz {
    padding-block: 100px;
  }

  .be-how-pubquiz .be-how-pubquiz__row {
    align-items: flex-start;
    --be-how-grid-gutter-x: 70px;
  }

  .be-how-pubquiz .be-how-pubquiz__visual-column {
    flex: 0 0 auto;
    width: 50%;
  }

  .be-how-pubquiz .be-how-pubquiz__content-column {
    flex: 0 0 auto;
    width: 50%;
  }

  .be-how-pubquiz__visual {
    width: min(100%, 580px);
    margin-inline: auto;
  }

  .be-how-pubquiz__content {
    padding: 27px 0 0;
  }

  .be-how-pubquiz__intro {
    max-width: 495px;
  }

  .be-how-pubquiz__point p {
    max-width: 495px;
  }

  .be-how-pubquiz__points {
    margin-top: 40px;
  }

}

@media (max-width: 1024px) {
  .be-how-pubquiz__row {
    row-gap: 40px;
  }

  .be-how-pubquiz__visual {
    width: min(78vw, 590px);
  }

  .be-how-pubquiz__content {
    width: min(100%, 720px);
    margin-inline: auto;
  }

  .be-how-pubquiz__title,
  .be-how-pubquiz__intro,
  .be-how-pubquiz__point p {
    max-width: none;
  }
}

@media (max-width: 640px) {
  .be-how-pubquiz {
    padding-block: 46px 54px;
  }

  .be-how-pubquiz__row {
    row-gap: 40px;
  }

  .be-how-pubquiz__visual {
    width: min(92vw, 500px);
  }

  .be-how-pubquiz__intro {
    margin-top: 16px;
  }

  .be-how-pubquiz__points {
    gap: 22px;
    margin-top: 34px;
  }

  .be-how-pubquiz__point {
    padding-left: 18px;
  }

}

@media (max-width: 1500px) and (min-width: 1201px) {
  .be-activiteiten-page .be-how-pubquiz > .be-container {
    width: min(calc(100% - 160px), var(--be-how-grid));
  }
}

@media (max-width: 1200px) and (min-width: 1025px) {
  .be-activiteiten-page .be-how-pubquiz > .be-container {
    width: min(calc(100% - 120px), var(--be-how-grid));
  }

  .be-how-pubquiz .be-row {
    --be-how-grid-gutter-x: 70px;
  }
}

@media (max-width: 1024px) and (min-width: 768px) {
  .be-activiteiten-page .be-how-pubquiz > .be-container {
    width: min(calc(100% - 80px), var(--be-how-grid));
  }
}

@media (max-width: 767px) {
  .be-activiteiten-page .be-how-pubquiz > .be-container {
    width: min(calc(100% - 40px), var(--be-how-grid));
  }

  .be-how-pubquiz__shape--content-mint {
    right: 0;
  }
}