/* 
==========
Hero 
==========
*/

.hero{
  margin-top: 100px;
  height: 300px;
  background: linear-gradient(rgba(17, 0, 0, 0.7),rgba(17,0,0,.7)), url('../resources/images/website/whisky.webp');
  background-size:cover;
  background-position:center;
  display:flex;
  align-items:center;
  padding:0 8%;
  color: var(--white-color);
}

.hero-content h1{
  font-size:60px;
}

.hero-content p{
  color: var(--silver-color);
  max-width:700px;
}

/* 
==========
Filters
==========
*/

.filters{
  margin-bottom:40px;
}

#container-buttons-categories{
  display: flex;
  gap: 1em;
}

.filter-btn{
  padding:10px 20px;
  border:none;
  background:var(--dark-color);
  color: var(--white-color);
  border-radius:8px;
  cursor:pointer;
  transition:.3s;
  font-weight:500;
}

.filter-btn:hover{
  background:var(--dark-color);
  transform:translateY(-3px);
}

.filter-btn.active{
  background:var(--yellow-color);
  color:var(--black-color);
}

/* 
==========
Search input
==========
*/

#search-input{
  background:var(--dark-color);
  border:1px solid var(--grey-color);
  color: var(--white-color);
  border-radius:8px;
  padding:10px 15px;
  transition:.3s;
}

#search-input::placeholder{
  color: var(--silver-color);
}

#search-input:focus{
  outline:none;
  border-color: var(--yellow-color);
}

/* 
==========
Products
==========
*/

.products-container{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:30px;
}

.product-card{
  background: var(--dark-color);
  border-radius:15px;
  overflow:hidden;
  transition:.3s;
  width:300px;
  justify-self:center;
}

.product-card:hover{
  transform:translateY(-5px);
}

.product-card img{
  width:100%;
  height:300px;
  object-fit:cover;
}

.product-info{
  padding:20px;
}

.product-info h3{
  margin-bottom:10px;
  color: var(--white-color);
}

.product-info p{
  color: var(--yellow-color);
  font-weight:1000;
  margin-bottom:15px;
}

.product-info button{
  width:100%;
  padding:12px;
  border:none;
  background:var(--scarlet-color);
  color:var(--white-color);
  font-weight:600;
  cursor:pointer;
  border-radius:8px;
}

/* 
==========
Responsive filter
==========
*/

@media(max-width:768px){
  .filters{
    flex-direction:column;
    gap:15px;
  }
  #search-input{
    width:100%;
  }
}