/* 
  Author: Ese Odiase
*/

/* Google fonts */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');

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

/* CSS custom properties */
  :root {
    /* colors */
    --body-bg: hsl(30, 38%, 92%);
    --card-bg: hsl(0, 0%, 100%);
    --primary-color: hsl(212, 21%, 14%);
    --white: hsl(0, 0%, 100%);
    --grey: hsl(228, 12%, 48%);
    --green: hsl(158, 36%, 37%);
    --active: hsl(158, 42%, 18%);
    /* font sizes */
    --primary-font: calc(0.90rem + 0.2vw);
    --secondary-font: clamp(1rem, 1.8rem + 1vw, 2.8rem);
    /* font family */
    --font-family-1: 'Montserrat', sans-serif;
    --font-family-2: 'Fraunces', sans-serif;
    /* box shadow */
    --container-shadow: 0 25px 25px 0 rgba(0, 0, 0, 0.0477);
  }
  
  /* Mobile first workflow */
  body,
  html {
    margin: 0;
    padding: 0;
    background: var(--body-bg);
    color: var(--primary-color);
    font-size: var(--primary-font);
    font-weight: 460;
    font-family: var(--font-family-1);
  }
  
  main {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    position: relative;
  }
  
  .container {
    margin-block: 1.25rem;
    margin-inline: 1.25rem;
    display: flex;
    flex-direction: column;
    box-shadow: var(--container-shadow);
    -webkit-box-shadow: var(--container-shadow);
    -moz-box-shadow: var(--container-shadow);
  }
  
  .product-image {
    background-image: url(./images/image-product-mobile.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    height: 23.75rem;
    border-radius: 10px 10px 0 0;
  }
  
  .product-description {
    text-align: center;
    height: auto;
    background: var(--card-bg);
    border-radius: 0 0 10px 10px;
  }
  
  .product-description p {
    text-align: left;
    margin-block: 1rem;
    margin-inline: 1.875rem;
  }
  
  .product-description .text-1 {
    padding-block-start: 1.25rem;
    text-transform: uppercase;
    color: var(--grey);
    letter-spacing: 0.19rem;
  }
  
  .product-description .text-2{
    font-family: var(--font-family-2);
    font-size: var(--secondary-font);
    font-weight: 700;
    line-height: 1.1;
  }
  
  .product-description .text-3{
    line-height: 1.6;
    color: var(--grey);
  }
  
  .product-description .prices{
    display: flex;
    flex-direction: row;
    align-items: flex-start;
  }
  
  .product-description .prices .current{
    font-family: var(--font-family-2);
    font-size: var(--secondary-font);
    font-weight: 700;
    color: var(--green);
  }
  
  .product-description .prices .previous{
    margin-inline-start: -1rem;
    align-self: center;
    text-decoration: line-through;
    color: var(--grey);
  }
  
  .product-description button {
    border: none;
    border-radius: 8px;
    font-size: var(--primary-font);
    font-weight: 700;
    width: 80%;
    background: var(--green);
    color: var(--white);
    margin-inline: 1.875rem;
    margin-block-start: 0.875rem;
    margin-block-end: 2.1875rem;
    padding-block: 1rem;
    padding-inline-end: 1rem;
  }
  
  /* Breakpoint 1: for small devices */
  @media (min-width: 37.5rem){
    .product-image {
      height: 45rem;
    }
    
    .product-description .text-1 {
      letter-spacing: 0.24rem;
    }
    
    .product-description button {
      width: 90%;
    }
  }
  
  /* Breakpoint 2: for medium devices */
  @media (min-width: 48rem) {
    .container {
      flex-direction: row;
    }
    
    .product-image {
      background-image: url(./images/image-product-desktop.jpg);
      background-size: cover;
      background-repeat: no-repeat;
    }
    
    .product-image,
    .product-description {
      width: 20.5rem;
      height: 30.625rem;
      border-radius: 10px 0 0 10px;
    }
    
    .product-description {
      border-radius: 0 10px 10px 0;
    }
    
    .product-description .text-1 {
      letter-spacing: 0.2625rem;
    }
    
    .product-description button {
      cursor: pointer;
      width: 80%;
    }
    
    .product-description button:hover {
      background: var(--active);
    }
  }
  
  /* Breakpoint 3: for large devices */
  @media (min-width: 62rem) {
    .product-image,
    .product-description {
      height: 32.5rem;
    }
    
    .product-description .text-1 {
      letter-spacing: 0.324rem;
    }
    }
    
  /* Breakpoint 4: for extra large devices */
  @media (min-width: 75rem) {
    .product-image,
    .product-description {
      width: 24.25rem;
      height: 35rem;
    }
    
    .product-description .text-1 {
      letter-spacing: 0.389rem;
    }
    }
    
  .attribution, .heading {
    text-align: center;
    display: none;
  }