returnRequestStyle.css

main{
    overflow-y: auto;
    padding: 1rem;
    box-sizing: border-box;
  }
  .prod-container{
    display: flex;
    flex-direction: row;
    height: 100%;
    width: 100%;
    position: relative;
    flex-wrap: wrap;
    gap: 2rem;
  }
  
  .product {  
    background-color: #FFFFFF;
    border-radius: 10px;
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 3rem;
    gap: 0px 0px;
    grid-auto-flow: row;
    grid-template-areas:
      "productImageContainer productInfoContainer"
      "productReturnButton productReturnButton";
    width: 25rem;
    height: 19rem;
    padding: 1rem;
  }
  
  .productReturnButton { 
    grid-area: productReturnButton; 
    display: flex;
    justify-content: center;
  }
  
  .productImageContainer { 
    grid-area: productImageContainer; 
  }
  
  .productInfoContainer { 
    grid-area: productInfoContainer; 
  }
  .productImageContainer img{
    width: 10rem;
  }
  .productInfoContainer .productInfo{
    display: block;
    margin-bottom: 0.5rem;
  }
  .prod-btn{

    color: white;
    background-color: #0B4D01;
    width: 7rem;
    height: 2rem;
    border: none;
    border-radius: 7px;
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
  }

  @media screen and (max-width:600px) {
    .product {  
      width: 100%;
      display: block;
      height: unset;
  }
  .productImageContainer{
    display: flex;
    justify-content: center;

  }
  .productInfoContainer{
    padding: 1rem 0;
  }
}
@media screen and (max-width:400px) {
  .productImageContainer img{
    width: 100%;
  }
  main {

    padding: unset;
}
.product{
  padding: 0.3rem;
}
.mainContainer {
  padding: 2rem 1rem 2rem 0rem !important;
}
.productInfoContainer .productInfo {

  font-size: 4vw;
  
}
.prod-btn{
  width: 100%;
  
}
}