*, *::before, *::after {
  box-sizing: border-box;
}

.container {
  
  width: 100%;
  min-height: 100vh; 
  display: flex;     
  border: 5px #6A4CE4;
  padding: 0px;
  margin: 0px;
}

.item1 {
  width: 20%;
  height: auto;     
  background-color: #6A4CE4;
  padding: 20px;
  font-weight: 700;
  color: #4CDCE4;
  text-align: center;
  border: 0px;
  margin: 0px;
   border-top-left-radius: 20px;      
  border-top-right-radius: 20px;
   border-bottom-left-radius: 20px;      
  border-bottom-right-radius: 20px;
}

  article {
      font-size: 20px; 
    }

.mwg {
  width: 70%;
  border: 0px;
  padding: 0px;
  margin: 0px auto;
  display: block;
}


.Jug1 {
  width: 70%;
  border: 0px;
  padding: 0px;
  margin: 0px auto;
  display: block;
  transition: transform 0.3s ease; 
}

.Jug1:hover {
  transform: scale(1.25); 
}


.product-grid {
  width: 80%;       
  display: flex;
  flex-wrap: wrap;  
  justify-content: space-around;
  align-content: flex-start;
  padding: 20px;
  gap: 15px;
}

.product-box {
  flex: 0 0 30%;    
  background-color: white;
  border: noNE;
  border-radius: 10px;
  padding: 15px;
  text-align: center;
  color: #000;
  box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
}

.product-box h3 {
    margin-top: 0;
    color: blue;
}


@media screen and (max-width: 768px) {

    .container {
        flex-direction: column;
    }

    
    .item1 {
        width: 100%;
        margin-bottom: 20px;
    }


    .product-grid {
        width: 100%;
        padding: 10px;
    }


    .product-box {
        flex: 0 0 100%;
        margin-bottom: 10px;
    }
}