.infobox {
  margin: 0 auto;
  position: relative;
  max-width: unset !important;
  width: 100% !important;
}
.infobox.half-bg::before {
  content: "";
  display: block;
  position: absolute;
  background: var(--backgroundColorDark);
  width: 100%;
  height: 50%;
  max-height: 90%;
  left: 0;
  top: 0;
}
.infobox-inner {
  position: relative;
  max-width: var(--maxContent);
  width: var(--baseWidth);
  margin: 0 auto;
}
.infobox-inner::before {
  content: "";
  display: block;
  position: absolute;
  bottom: -5px;
  background: var(--mainGradient);
  border-radius: 0px 0px 0px 15px;
  width: 50%;
  height: 40px;
  max-height: 90%;
  left: -5px;
}
.infobox .content {
  box-shadow: 0 4px 25px 0 rgba(var(--contrastColorRGB), 0.15);
  border-radius: var(--baseBorderRadius);
  position: relative;
  background: var(--contrastColorInverted);
  display: flex;
  padding: 30px;
  gap: 20px;
  max-width: 67%;
  font-family: var(--miniFont);
  font-size: var(--miniFontSize);
  line-height: 22px;
}
@media (max-width: 960px) {
  .infobox .content {
    max-width: 100%;
  }
}
.infobox .content .info-icon {
  width: 30px;
  height: 30px;
  mask: url("img/info.svg") no-repeat center center/100% auto;
  background: var(--mainGradient);
}
.infobox .content p {
  width: fit-content;
}