*{
    margin:0;
    padding:0;
    box-sizing: border-box;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.header-container img{
    width:100%;
}
#page-title{
    text-align: center;
    position: absolute;
    top:30%;
    left:30%;
    color:rgb(255, 255, 255);
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.637));
    text-transform: uppercase;
}
.header-container > p{
    text-align: center;
    position: absolute;
    top:40%;
    left:40%;
    font-weight: 500;
    color:rgb(255, 255, 255);
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.637));
}
.container{
    width: 900px;
    max-width: 90vw; 
    margin:auto;
    text-align: center;
    padding-top: 10px; 
    padding-bottom: 10px; 
}
.listProduct .item img{
    width:90%;
    filter: drop-shadow(0 20px 40px #0009);
}
.listProduct{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap:20px;
}
.listProduct .item{
    background-color: rgb(223, 217, 217);
    padding: 20px;
    border-radius: 20px;
}
.listProduct .item h2{
    font-weight: 500;
    font-size: large;
}
.listProduct .item button{
    background-color: #353432;
    color: #eee;
    border-radius: 20px;
    cursor: pointer;
    padding: 5px 10px;
    border: none;
    margin-top: 10px;
}
@media screen and (max-width:1024px){
    #page-title{
        top:10%;
        left:20%;
    }
    .header-container > p{
        top:15%;
        left:35%;
    }
}
@media screen and (max-width:992px) {
    .listProduct{
        grid-template-columns: repeat(3, 1fr);
    }
        #page-title{
        top:10%;
        left:20%;
    }
    .header-container > p{
        top:15%;
        left:35%;
    }
}
@media screen and (max-width:768px) {
    .listProduct{
        grid-template-columns: repeat(2, 1fr);
    }
    #page-title{
        top:10%;
        left:10%;
    }
    .header-container > p{
        top:15%;
        left:35%;
    }
    @media screen and (max-width:425px){
    #page-title{
        font-size: large;
        top:10%;
        left:10%;
    }
    .header-container > p{
        top:15%;
        left:20%;
        font-size: medium;
    }
}
}