.accent {
  --height: 8vw;
  --border-radius: 8vw;
  --padding-left: 5.3333333333vw;
  --padding-right: 5.3333333333vw;
}
@media (min-width: 720px) {
  .accent {
    --height: 2.8125vw;
  }
}
@media (min-width: 720px) {
  .accent {
    --border-radius: 2.8125vw;
  }
}
@media (min-width: 720px) {
  .accent {
    --padding-left: 1.5625vw;
  }
}
@media (min-width: 720px) {
  .accent {
    --padding-right: 1.5625vw;
  }
}
@media (min-width: 1281px) {
  .accent {
    --height: 1.875vw;
  }
}
@media (min-width: 1281px) {
  .accent {
    --border-radius: 1.875vw;
  }
}
@media (min-width: 1281px) {
  .accent {
    --padding-left: 1.0416666667vw;
  }
}
@media (min-width: 1281px) {
  .accent {
    --padding-right: 1.0416666667vw;
  }
}
@media (min-width: 2400px) {
  .accent {
    --height: 45px;
  }
}
@media (min-width: 2400px) {
  .accent {
    --border-radius: 45px;
  }
}
@media (min-width: 2400px) {
  .accent {
    --padding-left: 25px;
  }
}
@media (min-width: 2400px) {
  .accent {
    --padding-right: 25px;
  }
}
.accent {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--color-mint);
  color: var(--color-wetty-asphalt);
  font-feature-settings: "clig" off, "liga" off;
  height: var(--height);
  border-radius: var(--border-radius);
  padding-left: var(--padding-left);
  padding-right: var(--padding-right);
}