@font-face {
   font-family: 'Montserrat';
   src: url('./assets/Montserrat/Montserrat-VariableFont_wght.ttf') format('truetype');
   font-weight: 500;
   font-style: normal;
}

@font-face {
   font-family: 'Montserrat';
   src: url('./assets/Montserrat/Montserrat-VariableFont_wght.ttf') format('truetype');
   font-weight: 700;
   font-style: normal;
}


@font-face {
   font-family: 'Fraunces';
   src: url('./assets/Fraunces/Fraunces-VariableFont_SOFT\,WONK\,opsz\,wght.ttf') format('truetype');
   font-weight: 700;
   font-style: normal;
}

:root {
    --green-500: hsl(158, 36%, 37%);
    --green-700: hsl(158, 42%, 18%);
    --black: hsl(212, 21%, 14%);
    --grey: hsl(228, 12%, 48%);
    --cream: hsl(30, 38%, 92%);
    --white: hsl(0, 0%, 100%);
}

*,
*::before,
*::after {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   list-style: none;
   text-decoration: none;
}

body {
   min-height: 100vh;
   font-family: 'Montserrat','sans-serif';
   font-weight: 500;
   
}

main {
   min-height: 100vh;
   background-color: var(--cream);
   display: flex;
   justify-content: center;
   align-items: center;
   padding-block: 4em;
}

img {
   width: 100%;
   object-fit: cover;
   display: block;
}

.mobile {
   display: none;
}

.container {
   width: 42em;
   display: grid;
   grid-template-columns: 1fr 1fr;
   border-radius: 1em;
   background-color: var(--white);
   overflow: hidden;
}

.content {
   padding: 2.8rem;
   display: flex;
   flex-direction: column;
   /* gap: 1.5rem; */
   justify-content: space-between;
}

@media (max-width:48rem) {
   .content {
      padding: 1.5em;
      gap: 1.5rem;
   }

   .container {
      width: 90%;
      display: grid;
      grid-template-columns: 1fr;
      border-radius: 1em;
   }

   .mobile {
      display: block;
      width: 100%;
      object-fit: cover;
   }

   .desktop {
      display: none;
   }
}

p {
   font-family: 'Montserrat';
   font-weight: 500;
   font-size: .9rem;
   color: var(--grey); 
}

.product {
   letter-spacing: .5em;
   text-transform: uppercase;
   font-size: .7em;
}

h1 {
   font-family: 'Fraunces';
   color: var(--black);
   font-weight: 700;
   line-height: 1em;
}

.price {
   display: flex;
   align-items: center;
   gap: 1.5rem;
}

.current-price {
   font-family: 'Fraunces';
   font-weight: 700;
   font-size: 2rem;
   color: var(--green-500);
}

.original-price {
   text-decoration: line-through;
}

button {
   border: none;
   padding: 1.4em;
   border-radius: .5em;
   background-color: var(--green-500);
   color: var(--white);
   display: flex;
   justify-content: center;
   align-items: center;
   gap: .5em;
   font-weight: 700;
   transition: background-color 200ms ease;
}

button img {
   width: 1em;
   height: 1em;
   object-fit: contain;
}

button:hover {
   background-color: var(--green-700);
   cursor: pointer;
}