@font-face {
  font-family: "CooperBlack";
  src: url("fonts/CooperBlackStd-Italic.woff2") format("woff2"),
       url("fonts/CooperBlackStd-Italic.woff") format("woff"),
       url("fonts/CooperBlackStd-Italic.ttf") format("truetype");
  font-style: italic;
  font-weight: normal;
  font-display: swap;
}

@font-face {
  font-family: "CooperBlack";
  src: url("fonts/CooperBlackStd.woff2") format("woff2"),
       url("fonts/CooperBlackStd.woff") format("woff"),
       url("fonts/CooperBlackStd.ttf") format("truetype");
  font-style: normal;
  font-weight: normal;
  font-display: swap;
}

/* 
  General Styling -------------------
*/

*{
  box-sizing: border-box;
}

body{
  background-color: #F8F0E6;
  font-family: "Raleway", Helvetica, sans-serif;
  font-weight: 600; 
  font-size: 1rem;
  margin: 0;
  margin-top: 1rem;
  margin-bottom: 0;
}

h1{
  font-family: "CooperBlack", Times, serif;
  font-style: italic;
  letter-spacing: 0.075rem;
  font-size: 4.5rem;
  padding: 0;
  margin: 0;
}

h2 {
  font-family: "CooperBlack", Helvetica, sans-serif;
  font-size: 3rem;
}

h3 {
  font-family: "Raleway", Helvetica, sans-serif;
  margin-top: 1rem;
  margin-right: 1.5rem;
  font-size: 1.5rem;
  font-weight: 700;
}

h4 {
  font-family: "Raleway", Helvetica, sans-serif;
  font-weight: 700;
  margin-bottom: 0.25rem;
}

p{
  font-family: "Raleway", Helvetica, sans-serif;
  font-family: 600;
  font-size: 1.1rem;
  line-height: 130%;
}
a {
  text-decoration: none;
}

hr {
  border-top: 0.15rem solid #3A3939; /* Creates a 1px solid red line */
}

/*https://www.w3schools.com/cssref/css_inherit.php* for inherit property*/
button{
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  /*https://www.w3schools.com/cssref/pr_class_cursor.php for changing cursor*/
}

/* 
  Navigation -------------------
*/
header{
  margin-left: 1rem;
  margin-right: 1rem;
}
nav {
  margin-left: auto;
  margin-right: auto;
  background-color: white;
  display: flex;
  max-width: 50rem;
  padding: 1rem;
  border-radius: 1rem;
  height: 5rem;

  transition: 0.5s ease-in-out;
}

.NavLinks{
  margin-left: auto;
  margin-top: auto;
  margin-bottom: auto;
  display: flex;
  gap: 2rem;
}

.NavLinks a{
  color:black;
}

.NavLinks a:focus, .NavLinks a:hover{
  text-decoration: underline;
}

.reserveBox, .checkoutBox  {
  margin-left: auto;
  margin-right: 0;
  padding: 1rem;
  border-radius: 0.75rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  color: white;
  transition-property: background-color; 
  transition-duration: 0.25s;
  font-weight: 700;
}

.reserveBox:hover, .reserveBox:focus, .checkoutBox:hover, .checkoutBox:focus {
  background-color: rgb(0, 0, 0);
}


.Sandwich{
  margin-top: 0.5rem;
 
  display: none;
  position: relative;
  height: 2rem;
  width: 2rem;
  margin-left: auto;
  margin-right: 1.25rem;
  cursor: pointer;
}

.Sandwich span{
  height: 0.25rem;
  width: 100%;
  background-color: #3A3939;
  border-radius: 1rem;
  position:absolute;
  top: 50%;
  left: 50%;
  /*https://www.w3schools.com/cssref/css3_pr_transform.php for transform property*/
  transform: translate(-50%,-50%);
  transition: transform .5s ease;
}

.Sandwich span:nth-child(1){
  top: 25%;
}


.Sandwich span:nth-child(3){
  top: 75%;
}

/* Footer */

footer{
  width: 100%;
  min-height: 20rem;
  background-color: #252525;
}

footer img{
  width: 100%;
  padding: 3rem;
  padding-bottom: 0;
  height: auto;
  margin-bottom: -1rem;
  margin-left: auto;
  margin-right: auto;
  display: block;
  
}

.footerGrid{
  padding-top:3rem;
  margin-left: 4rem;
  margin-right: 4rem;
  margin-bottom: 10rem;
  display: grid;
  color: #F8F0E6;
  grid-template-columns: 8rem 1fr 4rem 8rem 1fr 1fr 1fr ;
}

.exploreFlex{
  display: flex;
  flex-direction: column;
  gap: 1rem;

}

.footerP{
  margin: 0;
  font-size: 1rem;
  padding-bottom: 0.25rem;
}

.socialText{
  grid-column-start: 4;
}

.mailFooter{
  grid-column-start: 7;
  margin-left: auto;
  text-align: end;
}

.emailLink{
  text-decoration: none;
  color: #F8F0E6;
  font-size: 2rem;
}

.emailLink:focus, .emailLink:hover{
  text-decoration: underline;
  color: #d8d1c7;
  font-size: 2rem;
}

.footerGrid p{
  margin:0;

}

.exploreFlex a{
  text-decoration: none;
  color:#F8F0E6;
  font-size: 2rem;
  font-weight: 700;
}

.exploreFlex a:focus, .exploreFlex a:hover{
  text-decoration: underline;
  color:#d8d1c7;

}

.emailDivide{
  margin-top: 1rem;
  margin-bottom: 2rem;
}

.referenceGrid{
  margin-left: 4rem;
  margin-right: 4rem;
  color: #F8F0E6;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}
.referenceGrid p:nth-child(1){
  text-align: left;
}
.referenceGrid p:nth-child(2){
  text-align: center;
}
.referenceGrid p:nth-child(3){
  text-align: right;
}
/* 
  Index -------------------
*/

.homeContent{
  margin-left: 4rem;
  margin-right: 4rem;
}

.HomeHeading{
  display: block;
  position: relative;
  max-width: 80rem;
  min-height: 55vh;
  margin-left: auto;
  margin-right: auto;
  margin-top: 4rem;
  margin-bottom: 6rem;
}

.HomeHeading img{
  display: block;
  max-width: 55%;
  height: auto;
}

.HeaderTagFlex{
  position: relative;
  display: flex;
  align-items: center;
  padding-bottom: 0;
}

.shiftText{
  margin-left: 8rem;
}

.HeaderTagFlex img {
  position: absolute;
  left: 17rem;
  bottom: 5.5rem;
  max-height: 6rem;
}

.HomeText{
  position: absolute;
  right: 0;
  top:0;
}


.Concept{
  font-size: 1rem;
  color: #A79785;
  margin-top: 1rem;
  margin-bottom: 0.25rem;
}

.CTA{
  font-weight: 700;
  margin-top:0;
  margin-bottom: 1rem;
  font-size: 1.8rem;
  max-width: 30rem;
}

.button {
  display: inline-block;
  padding: 1rem;
  font-size: 1rem;
  text-decoration: none;
  color: white;
  border-radius: 2rem;
  width: 11rem;
  text-align: center;
  font-weight: 700;
  text-decoration: none;
  transition-property: background-color; 
  transition-duration: 0.25s;
}

.button:hover, .button:focus {
  background-color: rgb(0, 0, 0);
  color: rgb(255, 255, 255);
}

.aboutFlex{
  display: flex;
  position:static;
  max-width: 59rem;
  min-height: 40vh;
  margin-top: 3rem;
  margin-bottom: 3rem;
  margin-left: auto;
  margin-right: auto;
  align-items: center;
  gap: 5rem;
}

.aboutFlex h2{
  max-width: 24rem;
}

.aboutFlex p{
  max-width:30rem;
}

label{
  display: block;
  margin-bottom: 0.25rem;
}

textarea{
  display: block;
  width: 100%;
  max-width: 30rem;
  font-size: 1.25rem;
  height: 3rem;
  /*https://www.w3schools.com/cssref/css3_pr_resize.php for the resize property*/
  resize: none;
  border-radius: 10px;
  background-color: rgb(200, 200, 200);
  line-height: 1rem;
  border:none;
  /* https://www.w3schools.com/css/css_overflow.asp for overflow*/
  overflow: visible;
  padding-top: 1rem;
  padding-left:1rem;
  padding-right: 1rem;

}

.mailList{
  margin-bottom: 5rem;
  margin-top: 5rem;
  max-width: 60rem;
  margin-left: auto;
  margin-right: auto;
}

.mailList h3{
  font-size: 3rem;
  margin-bottom: 0;
  font-family: "CooperBlack";
}

.mailList div{
 
  display: flex;
  gap: 2rem;
  align-items: center;

}

/* 
  Catalogue -------------------
*/
.catalogueContent{
  margin-left: 8rem;
  margin-right: 8rem;
}

.catalogueContent h2{
  margin-bottom: 1rem;
  font-family: "Raleway";
}

.CatalogueFlex{
  margin-top: 1rem;
  display:flex;
  align-items: center;
}

.CatalogueGrid{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1rem;
  margin-bottom: 2rem;
}

.ProductItem {
  border-radius: 1rem;
  color: #3A3939;
  position: relative;
  display: block; 
  text-decoration: none;
}

.productImageContainer {
  max-width: 100%;
  position: relative;
}

.productImage,
.productImage-hover {
  background-color: white;
  width: 100%;
  height: auto;
  border-radius: 1rem 1rem 0.25rem 0.25rem;
  transition: opacity 0.3s ease;
}

.productImage-hover {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  object-fit: contain; /* https://sirv.com/help/articles/hover-change-image/ */
  opacity: 0;
}

.ProductItem:hover .productImage-hover {
  opacity: 1;
}

.ProductItem:hover .productImage {
  opacity: 0;
}

/* https://sirv.com/help/articles/hover-change-image/ for changing images on hover*/

.ProductItem a {
  border-radius: 1rem;
}

.ProductItem a:hover, .ProductItem a:focus, .ProductItem:hover, .ProductItem:focus {
  border: 0.25rem solid #3A3939;
  color: black;
  transition: 0.1s;
}

.name-of-product {
  font-size: 1.6rem;
  margin-bottom: 0;
}

.checkoutBox{
  max-width: 9rem;
}

.add-pad {
  margin: 1rem;
}

/*for the item page*/ 
.item-page-section{
  margin-left: 3rem;
  margin-right: 3rem;
  min-height:100vh;
  margin-bottom: 3rem;
}

.Container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; 
    margin-left: auto;
    margin-right: auto;
    padding-top: 4rem;
}

.item.images{
  display: flex;
  flex-direction: row;
  gap:1rem
}
.item img {
  width: 100%;
  max-width: 30rem;
  height: auto;
  border-radius: 1rem;
  background-color: white;
}

.item.information {
    padding-left: 4rem;
    max-width: 50rem;
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 33rem;
    /* https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flexible_box_layout/Mastering_wrapping_of_flex_items */
}
.item.information a{
    margin-top: 1rem;
}

.item-header {
    font-size: 3rem;
}

.item-subheading {
    font-size: 2rem;
    margin-bottom: 0;
    margin-top: 0.25rem;
}

.price{
  font-size: 1.5rem;
}

.seventyPercent {
  max-width: 70%;
  height: auto;
}

.thirtyPercent {
  display: flex;
  flex-direction: column;
  max-width: 30%;
  gap: 1rem;
}

.thirtyPercent img{
  max-height: auto;
  max-width: 10rem;
}

select {
  background-color: white;
  border: none;
  padding: 0.5rem 1rem 0.5rem 1rem;
  border-radius: 8%;
}

option{
  color: black;
}

/* https://www.w3schools.com/howto/howto_js_popup.asp for the popup and its animation. */
.popup {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

/* The actual popup */
.popup .confirmationMessage {
  visibility: hidden;
  max-width: 20rem;
  background-color: white;
  color: black;
  text-align: center;
  border-radius: 2rem;
  padding: 1.5rem;
  position: absolute;
  z-index: 1;
  bottom: -6rem;
  left: 45%;
  margin-left: -80px;
}

.popup .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s
}

@-webkit-keyframes fadeIn {
  from {opacity: 0;}
  to {opacity: 1;}
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity:1 ;}
}

/*buttons*/
.Buttons {
  display: inline-block;
  padding: 1rem;
  font-size: 1rem;
  text-decoration: none;
  color: white;
  background-color: #EDA91F;
  border-radius: 2rem;
  width: 11rem;
  text-align: center;
  font-weight: 700;

  text-decoration: none;
  transition-property: background-color; 
  transition-duration: 0.25s;
}

.Buttons:hover, .Buttons:focus {
  background-color: rgb(0, 0, 0);
  color: rgb(255, 255, 255);
  cursor: pointer;
}

.Buttons.adding-to-cart:hover, .Buttons.Buttons.adding-to-cart:focus {
  background-color: rgb(0, 0, 0);
  color: rgb(255, 255, 255);
  border: none;
  padding: 1.2rem;
}

.button-active {
  background-color: rgb(0, 0, 0);
  color: rgb(255, 255, 255);
  border: none;
  padding: 1.2rem;
}

/* for the reserve room page*/
 .adding-to-cart {
  background-color: transparent;
  border-style: solid;
  border-width: 0.3rem;
  border-color: #A79785;
  color: #A79785;
  margin-bottom: 0.5rem;
}

li {
  margin: 0.5rem;
}

.time-slots {
  padding-bottom: 0.25rem;
  font-size: 1.5rem;
}

/*reservation confirmed page
*/
.reservation-text {
  padding-left: 10rem;
  padding-top: 6rem;
  padding-bottom: 6rem;
  max-width: 80%;
}

/* Checkout */
.checkoutSection{
  min-height: 90vh;
  margin-left: 4rem;
  margin-right: 4rem;
  margin-bottom: 3rem;
  margin-top: 2rem;
}

.checkoutSection h2{
  margin-top: 1rem;
  margin-bottom: 0.5rem;
  font-family: Raleway;
  font-size: 2rem;
}

.cart{
  display: flex;
  gap: 2rem;
  max-width: 100rem;
  margin-left: auto;
  margin-right: auto;
}

.cartImgFlex{
  padding:1.5rem;
  display: flex;
  gap: 1rem;
  background-color: white;
  border-radius: 1rem;
  justify-content: space-between;
}

.cartImgFlexTwo{
  padding:1.5rem;
  display: flex;
  gap: 1rem;
  background-color: white;
  border-radius: 1rem;
}

.big-heading-now-small {
  font-size: 2.5rem;
  padding-bottom: 2rem;
}

.previewImage{
  max-width: 10rem;
  height: auto;
  background-color: white;
}

.PaymentSection{
  border-radius: 1rem;
  padding: 1rem;
  background-color: white;
  max-height: 27rem;
}

.PaymentSection h3{
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}
.cartItem{
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.PaymentSection a{
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0.5rem;
}

.cartItemFlex{
  display: flex;
}

.cartItemFlex a{
  text-decoration: none;
  color: black;
}

.cartItemFlex a:hover, a:focus{
  color: #565656;
}

.itemTitle{
  text-decoration: none;
  color: black;
  margin-left: auto;
  padding: 0;
  margin: 0;
}

.amountItems{
  padding:0.25rem;
  border: 1px solid black;
  border-radius: 5rem;
  width: 4.5rem;
  text-align: center;
}

.cartItemFlex p{
  margin-left: auto;
}

.PaymentFlex{
  display: flex;
}

.PaymentFlex p:nth-child(2){
  margin-left:auto;
}

.qCheck{
  border: 1px solid rgb(110, 110, 110);
}

/* CheckoutForms */
.prePurchasePreview{
  max-width: 20rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.billingAddress{
  font-size: 2rem;
  font-family: "Raleway";
  font-weight: 800;
  font-style: normal;
  margin-bottom: 1rem;
  margin-top: 1rem;
}

.purchaseFlex{
  display:flex;
  gap:2rem;
  margin-left: auto;
  margin-right: auto;
  max-width: 90%;
}

.purchaseForms{
  width:100%;
  padding-top: 1rem;
  padding-bottom: 1rem;
  padding-left: 2rem;
  padding-right: 2rem;
  border-radius: 1rem;
  background-color: white;
}
.purchaseForms input{
  height:3rem;
  border-radius: 0.5rem;
  font-size: 1rem;
  border: 2px solid #3A3939;
  padding-left: 1rem;
  margin-bottom: 2rem;
  width:100%;
}

#purchaseButton{
  width:100%
}
/* 
  Colours -------------------
*/
.red{
  background-color: #E95747;
}

.orange{
background-color: #EDA91F;
}

.blue{
  background-color: #49A0F1;
}

@media(width < 120rem){
  .homeContent{
    margin-left: 4rem;
    margin-right: 4rem;
  }

}

@media(width<80rem){
  .Container{
    max-width: 40rem;
    margin-left: auto;
    margin-right: auto;
    flex-direction: column;
  }
  .item.information{
    padding-left: 0;
    margin-top: 1rem;
  }
}

@media(width < 78rem){
  .homeContent{
    margin-left: 5rem;
    margin-right: 5rem;
  }
  .HomeHeading{
    display:block;
    max-width: 40rem;
    margin-right: 0;
    margin-left: 0;
    margin-top: 2rem;
  }

  .HomeHeading img{
    max-width: 100%;
    height:auto;
  }

  .HomeText{
    position: static;
    margin-top: 2rem;
  }

  .mailList{
  margin-left: 0rem;
  }

  .shiftText{
  margin-left: 0rem;
  }

  .aboutFlex{
  max-width: 59rem;
  margin-top: 3rem;
  margin-right: 0;
  
  
  gap: 4rem;
  }

  .aboutFlex p{
    max-width:30rem;
  }

  .aboutFlex h2{
    font-size: 2rem;
    max-width: 16rem;
  }

  .footerGrid{
  margin-bottom: 8rem;
  grid-template-columns: 8rem 1fr 8rem 1fr ;
  grid-template-rows: 1fr 1fr;
}
.SocialText{
  grid-column-start: 3;
}

.mailFooter{
  grid-row-start: 2;
  grid-column: span 3;
  margin-left: 0;
  text-align: start;
}

.referenceGrid p{
  font-size: 0.75rem;
}

  .referenceGrid p{
    font-size: 0.75rem;
  }
}


@media(width < 60rem){
  .aboutFlex{
    flex-direction: column;
    align-items: baseline;
    gap: 0;
  }

  .aboutFlex h2{
  max-width: 25rem;
  margin-bottom: 0;
  }

  .aboutFlex p{
    max-width: 40rem;
  }

  .footerGrid{
    margin-left: 2rem;
    margin-right: 2rem;
    margin-bottom: 4rem;
    grid-template-columns: 8rem 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    gap:1rem
  }

.footerGrid{
  margin-left: 2rem;
  margin-right: 2rem;
  margin-bottom: 4rem;
  grid-template-columns: 8rem 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap:1rem
}
.socialText{
  grid-column-start: 1;
  grid-row-start: 2;
}

.socialLinks{
   grid-column-start: 2;
  grid-row-start: 2;
}

.mailFooter{
  grid-row-start: 3;
  grid-column: span 2;
}

/* Catalogue */

  .CatalogueGrid{
    grid-template-columns: 1fr;
  }

  .catalogueContent{
    margin-left: 3rem;
    margin-right: 3rem;
  }
}

@media (width < 57.5rem) {
  .reservation-text{
    padding: 5rem;
    max-width: 90%;
  }
}

@media(width < 55rem){
  .referenceGrid p{
    font-size: 0.5rem;
  }
  .checkoutSection{
    margin-left: 1rem;
    margin-right: 1rem;
  }

  .homeContent{
    margin-left: 2rem;
    margin-right: 2rem;
  }

  .shiftText{
    margin-left: 0rem;
  }

  .cart{
    flex-direction: column;
  }

  .purchaseFlex{
    flex-direction: column;
  }

  .purchaseForms{
    order:1;
  }

  .prePurchasePreview{
    max-width: none;
    order: -1;
  }
}

@media(width < 42rem){
  .reserveBox{
    display:none;
  }

  .CatalogueFlex h1{
    font-size: 3rem;
  }

  .NavLinks {
    /* https://www.freecodecamp.org/news/css-display-none-and-visibility-hidden-the-difference/ */
    visibility: hidden;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    margin-left: auto;
    margin-right: auto;
    flex-direction: column;
    align-items: center;
    font-size: 2rem;
    transition: opacity 0.3s ease 0.2s, max-height 0.5s ease-in-out, visibility 0.3s ease 0.2s;
  }

  .Sandwich{
    display:block;
    margin-bottom: auto;    
  }

  nav.active{
    align-items: baseline;
    height: 20rem;
  }

  .NavLinks.active{
    visibility: visible;
    opacity: 1;
    max-height: 15rem;
    margin-top: 5rem;
    display:flex;
    flex-direction: column;
  }

  .Sandwich.active span:nth-child(1){
    top: 50%;
    transform: translate(-50%,-50%) rotate(45deg);
  }

  .Sandwich.active span:nth-child(2){
    opacity: 0;
  }

  .Sandwich.active span:nth-child(3){
    top: 50%;
    transform: translate(-50%,-50%) rotate(-45deg);
  }

  .CatalogueFlex{
    flex-direction: column;
    align-items: baseline;
    gap: 1rem;
  }

  .checkoutBox{
    margin-left: 0;
  }

  footer img{
    padding: 1rem;
  }

  .referenceGrid{
    margin-left: 1rem;
    margin-right: 1rem;
  }
}

@media(width < 35rem){

  .catalogueContent{
    margin-left: 1rem;
    margin-right: 1rem;
  }

  .HomeText h1, .HeaderTagFlex h1{
    font-size: 3rem;
  }

  .HeaderTagFlex img{
    max-height: 5rem;
    margin-left: -1rem;
    left: 12rem;
    bottom: 3.5rem;
  }

  .mailList div{
    flex-direction: column;
    gap: 1rem;
    align-items: baseline;
  }
  
  .emailLink{
    font-size: 1.75rem;
  }

  .exploreFlex a{
    font-size: 1.75rem;
  }

  .footerP{
    font-size: 1rem;
  }

  .footerGrid{
    grid-template-columns: 1fr 1fr;
    margin-bottom: 3rem;
  }

  .item.images{
    flex-direction: column;
  }

  .seventyPercent{
    max-width: none;
  }

  .thirtyPercent{
    flex-direction: row;
    max-width: 45%;
  }

  .thirtyPercent img{
    max-height: auto;
    max-width: 13rem;
  }

  .cartItemFlex{
  flex-direction: column;
  }

  .cartItemFlex p{
  margin: 0;
  }
}

@media (width < 25rem){
  .cartImgFlexTwo{
    flex-direction: column;
  }
}

@media (width < 34.625rem) {
  .reservation-text{
    padding: 3rem 1rem 3rem 1rem;
    max-width: 100%;
  }

  .res-small-headingOne {
    font-size: 2.7rem;
  }

  .res-small-headingTwo {
    font-size: 2.2rem;
  }
}

@media(width < 25rem){
  .HomeText h1, .HeaderTagFlex h1{
    font-size: 2.25rem;
  }

  .HeaderTagFlex{
    display: flex;
    align-items: center;
    margin-bottom: -0.8rem;
    padding-bottom: 0;
  }

  .HeaderTagFlex img{
    max-height: 3rem;
    margin-left: -2rem;
    left: 9rem;
    bottom:3rem;
  }

  .NavLinks{
    font-size: 1rem;
  }

  nav.active{
    align-items: baseline;
    height: 16rem;
  }

  .footerGrid{
  gap: 1rem
  }

  .emailLink{
    font-size: 1.25rem;
  }

  .cartImgFlex{
  flex-direction: column;
  }

}



@media (width < 78.8rem) {
  .item.information {
    padding-left: 0;
   }
} 

@media (width < 44.4rem) {
  .item-header {
    font-size: 2rem;
  }

  .item-subheading {
    font-size: 1.6rem;
  }

  .money {
    font-size: 1.3rem;
  }
}