@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,100..900;1,9..144,100..900&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

/* || REST */
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* || VARIABLES */
:root {
  /* COLORS */
  --Pure-White: #FFFFFF;
  --CreamBG: #F2EAE2;
  --Aurometal-Saurus:#6C7289;
  --Deep-Aquamarine:#3D8168;
  --Deep-Aquamarine-Hover:#1A4032;
  --Gunmetal: #1C232B;


  /* SHADOWS */
  --Shadow: 0 4px 4px 0 hsla(0, 0%, 25%);

  /* TYPOGRAPHY */
  --FF1: 'Fraunces', sans-serif;
  --FF2: 'Montserrat', sans-serif;

  --Overline: 500 .75rem var(--FF2);
  --Display: bold 2rem/2rem var(--FF1);
  --Body: 500 .875rem/1.4375rem var(--FF2);
  --Very-Light-Text:500 .8125rem/1.4375rem var(--FF2);
  --Button-Text: bold .875rem var(--FF1);

}
/* || UTILITY CLASSES */
.offscreen {
  position: absolute;
  left: -10000px;
}
.nowrap {
  white-space: nowrap;
}
.center {
  text-align: center;
}
.responsive-image {
  display: none;
}
/* MOBILE FIRST DESIGN */
/* || GENERAL STYLES */
html {
  scroll-behavior: smooth;
  font-size: 1rem;
}
body {
  min-height: 100vh;
  max-width: 100%;
  overflow-x: hidden;
  background-color: var(--CreamBG);
  display: grid;
  place-content: center;
}
h1,
h3 {
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-weight: normal;
}
a:any-link {
  text-decoration: none;
  color: #FFFFFF;
}
.main-card{
  margin: 1.75rem 1rem;
  border-radius: 10px;
  width: 343px;
  height: 611px;
  background-color: var(--Pure-White);
  display: flex;
  flex-flow: column;
}
.img-desktop{
  display: none;
}
.main-card__hero img{
  border-radius: 10px 10px 0 0;
  width: 343px;
  height: 240px;
  margin-bottom: 1.5rem;
}
.main-card__body{
  height: 371px;
  width: 343px;
  padding: 0 1.5rem 1.5rem 1.5rem;
}
.main-card__body-description{
  height: 199px;
  width: 295px;
  display: flex;
  flex-flow: column;
  align-items: left;
}
.main-card__body-title{
  font: var(--Overline);
  color: var(--Aurometal-Saurus);
  letter-spacing: 5px;
  margin-bottom: .75rem;
  text-transform: uppercase;
}
.main-card__body-message{
  font: var(--Display);
  color: var(--Gunmetal);
  margin-bottom: 1rem;
}
.main-card__body-product__description{
  font: var(--Body);
  color: var(--Aurometal-Saurus);
  margin-bottom: 1.5rem;
}
.main-card__payment-section{
  display: flex;
  flex-flow: column;
  width: 295px;
  height: 100px;
}
.main-card__price{
  width: 194px;
  height: 32px;
  display: flex;
  flex-flow: row;
  gap: 19px;
  margin: 1.5rem 7.7813rem 1.25rem 0rem;
}
.main-card__current-amount{
  font: var(--Display);
  color: var(--Deep-Aquamarine);

}
.main-card__previous-amount{
  width: 48px;
  height: 23px;
  font: var(--Very-Light-Text);
  color: var(--Aurometal-Saurus);
  padding: .3125rem 0rem .25rem 0rem;
  text-decoration: line-through;
  white-space: nowrap;
}
.main-card__button-div{
  width: 295px;
  height: 48px;  
}
.cart{
  width: 14.39px;
  height: 16px;
}
.main-card__button-inner__div {
  width: 295px;
  height: 48px;
  display: flex;
  flex-flow: row;
  align-items: center;
  gap: 11.61px;
  font: var(--Button-Text);
  background-color: var(--Deep-Aquamarine);
  padding: .9375rem 5.75rem; 
  border-radius: 8px;
}

/*DESKTOP DESIGN*/
@media screen and (min-width: 768px){
  .main-card{
    margin: 10.9375rem 26.25rem;   
    width: 600px;
    height: 450px; 
    display: flex;
    flex-flow: row; 
    align-items: center; 
  }
  .img-mobile{
    display: none;
  }
  .img-desktop{
    display: block;
  }
  .main-card__hero img {
    background-image: url(./images/image-product-desktop.jpg);
    border-radius: 10px  0 0 10px;
    width: 300px;
    height: 450px;
    margin-bottom: 0rem;
  }
  .main-card__body{
    height: 450px;
    width: 300px;
    padding: 2rem 1.9688rem 2rem 2rem;
  }
  .main-card__body-description{
    height: 237px;
    width: 247px;   
  }
  .main-card__body-title{
    margin-bottom: 1.25rem;   
  }
  .main-card__body-message{
    margin-bottom: 1.5rem;
  }
  .main-card__body-product__description{
    margin-bottom: 0rem;
  }
  .main-card__payment-section{
    max-width: 236px;
    height:110px;
  }  
  .main-card__price{    
    margin: 1.8125rem 4.625rem 1.875rem 0rem;
  }
  
  .main-card__button-inner__div {  
    width: 236px;
    padding: .9375rem 3.875rem .9375rem 3.9375rem; 
  }
  @media screen and (min-width:992px){
    .main-card__button-inner__div:hover,
    .main-card__button-inner__div:focus-visible{
      background-color: var(--Deep-Aquamarine-Hover);

    }
  }
}