.hero {
  position: relative;
  overflow: clip;
  padding: 0.1px 0;

  .image {
    position: absolute;
    inset: 0;
  }

  h1 {
    color: white;
    margin: 10rem 0;
  }

  .expertises {
    position: relative;
    margin: 4rem 0;
  }
}

.expertises-element {
  width: 100%;
}

.expertises-lijst {
  width: 100%;
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  justify-content: space-around;
  gap: 1rem;

  @media (max-width: 768px) {
    flex-wrap: wrap;
  }
}

[data-calculation-element] {
  position: absolute;
  transform: translateX(-200vw);
  .expertises-lijst {
    gap: 0;
    width: 100%;
  }
}

.expertises-item {
  background: #ff3d54;
  text-align: center;
  color: white;

  @media (max-width: 768px) {
    width: 100%;
  }

  a {
    display: block;
    color: currentColor;
    font-weight: bold;
    font-size: 1.5rem;
    padding: 1.25rem 1rem;

    @media (min-width: 769px) and (max-width: 992px) {
      font-size: 1rem;
      font-weight: normal;
      padding: 1rem 0.75rem;
    }

    &:hover {
      text-decoration: none;
      color: currentColor;
      scale: 1.05;
    }
  }
}

.expertises-item--rood {
  background: #ff3d54;
}

.expertises-item--blauw {
  background: #0078ff;
}

.expertises-item--geel {
  background: #fff042;
  color: black;
}

.expertises-item--groen {
  background: #009e77;
}

.expertises-item--grijs {
  background: #b0b0b0;
  color: black;
}

[data-calculation-element] .expertises-item {
  background: pink;
}