body {
    background-color: hsl(13, 31%, 94%);
}

.heading h1 {
    font-family: 'Roboto', sans-serif;
    padding: 2rem 0rem;
    font-size: 2rem;
    font-weight: bold;
    margin:1rem 2rem;
}

.flex {
    width:100%;
    flex-wrap: wrap;
    display:flex;
    justify-content:space-around;
    gap:1.5rem 0rem;
}

.container{
    width:30%;
}

.container .card {
    display:flex;
    justify-content:center;
    align-items:end;
    height:300px;
    border-radius: 0.5rem;
    background-size:cover;
    background-repeat:no-repeat;
}

.card button{
    border:none;
    border-radius:20px;
    background:#fff;
    padding:10px;
    width:150px;
    position:relative;
    top:5%;
    bottom:0%;
}

.card button i{
    padding:0px 7px;
    font-size:18px;
    color: hsl(14, 92%, 35%);
}

.card-content {
    font-family:sans-serif;
}

.card-content p {
    margin:15px 0px 0px 0px;
    color: hsl(12, 20%, 44%);
}

.card-content h1{
    margin:8px 0px 0px 0px;
    color: hsl(14, 65%, 9%);
    font-size:18px;
}

.card-content .price {
    margin:8px 0px 0px 0px;
    font-size: 1.20rem;
    font-weight: bold;
    color:#a30a05;
}

.card-content button i {
    margin-right: 0.5rem;
}

.cart {
    margin-top: 2rem;
    background-color: white;
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding: 1rem;
}
.cart h2 {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 1rem;
}
.cart-items {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 8rem;
    justify-content: center;
}
.cart-items img {
    height: 4rem;
}
.cart-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-bottom: 0.5rem;
}
.cart-item .remove-from-cart {
    color: #e3342f;
    cursor: pointer;
}

/* Media Queries of 900px */
@media(max-width:900px){
  .container .card {
    height:200px;
}

.card button{
    top:7%;
}
}

/* Media Queries of 750px */
@media(max-width:750px){
  .container {
    width:48%;
  }

  .container .card{
    height:250px;
  }
}

/* media Queries of 550px */
@media(max-width:550px){
  .container {
    width:100%;
  }

  .heading h1 {
    margin:0%;
  }
}