#banner{
  margin-top: 4rem;
  margin-right: 1rem;
}

.banner__box{
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  gap: 1rem;
  margin-top: 3rem;
}

.banner{
  display: flex;
  justify-content: center;
  min-width: 100%;
  height: 50vh;
  background-size: cover;
  background-position: center;
  padding: 2rem;
  filter:grayscale(50%);
  position: relative;
  color: white;
  gap: .7rem;
}

.banner1{
  background-image: url("/images/Timberland-50th-2400x1157-04.jpg");
  display: flex;
  flex-direction: column;
  align-items: end;
  justify-content: center;
}

.banner:hover{
  filter: grayscale(0%);
}

.banner2{
  background-image: url(/images/Nike-sneaks/nike-banner-nikepage.jpg);
  display: flex;
  flex-direction: column;
  align-items: center ;
  justify-content: flex-start;
  background-position: center;
}

.banner2 h2{
  font-size: 1.4rem;
  
}

.banner__btn {
  background: transparent;
  color: white;
  font-weight: 600;
  border: 2px solid rgb(255, 255, 255);
}


.banner:hover  button.banner__btn{
  border-color: rgb(255, 135, 55);
}


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

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

  #banner{
    margin-top: 2rem;
    margin-left: 0;
  }

.banner__box{
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  gap: 1rem;
  }


.banner{
  min-width: 100%;
  height: 40vh;
 
}
}

/* md */
@media (min-width: 768px) {

  #banner{
    margin-top: 2rem;
  }

  .banner__box{
    flex-wrap: wrap;
  }
  


}

/* Lg */
/* @media (min-width: 1024px) {} */

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

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