@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');

:root {
--color-black:#1C232B;
--color-gray:#6C7289;
--color-cream:#F2EAE2;
--color-white:#FFFFFF;
--color-green500:#3D8168;
--color-green700:#1A4032;
--text-fraunces: "Fraunces", serif;
--text-montserrat: "Montserrat", sans-serif;

}
body {
  display:flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin:0;
  width:100%;
  height:100vh;
  background-color:var(--color-cream);
  font-family: var(--text-montserrat);
}
.main-container {
  display:grid;
  width:600px;
  grid-template-columns:300px 300px;
  grid-template-areas: "image content";
  border-radius: 8px;
  box-shadow:0px 4px 4px rgba(0, 0, 0, 0.25);
  background-color: white;
}
.image-container img {
    grid-area: image;
    width: 100%;
    height:100%;
    border-radius: 8px 0 0 8px;
}
.content-container {
    grid-area: content;
    padding:32px;
}
.title {
    font-family: var(--text-montserrat);
    font-weight: medium;
    font-size:12px;
    letter-spacing: 5px;
    line-height: 120%;
    margin:0 0 24px 0;
    color:var(--color-gray);
    text-transform: uppercase;
}
.product-name {
    font-family: var(--text-fraunces);
    font-weight: bold;
    font-size: 32px;
    margin:0 0 24px 0;
}
.product-description {
    font-family: var(--text-montserrat);
    font-weight: medium;
    font-size:14px;
    line-height: 160%;
    margin:0 0 32px 0;
    color:var(--color-gray);
}
.price {
    display:inline;
    font-family: var(--text-fraunces);
    font-weight: bold;
    font-size:32px;
    line-height: 100%;
    margin:0 16px 32px 0;
    color: var(--color-green500);
}
.previous-price {
    display:inline;
    font-family: var(--text-montserrat);
    font-weight: medium;
    font-size:13px;
    line-height: 120%;
    margin:0 0 32px 0;
    color:var(--color-gray);
    vertical-align: super;
    text-decoration: line-through;
}
.add-to-cart-btn {
    width:100%;
    height:50px;
    border-radius: 8px;
    background-color: var(--color-green500);
    border: none;
    font-family: var(--text-montserrat);
    font-weight: bold;
    font-size:14px;
    color: var(--color-white);
    margin:32px 0 0 0;
    transition: background-color 0.4s ease-in-out;
}
.add-to-cart-btn:hover {
    background-color: var(--color-green700);
}
.btn-text::before {
    content:url("/images/icon-cart.svg");
    margin:0 8px 0 0;
}

@media (max-width:375px) {
    body {
        height:1002px;
    }
    .main-container {
        margin: 80px 12px 172px 13px;
        width:350px;
        height:fit-content;
        grid-template-areas: "image" "content";
    }
    .image-container {
        width:100%;
    }
    .image-container img {
        height: 352px;
        border-radius: 8px 8px 0 0;
        width:350px;
    }
    .content-container {
        width:100%;
    }

}