.bonuses {
  display: flex;
  flex-wrap: wrap;
  gap: var(--margin-heading);
}
.bonuses_item {
  display: flex;
  flex: 1 0 310px;
  flex-direction: column;
  row-gap: var(--margin-heading);
  padding: var(--margin-block);
  color: var(--white);
  background-color: var(--accent);
  border: 1px solid var(--yellow-400);
  border-radius: 10px;
}
.bonuses_title {
  display: grid;
  row-gap: var(--margin-text);
  justify-items: center;
  color: var(--yellow-400);
  text-align: center;
  border: solid 1px currentColor;
  border-radius: 10px;
}
@media (min-width: 740px) {
  .bonuses_title {
    padding: 10px;
  }
}
@media (max-width: 739.98px) {
  .bonuses_title {
    padding: 6px;
  }
}
@media (max-width: 739.98px) {
  .bonuses_icon {
    width: auto;
    height: 30px;
  }
}
.bonuses_descr {
  display: grid;
}
@media (min-width: 740px) {
  .bonuses_descr {
    row-gap: 10px;
    padding-inline: 10px;
  }
}
@media (max-width: 739.98px) {
  .bonuses_descr {
    row-gap: 6px;
    padding-inline: 6px;
  }
}
.bonuses_descr_item {
  position: relative;
  padding: 2px;
  padding-inline: calc(var(--dot-size) * 5) calc(var(--dot-size) * 2);
  background-color: var(--white-10);
  border-radius: 10px;
}
@media (min-width: 740px) {
  .bonuses_descr_item {
    --dot-size: 5px;
  }
}
@media (max-width: 739.98px) {
  .bonuses_descr_item {
    --dot-size: 4px;
  }
}
.bonuses_descr_item::before {
  position: absolute;
  top: calc(50% - var(--dot-size) / 2);
  left: calc(var(--dot-size) * 2);
  width: var(--dot-size);
  height: var(--dot-size);
  content: "";
  background-color: currentColor;
  border-radius: 50%;
}
.bonuses_btn {
  margin-top: auto;
}

.bonuses2 {
  display: grid;
  gap: var(--margin-heading);
}
@media (min-width: 1200px) {
  .bonuses2 {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 1199.98px) {
  .bonuses2 {
    grid-template-columns: repeat(2, 1fr);
  }
}
.bonuses2_item {
  display: flex;
  flex-direction: column;
  row-gap: var(--margin-heading);
  padding: var(--margin-block);
  background-color: var(--yellow-100);
  border: 1px solid var(--yellow-400);
  border-radius: 10px;
}
.bonuses2_icon {
  align-self: center;
  width: fit-content;
  padding: var(--margin-heading);
  color: var(--white);
  background-color: var(--yellow-400);
  border-radius: 50%;
}
@media (max-width: 739.98px) {
  .bonuses2_icon svg {
    width: 28px;
    height: 28px;
  }
}
.bonuses2_content {
  display: grid;
  row-gap: var(--margin-text);
  text-align: center;
}

.bonuses2_btn {
	margin-top: auto;
}

.bonuses3 {
  display: grid;
  gap: var(--margin-heading);
}
@media (min-width: 1200px) {
  .bonuses3 {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (max-width: 1199.98px) {
  .bonuses3 {
    grid-auto-flow: column;
  }
}
@media (min-width: 740px) and (max-width: 1199.98px) {
  .bonuses3 {
    grid-auto-columns: 300px;
  }
}
@media (max-width: 739.98px) {
  .bonuses3 {
    grid-auto-columns: 220px;
  }
}
.bonuses3_item {
  display: flex;
  flex-direction: column;
  row-gap: var(--margin-heading);
  padding: var(--margin-block);
  background-color: var(--slate-100);
  border: 1px solid var(--red-400);
  border-radius: 10px;
}
.bonuses3_pic {
  align-self: center;
  object-fit: contain;
}
.bonuses3_content {
  display: grid;
  text-align: center;
}
@media (min-width: 740px) {
  .bonuses3_content {
    row-gap: 10px;
  }
}
@media (max-width: 739.98px) {
  .bonuses3_content {
    row-gap: 6px;
  }
}
.bonuses3_btn {
  margin-top: auto;
}