.sale{
  margin-top: 3.5rem;
}

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

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

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


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

.sale__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: -5.5rem;
}

.sale__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) {
  .sale__text{
    left: -120px;  
  }
}

/* sm */
@media (min-width: 640px) {
  .sale__text{
    left: -190px;
    font-size: var(--size-8xl);   
  }
}

/* md */
@media (min-width: 768px) {
  .sale{
    margin-top: 3.5rem;
  }
  
  .sale__banner{
    position: relative;
    background-image: url(/images/Sneaks\ in\ a\ rack.webp);
    background-size: cover;
    background-position: center;
    filter: grayscale(100%);
    min-width: 580px;
    height: 55vh;
    margin: 0 auto;
  }
  
  .sale__banner:hover{
    filter: grayscale(30%);
  }
  
  .sale__text{
    position: relative;
    color: rgb(255, 135, 55);
    text-align: center;
    transform: translateY(-350%);
    left: -200px;
    height: 50%;
    font-weight: 700;
    font-size: var(--size-9xl);   
  }
  
  
  #sale__products{
    margin-bottom: 5rem;
    margin-top: 2rem;
  }
  
  .sale__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;
  }
  
  .sale__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) {
  .sale__text{
    left: -300px;
    font-size: var(--size-9xl); 
    transform: translateY(-185%);
  }
}

/* xL */
@media (min-width: 1288px) {
  .sale__text{
    left:400px;
  }
}

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