@use "src/app/styles/variables" as *;

.selects-wrapper {
  margin-top: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;

  @media (max-width: $small) {
    flex-wrap: wrap;
  }
}

.select-wrapper {
  width: 15%;

  @media (max-width: $small) {
    width: 100%;
  }

  & + .select-wrapper {
    margin-left: 16px;

    @media (max-width: $small) {
      margin-top: 0px;
      margin-left: 0;
    }
  }
}

.select {
  border: 0;
  width: 100%;
}

.products-wrapper {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  margin-top: 8px;

  @media (min-width: $small) and (max-width: $normal) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  @media (max-width: $small) {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 0;
  }
}

.product {
  width: 100%;
  margin: 0;

  @media (max-width: $small) {
    width: 100%;
    margin: 0;
  }
}
