style.css

/* Layout */
/* * The designs were created to the following widths:
  * - Mobile: 375px
  * - Desktop: 1440px
  * * Ensure content is responsive and meets WCAG requirements
  * by testing the full range of screen sizes from 320px to large screens.
  */

/* Colors */

/* Primary */
:root {
  --green-500: hsl(158, 36%, 37%);
  --green-700: hsl(158, 42%, 18%);

  /* Neutral */
  --black: hsl(212, 21%, 14%);
  --grey: hsl(228, 12%, 48%);
  --cream: hsl(30, 38%, 92%);
  --white: hsl(0, 0%, 100%);

  /* Typography */
  --font-size-paragraph: 14px;

  /* Font */
  --font-montserrat: 'Montserrat', sans-serif; /* Make sure you've imported this font */
  --font-fraunces: 'Fraunces', serif;       /* Make sure you've imported this font */
}

/* Example usage */
body {
  font-size: var(--font-size-paragraph);
/*  color: var(--black);*/
}

h1 {
  font-family: var(--font-fraunces);
  font-weight: 700;
}

p {
  font-family: var(--font-montserrat);
  font-weight: 500;
  margin: 0;
}

.primary-button {
  background-color: var(--green-500);
  color: var(--white);
  /* other styles */
}

.primary-button:hover {
  background-color: var(--green-700);
}

/* Add more CSS rules as needed based on your design */

 body {
     background: var(--cream);
       display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
    }

    .container {
      /* background-color: white; */
     /*  border-radius: 20px; */
      overflow: hidden;
      /* background-color: var(--white); */
      max-width: 700px;
      width: 90%;
      display: flex;
      flex-direction: column;
      border-radius: 20px;
    }

.image{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

img{
  border-radius: 20px 20px 0 0;
}
.product-info{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center; 
  background-color: var(--white);
  border-radius: 0 0 20px 20px;
  padding: 30px;
}

.product-info h1{
  font-size: 24px;
  margin-bottom: 10px;
}
.product-info p{
  font-size: 16px;
  margin-bottom: 20px;
} 
.brand{
  font-size: 14px;
  color: var(--grey);
}


@media (min-width: 768px) {
  .container {
    flex-direction: row;
    align-items: stretch;
    /* border-radius: 15px 15 15 0; */
  }
  .image, .product-info{
    width: 50%;


  }
  .product-info{
    border-radius: 0 20px 20px 0;
  }
 
 
  img {
    border-radius: 20px 0 0 20px;
    width: 100%;
    height: 100%;
    object-fit: cover;
  
  }
  button {
    width: 100%;
    border-radius: 20px;
  }
}