.bonus-hero {
  --accent-color: var(--colors-accident);
  --accent-background: var(--colors-accident-10);
  display: flex;
  flex-direction: row;
  align-self: flex-start;
  justify-content: flex-start;
  flex-wrap: wrap;
  position: relative;
  row-gap: 4.1667vw;
}
@media (min-width: 1200px) {
  .bonus-hero {
    flex-direction: column;
    justify-content: center;
    min-height: 300px;
    padding: 20px 40px;
    width: 100%;
    row-gap: 20px;
  }
}
.bonus-hero.bonusy {
  --accent-color: var(--colors-accident);
  --accent-background: var(--colors-accident-10);
}
.bonus-hero.promokody {
  --accent-color: var(--colors-primary);
  --accent-background: var(--colors-primary-10);
}
.bonus-hero.fribety {
  --accent-color: var(--colors-purple);
  --accent-background: var(--colors-purple-10);
}
.bonus-hero.akcii {
  --accent-color: var(--Red);
  --accent-background: var(--Red-10);
}
.bonus-hero__image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 2.7778vw;
}
@media (min-width: 1200px) {
  .bonus-hero__image {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    -o-object-fit: cover;
    border-radius: 20px;
    z-index: -1;
  }
}
.bonus-hero__logo {
  margin: -6.9444vw auto 0;
  min-width: 51%;
  padding: 1.3889vw 5.5556vw;
  border-radius: 5.5556vw;
  background: var(--background-secondary);
}
@media (min-width: 1200px) {
  .bonus-hero__logo {
    margin: 0;
    padding: 0;
    border-radius: 0;
    background: no-repeat;
  }
}
.bonus-hero__logo img {
  display: block;
  height: 11.1111vw;
  width: auto;
}
@media (min-width: 1200px) {
  .bonus-hero__logo img {
    height: 50px;
  }
}
.bonus-hero__info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  row-gap: 1.3889vw;
  width: 50%;
  padding: 0 2.22222vw;
}
@media (min-width: 1200px) {
  .bonus-hero__info {
    row-gap: 4px;
    width: auto;
    padding: 0;
  }
}
.bonus-hero__type {
  display: block;
  position: relative;
  color: var(--text-white);
  font-size: 3.3333vw;
  font-weight: 500;
  line-height: 14px;
  padding: 0.8333vw 0.8333vw 0.8333vw 1.6667vw;
  border-radius: 1.1111vw 0 0 1.1111vw;
  background: var(--accent-color);
}
@media (min-width: 1200px) {
  .bonus-hero__type {
    font-size: 12px;
    font-style: italic;
    font-weight: 500;
    line-height: 14px;
    padding: 3px 3px 3px 6px;
    border-radius: 4px 0 0 4px;
  }
}
.bonus-hero__type:after {
  content: "";
  display: block;
  position: absolute;
  left: calc(100% - 1px);
  top: 0;
  width: 2.2222vw;
  height: 100%;
  background-color: var(--accent-color);
  mask: url("../../../assets/img/ui/bonus-hero-type.svg") no-repeat left top/auto 100%;
  -webkit-mask: url("../../../assets/img/ui/bonus-hero-type.svg") no-repeat left top/auto 100%;
}
@media (min-width: 1200px) {
  .bonus-hero__type:after {
    width: 8px;
  }
}
.bonus-hero__sum {
  color: var(--text-black);
  font-size: 5.5556vw;
  font-weight: 500;
  line-height: 6.6667vw;
}
@media (min-width: 1200px) {
  .bonus-hero__sum {
    color: var(--Background-main);
    font-size: 32px;
    font-weight: 600;
    line-height: 38px;
    letter-spacing: 3.2px;
  }
}
.bonus-hero__rating {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-start;
  width: 50%;
  padding: 0 2.22222vw;
  row-gap: 1.3889vw;
}
@media (min-width: 1200px) {
  .bonus-hero__rating {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    width: auto;
    padding: 0;
    gap: 10px;
  }
}
.bonus-hero__stars {
  display: flex;
  flex-direction: row;
  gap: 1.6667vw;
}
@media (min-width: 1200px) {
  .bonus-hero__stars {
    gap: 6px;
  }
}
.bonus-hero__stars svg {
  display: block;
  width: 3.8889vw;
  height: auto;
}
@media (min-width: 1200px) {
  .bonus-hero__stars svg {
    width: 20px;
  }
}
.bonus-hero__rating_counter {
  color: var(--Light-gray);
  font-size: 3.3333vw;
  font-weight: 400;
}
@media (min-width: 1200px) {
  .bonus-hero__rating_counter {
    font-size: 14px;
  }
}
.bonus-hero__benefits {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 2.2222vw;
  padding: 0 2.22222vw;
}
@media (min-width: 1200px) {
  .bonus-hero__benefits {
    gap: 12px;
    padding: 0;
  }
}
.bonus-hero__benefit {
  display: block;
  position: relative;
  padding-left: 3.3333vw;
  color: var(--text-black);
  font-size: 2.7778vw;
  font-weight: 400;
  line-height: 3.3333vw;
}
@media (min-width: 1200px) {
  .bonus-hero__benefit {
    color: var(--Background-main);
    padding: 4px 0 4px 30px;
    font-size: 14px;
    line-height: 17px;
  }
}
.bonus-hero__benefit svg {
  display: block;
  position: absolute;
  left: 0;
  top: calc(50% - 1.6667vw);
  width: 3.0556vw;
  height: 3.3333vw;
}
@media (min-width: 1200px) {
  .bonus-hero__benefit svg {
    top: calc(50% - 12px);
    width: 22px;
    height: 24px;
  }
}
.bonus-hero__buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0 2.22222vw;
  row-gap: 1.3889vw;
}
@media (min-width: 1200px) {
  .bonus-hero__buttons {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 0;
    gap: 10px;
  }
}
.bonus-hero__buttons > * {
  width: 100%;
}
@media (min-width: 1200px) {
  .bonus-hero__buttons > * {
    width: auto;
  }
}

.bonus-params {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 1.1111vw;
  padding: 0 2.22222vw;
}
@media (min-width: 1200px) {
  .bonus-params {
    gap: 8px;
    padding: 0;
  }
}
.bonus-params__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: calc(50% - 0.5556vw);
  padding: 3.3333vw;
  gap: 1.6667vw;
  border-radius: 2.2222vw;
  background: var(--Background-second);
}
@media (min-width: 1200px) {
  .bonus-params__item {
    width: calc(16.6% - 7px);
    gap: 5px;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 1px 4px 0 #E3EBFC, 0 24px 48px 0 rgba(230, 235, 245, 0.4);
  }
}
.bonus-params__value {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.6667vw;
  color: var(--text-line-black);
  font-size: 3.8889vw;
  font-weight: 500;
}
@media (min-width: 1200px) {
  .bonus-params__value {
    gap: 10px;
    font-size: 18px;
  }
}
.bonus-params__value svg {
  display: block;
  height: 6.6667vw;
  width: auto;
}
@media (min-width: 1200px) {
  .bonus-params__value svg {
    height: 24px;
  }
}
.bonus-params__label {
  color: var(--text-black);
  text-align: center;
  font-size: 2.7778vw;
  font-weight: 400;
  line-height: 3.3333vw;
}
@media (min-width: 1200px) {
  .bonus-params__label {
    color: var(--text-gray);
    font-size: 12px;
    font-weight: 400;
    line-height: 14px;
  }
}

.single-content {
  max-width: 100%;
  overflow: auto;
}
.single-content__dates {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6.6667vw;
}
@media (min-width: 1200px) {
  .single-content__dates {
    gap: 28px;
  }
}
.single-content__publication_data {
  position: relative;
  padding: 2.2222vw 1px 2.2222vw 2.7778vw;
  color: var(--text-gray);
  font-size: 3.3333vw;
  font-weight: 400;
  line-height: 3.8889vw;
  border-radius: 2.2222vw 0 0 2.2222vw;
  background: var(--background-blue);
}
@media (min-width: 1200px) {
  .single-content__publication_data {
    padding: 8px 1px 8px 10px;
    border-radius: 8px 0 0 8px;
    font-size: 14px;
    line-height: 17px;
  }
}
.single-content__publication_data:after {
  content: "";
  display: block;
  position: absolute;
  left: 100%;
  top: 0;
  height: 100%;
  width: 3.3333vw;
  user-select: none;
  background-color: var(--background-blue);
  mask: url("../../../assets/img/ui/bonus-type-background.svg") no-repeat left top/auto 100%;
  -webkit-mask: url("../../../assets/img/ui/bonus-type-background.svg") no-repeat left top/auto 100%;
}
@media (min-width: 1200px) {
  .single-content__publication_data:after {
    width: 12px;
  }
}
.single-content__update_data {
  position: relative;
  padding: 2.2222vw 2.7778vw 2.2222vw 1px;
  color: var(--colors-accident);
  font-size: 3.3333vw;
  font-weight: 400;
  line-height: 3.8889vw;
  border-radius: 0 2.2222vw 2.2222vw 0;
  background: var(--colors-accident-10);
}
@media (min-width: 1200px) {
  .single-content__update_data {
    padding: 8px 10px 8px 1px;
    border-radius: 0 8px 8px 0;
    font-size: 14px;
    line-height: 17px;
  }
}
.single-content__update_data:after {
  content: "";
  display: block;
  position: absolute;
  right: 100%;
  top: 0;
  height: 100%;
  width: 3.3333vw;
  user-select: none;
  background-color: var(--colors-accident-10);
  mask: url("../../../assets/img/ui/bonus-finish-background.svg") no-repeat right top/auto 100%;
  -webkit-mask: url("../../../assets/img/ui/bonus-finish-background.svg") no-repeat right top/auto 100%;
}
@media (min-width: 1200px) {
  .single-content__update_data:after {
    width: 12px;
  }
}
.single-content__tags {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 1.1111vw;
}
@media (min-width: 1200px) {
  .single-content__tags {
    gap: 5px;
  }
}
.single-content__tag {
  padding: 2.5vw 3.3333vw;
  color: var(--text-black);
  font-size: 3.3333vw;
  font-weight: 500;
  line-height: 3.8889vw;
  border-radius: 2.2222vw;
  border: 1px solid var(--line-gray);
  text-decoration: none;
}
@media (min-width: 1200px) {
  .single-content__tag {
    padding: 9.5px 20px;
    font-size: 14px;
    line-height: 17px;
    border-radius: 12px;
  }
}
@media (min-width: 1200px) {
  .single-content__text {
    margin-top: 20px;
    padding: 12px;
    border-radius: 16px;
    background: var(--background-main);
  }
}
.single-content__links {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-between;
  gap: 4.4444vw;
  padding: 0 2.22222vw;
}
@media (min-width: 1200px) {
  .single-content__links {
    flex-direction: row;
    gap: 100px;
    padding: 0 20px;
  }
}
.single-content__prev, .single-content__next {
  display: flex;
  align-self: center;
  justify-content: flex-start;
  color: var(--colors-gray);
  text-decoration: none;
  font-size: 3.8889vw;
  font-weight: 400;
  line-height: 4.7222vw;
}
@media (min-width: 1200px) {
  .single-content__prev, .single-content__next {
    max-width: calc(50% - 50px);
    font-size: 14px;
    line-height: 17px;
  }
}
.single-content__prev span, .single-content__next span {
  display: block;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  max-width: 100%;
}
.single-content__prev strong, .single-content__next strong {
  font-weight: 500;
}

/*# sourceMappingURL=critical.css.map */