styles.scss

@import url("https://fonts.googleapis.com/css2?family=Fraunces:wght@700&family=Montserrat:wght@500&display=swap");

$dark-cyan: hsl(158, 36%, 37%);
$cream: hsl(30, 38%, 92%);
$very-dark-blue: hsl(212, 21%, 14%);
$dark-grayish-blue: hsl(228, 12%, 48%);
$white: hsl(0, 0%, 100%);
$dark-blue: hsl(180, 100%, 18.65%);

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    background-color: $cream !important;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
}

.container {
    max-width: 900px;
    width: 100%;
   
    .product-card{    
        background-color: hsl(0, 0%, 100%);
        border-radius: 1.1rem;
        overflow: hidden;
        margin: 100px auto 10px auto;

        .image-section {
            flex: 1.1;
        
            picture {       
              img {
                width: 100%;
                height: auto;
              }
            }
          }        

        .content-section {
            flex: 1;
        
            .category {
              font-family: 'Montserrat', sans-serif;
              font-size: 14px;
              font-weight: 500;
              color: $dark-grayish-blue;
              letter-spacing: 5px;
            }
        
            .product-title {
              font-family: 'Fraunces', serif;
              font-size: 3.4rem;
              font-weight: 700;
              color: $very-dark-blue;
              line-height: 1;
            }
        
            .product-description {
              font-size: 1.2rem;
              color: $dark-grayish-blue;
            }
        
            .price-wrapper {        
              .current-price{
                    font-family: 'Fraunces', serif;
                    font-size: 2.8rem;
                    color: $dark-cyan;
                }
        
              .original-price {
                font-size: 1rem;
                color: $dark-grayish-blue;
                margin-left: 15px;
              }
            }

            .btn-add-to-cart {
                background-color: $dark-cyan;
                color: $white;
                font-family: 'Montserrat', sans-serif;
                font-size: 1rem;
                border: none;
                border-radius: 10px;
                transition: all 0.3s ease;
          
                &:hover {
                  background-color: $dark-blue;
                  transform: scale(1.05);
                  box-shadow: 0 4px 14px darken($color: $dark-blue, $amount: 2%);
                }
            }
        }  
    }
}

footer{
    color: $very-dark-blue;

    a,
    a:visited{
        font-family: 'Fraunces', serif;
        color: $dark-blue;
    }
}