.straight {
  margin: var(--gutter) auto;
}

.shiet__main > div:first-child .straight--sticky {
  margin-top: 0;
  padding-top: 0;
}

.straight--bg-top {
  background: linear-gradient(
  to top,
  transparent,
  transparent 50%,
  var(--bg) 50%,
  var(--bg)
  );
}

.straight--bg-bottom {
  background: linear-gradient(
  to bottom,
  transparent,
  transparent 45%,
  var(--bg) 45%,
  var(--bg)
  );
}

.straight--bg-top {
  padding: var(--gutter) 0 0 0;
}

.straight__top {
  margin: 0 0 45px 0;
  padding: 0 var(--gutter);
}

.straight__bottom {
  max-width: var(--max-width);
  margin: 0 auto;
  color: #112439;
  --btn-border: #112439;
  --btn-paper: #112439;
  --btn-pen: white;
  padding: var(--gutter);
}

.straight__slider {
  padding: 0 0 80px 0;
}

.straight__cards {
  display: flex;
  --gap: 35px;
  &::before,
  &::after {
    content: '';
    display: block;
    width: calc((100vw - var(--max-width)) / 2);
    flex-grow: 0;
    flex-shrink: 0;
    padding: 0 0 0 var(--gutter);
    box-sizing: border-box;
  }
}

.straight__card {
  display: inline-block;
  flex-grow: 0;
  flex-shrink: 0;
  width: calc((var(--max-width) / 3.6));
  &:not(:first-child) {
    margin-left: var(--gap);
  }
  @media (max-width: 759px) {
    width: calc(100vw - (var(--gap) * 2));
  }
}