:root {
  --aside-menu-width: 298px;
}

@media (max-width: 1279px) {
  :root {
    --aside-menu-width: 100%;
  }
}
.section-products__nav {
  color: #fff;
  position: relative;
  padding-top: var(--section-padding-top);
  padding-bottom: var(--section-padding-bottom);
  background: linear-gradient(180deg, var(--secondary), transparent) var(--dark);
  border-radius: 0 var(--base-border-radius) var(--base-border-radius) 0;
  flex-shrink: 0;
  flex-basis: calc(var(--aside-menu-width) + (100% - var(--container-width)) / 2);
}

.section-products__nav-bg {
  position: absolute;
  background: top/cover url(../web/images/bg-aside.jpg);
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: var(--base-border-radius);
}
@media (max-width: 1399px) {
  .section-products__nav-bg {
    left: calc(-1 * var(--gap-sm));
  }
}
@media (max-width: 1279px) {
  .section-products__nav-bg {
    right: calc(-1 * var(--gap-sm));
    border-radius: 0;
  }
}