Cart.module.css

.container {
  display: flex;
  padding: 50px;
}
.left {
  flex: 2;
}
.right {
  flex: 1;
}
.imgContainer {
  height: 100px;
  position: relative;
  width: 100px;
}
.table {
  border-spacing: 20px;
  width: 100%;
}
.name,
.total {
  font-size: 18px;
  font-weight: 500;
}
.name {
  color: #d1411e;
}
.title {
}
.wrapper {
  background-color: #333;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  max-height: 300px;
  padding-top: 10px;
  padding: 50px;
  width: 90%;
}
.totalTextTitle {
  margin-right: 10px;
}
.button {
  background-color: #fff;
  border: none;
  color: #d1411e;
  cursor: pointer;
  font-size: 16px;
  font-weight: bold;
  height: 300px;
  margin-top: 15px;
}
@media screen and (max-width: 480px) {
  .container {
    flex-direction: column;
   padding:20px;
  }
  .table{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content:center;
  }
 .trTitle{
   display:none;
 }
.tr{
  display:flex;
  flex-direction: column;
  align-items: center;
  justify-content:center;
  margin-bottom:20px;
}
.imgContainer{
  width: 35vw;
  height:35vw;
}
.name, .total{
  font-size:24px;
}
.extras, .price, .quantity{
 font-size:20px;
}
.price::before{
  content:"Price ";
  font-weight:bold;
}
.quantity::before{
  content:"Quantity ";
  font-weight:bold;
}
.total::before{
  content:"Total ";
  font-weight:bold;
}
.wrapper{
  width: 100%;
}
}