// $mix-btn-1: #fff200;
// $mix-btn-2: #ff3838;
$mix-btn-3: #7158e2;
.productos-box {
  margin-top: 1em;
  // background-color: red;
}

.v-mix {
  &-controls {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 3rem;
    justify-content: center;
    column-gap: 1em;
  }
  &-btn {
    border: 0;
    border-radius: 4px;
    text-transform: uppercase;
    color: white;
    font-weight: 700;
    padding: 0 1rem;
    cursor: pointer;
    @include gradient-gen($mix-btn-3);
    @include boxshadow-md($mix-btn-3);
    &:nth-child(1) {
      @include gradient-gen($primary);
    }
  }
}

@media (max-width: 760px) {
  .v-mix {
    &-controls {
      grid-template-columns: repeat(2, 1fr);
      column-gap: 1rem;
      row-gap: 1rem;
    }
  }
}