.shop{
  margin-top: 3.5rem;
}

.shop__banner{
  position: relative;
  background-image: url(/images/shop\ store.webp);
  background-size: cover;
  background-position: center;
  filter: grayscale(100%);
  min-width: 300px;
  height: 35vh;
  margin: 0 auto;
}

.shop__banner:hover{
  filter: grayscale(30%);
}

.shop__text{
  position: relative;
  color: rgb(255, 135, 55);
  text-align: center;
  transform: translateY(-200%);
  height: 50%;
  font-weight: 700;
  font-size: var(--size-8xl);   
}


#shop__products{
  margin-bottom: 5rem;
  margin-top: 2rem;
}

.shop__product-container{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, auto));
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-evenly;
  align-items: center;
  margin-top: -7rem;
}

.shop__price{
  color: rgb(50, 50, 50,.85);
  font-weight: 300;
  text-decoration: line-through;
}

.pro__price-sale{
  color: rgb(255, 100, 0);
  font-weight: 500;
}


/* xs */
/* @media (min-width: 475px) {} */

/* sm */
/* @media (min-width: 640px) {} */

/* md */
@media (min-width: 768px) {
  .shop{
    margin-top: 3.5rem;
  }
  
  .shop__banner{
    position: relative;
    background-image: url(/images/shop\ store.webp);
    background-size: cover;
    background-position: center;
    filter: grayscale(100%);
    min-width: 580px;
    height: 55vh;
    margin: 0 auto;
  }
  
  .shop__banner:hover{
    filter: grayscale(30%);
  }
  
  .shop__text{
    position: relative;
    color: rgb(255, 135, 55);
    text-align: center;
    transform: translateY(-300%);
    height: 50%;
    font-weight: 700;
    font-size: var(--size-9xl);   
  }
  
  
  #shop__products{
    margin-bottom: 5rem;
    margin-top: 2rem;
  }
  
  .shop__product-container{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, auto));
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: space-evenly;
    align-items: center;
    margin-top: -6.5rem;
  }
  
  .shop__price{
    color: rgb(50, 50, 50,.85);
    font-weight: 300;
    text-decoration: line-through;
  }
  
  .pro__price-sale{
    color: rgb(255, 100, 0);
    font-weight: 500;
  }
  
}

/* Lg */
@media (min-width: 1024px) {
   
  .shop__text{
    position: relative;
    color: rgb(255, 135, 55);
    text-align: center;
    transform: translateY(-200%);
    height: 100%;
    font-weight: 700;
    font-size: var(--size-9xl);   
  }
}

/* xL */
/* @media (min-width: 1288px) {} */

/* 2xL */
/* @media (min-width: 1536px) {}   */