.banner {
  max-width: 1100px;
  box-sizing: border-box;
  position: relative;
}
.banner .banner-content .banner-title {
  font-size: var(--font-size-big);
  font-weight: 900;
  color: #ffffff;
  text-wrap: balance;
  line-height: 1;
}
.banner .banner-content .banner-text {
  text-wrap: balance;
  margin-bottom: var(--marg);
  color: #ffffff;
}
.banner .banner-content .advantages {
  margin-bottom: var(--marg);
}
.banner .banner-content .advantages .item {
  display: flex;
  margin-bottom: var(--mid-marg);
  align-items: center;
}
.banner .banner-content .advantages .item .icon {
  margin-right: var(--mid-marg);
  background: #ffffff;
}
.banner .banner-content .advantages .item .text {
  text-wrap: balance;
  color: #ffffff;
}
.banner .banner-content .button {
  margin-bottom: var(--marg);
  background-color: oklch(from var(--_primary) calc(l - 0.1) c h);
}
.banner .banner-content .button:hover {
  background-color: oklch(from var(--_primary) calc(l - 0.15) c h);
}
.banner .banner-content .banner-title {
  margin-bottom: var(--marg);
}
.banner picture {
  display: block;
  right: 0;
}
.banner picture img {
  max-height: 100%;
  max-width: 100%;
  image-rendering: auto;
  width: auto;
  height: auto;
  display: block;
  margin: 0 auto;
}
.banner::after {
  display: block;
  position: absolute;
  background-image: var(--primgrad);
  border-radius: var(--radius);
  content: "";
  z-index: -1;
}

.banner.over-img-r {
  position: relative;
  display: grid;
  align-items: end;
}

@media (min-width: 600px) {
  .banner {
    margin: var(--marg) auto;
    padding: var(--mid-marg);
  }
  .banner .bc-column {
    display: grid;
    grid-auto-flow: column;
  }
  .banner::after {
    width: 96%;
    height: calc(95% - var(--marg));
    bottom: var(--mid-marg);
    left: 2%;
  }
  .banner.img-bottom .banner-content {
    padding: calc(var(--marg) * 3) calc(var(--marg) * 3) var(--marg) calc(var(--marg) * 3);
  }
  .banner.over-img-r {
    grid-template-columns: 1fr 1fr;
  }
  .banner.over-img-r .banner-content {
    padding: calc(var(--marg) * 3) 0 calc(var(--marg) * 3) calc(var(--marg) * 3);
  }
}
@media (max-width: 599px) {
  .banner {
    margin: var(--larg-marg) auto;
    padding: 0 var(--mid-marg);
  }
  .banner::after {
    width: 90%;
    height: 100%;
    bottom: 0;
    left: 5%;
  }
  .banner.over-img-r, .banner.img-bottom {
    grid-template-columns: 1fr;
  }
  .banner.over-img-r .banner-content, .banner.img-bottom .banner-content {
    padding: calc(var(--marg) * 2) calc(var(--marg) * 2) 0 calc(var(--marg) * 2);
  }
  .banner.over-img-r .banner-content button, .banner.img-bottom .banner-content button {
    width: 90%;
  }
}

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