:root {
--text-s: 1.2rem;
--text-w-d: 800px;
--border-light: 1px solid var(--color-primary);
--font-mega: 3rem;
--font-giga: 5rem;
--margin-mega: 5rem;
--img-h:250px;
--img-h-t:325px;
--img-h-d:460px;
}

#landingpage {
  text-align: center;
  margin: var(--margin-l) var(--margin-l);
  background-color: var(--color-secondary);
  color: var(--color-primary);
}

#landingpage h1,
#product-deal h2,
#product-deal h3 {
  padding: var(--padding-l) var(--padding-m) var(--padding-m) var(--padding-m);
}

#landingpage h1 {
  font-size: var(--font-l);
}

#product-deal h2,
#product-deal h3 {
  font-size: var(--font-xl);
}

.landingpage-txt {
  font-size: var(--text-s);
  padding: var(--padding-s) var(--padding-m);
  line-height: 1.5;
}

.buttonstyle-1 {
  margin: var(--margin-s) var(--margin-s) var(--margin-l) var(--margin-s);
}

#product-deal {
  background-color: var(--color-secondary);
  color: var(--color-primary);
  margin: 0 auto;
  padding: var(--padding-m) var(--padding-l) var(--padding-xl) var(--padding-l);
}

#product-deal .wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  border: var(--border-light);
  margin: 0; 
}

.deal-img {
  background-color: var(--bg-light);
  width: 100%;
  height: var(--img-h);        
  display: flex;
  align-items: center; 
  justify-content: center; 
}

.deal-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;   
  display: block;
}

.deal-txt h2 {
  padding: var(--padding-s);
}

.deal-txt p {
  padding: var(--padding-s);
}

.discount {
font-size: var(--font-xl);
font-weight: var(--font-black);
}

.price-orig {
font-size: var(--font-s);
}

.price-new {
font-size: var(--font-mega);
font-weight: var(--font-black);
color: var(--color-secondary);
background-color: var(--color-primary);
margin: var(--margin-s);
}

.price-save {
  font-size: var(--font-m);
  margin-bottom: var(--margin-l);
}


/***************** MEDIA QUERIES ********************/

@media (min-width: 768px) {
  #landingpage {
    margin: var(--margin-m) var(--margin-xl) var(--margin-xl) var(--margin-xl);
  }

  #landingpage h1 {
    padding: var(--padding-l) var(--padding-l) var(--padding-s) var(--padding-l);
    font-size: var(--font-l);
  }

  .landingpage-txt {
    font-size: var(--font-s);
    padding: var(--padding-s) var(--padding-xl);
  }

  #product-deal {
    padding-top: var(--padding-m);
  }


  #product-deal .wrapper {
    flex-direction: row;        
    align-items: stretch;   
    text-align: left; 
  margin: var(--margin-l) var(--margin-mega);

  }

  .deal-img,
  .deal-txt {
    flex: 1;          
  }

  .deal-img {
    width: auto;             
    height: auto;             
    min-height: var(--img-h); 
  }

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

  .deal-txt {
    display: flex;
    flex-direction: column;
    justify-content: center;   
    padding: var(--padding-l);
  }

  #product-deal h2,
  #product-deal h3 {
    padding-bottom: var(--padding-m);  
  }

}



/* Desktop */

@media (min-width: 1024px) {

#landingpage h1 {
  padding: var(--padding-l) var(--padding-xl) var(--padding-s) var(--padding-xl);
  font-size: var(--font-xl);
}

.landingpage-txt {
    font-size: var(--font-m);
    width: var(--text-w-d);
    margin: auto;    
    padding-top: var(--padding-l);
    padding-bottom: var(--padding-l);
  }

#landingpage .buttonstyle-1 {
    margin-bottom: var(--margin-xl);
  }

#product-deal .wrapper {
margin: var(--margin-l) var(--margin-mega);
}

.deal-img {
  height: var(--img-h-d);        
}

.deal-txt h2 {
  padding: var(--padding-s);
}

.deal-txt h2 {
  font-size: var(--font-l);
}

.price-orig {
font-size: var(--font-l);
}

.price-new {
font-size: var(--font-giga);
font-weight: var(--font-black);
color: var(--color-primary);
background-color: transparent;
}

.price-save {
  font-size: var(--font-l);
}

}