.systems {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(24px, 4vw, 58px);
}

body {
  background-color: #26301f;
  background-image: linear-gradient(rgba(20, 29, 17, .62), rgba(20, 29, 17, .62)), url('/assets/koox-wood-background.png');
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  background-size: cover, cover;
  background-attachment: fixed, fixed;
}

.hero .button {
  align-self: flex-start;
  width: fit-content;
}

@media (max-width: 700px) {
  .systems { grid-template-columns: 1fr; gap: 38px; }
}