.filter {
  position: fixed;
  z-index: -1;
  top: -100.1vh;
  height: 100vh;
  width: 100vw;
  transition: top 0.6s cubic-bezier(0.25, 0.9, 0.25, 1);
  background-color: #f1edee;
}

.filter.opened {
  top: 0;
}

.filter.zindex {
  z-index: 3;
}

.filter-title {
  position: absolute;
  top: 34px;
  left: 50%;
  transform: translateX(-50%);
  font-family: jaf-lapture-display;
  font-size: 4.6vmin;
  line-height: 62.1px;
  line-height: 6vmin;
}

.filter-closer {
  position: absolute;
  top: 18px;
  right: 18px;
  cursor: pointer;
}

.filters-container {
  margin: 127px 38px 0 38px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
  gap: 3vmin;
  max-width: 100vw;
}

.filter-option {
  width: 20vmin;
  height: 20vmin;
  border: solid 1px #000000;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.filter-option:hover {
  color: #fff;
  background-color: #222121;
}

.filter-option.active-filter {
  color: #fff;
  background-color: #222121;
}

.filter-option span {
  font-family: SuperGroteskA-MedLF;
  font-size: 6vmin;
}

@media only screen and (max-width: 768px) {
  .filters-container {
    margin: 70px 13px 0 13px;
  }

  .filter-title {
    position: absolute;
    top: 6px;
    line-height: 8vmin;
  }
}