:root {
    /*---------------- FONT FAMILY ----------------*/
    --font-family: "League Spartan", sans-serif;

    /*---------------- FONT SIZE ----------------*/
     --font-size-sm:1.4rem;
    --font-size-md:1.6rem;
    --font-size-lg:4.8rem;

    /*---------------- FONT WEIGHTS ----------------*/
    --font-weight-regular:400;
    --font-weight-medium:500;
    --font-weight-bold:700;

    /*---------------- LINE HEIGHTS ----------------*/
    --line-height:1.4;
   
    /*---------------- COLORS ----------------*/
    --color-primary:hsl(300, 43%, 22%);
    --color-secondary:hsl(333, 80%, 67%);
    --color-text:hsl(303, 10%, 53%);
    --color-rating-background:hsl(300, 24%, 96%);
    --white:hsl(0, 0%, 100%);

}

html{
    /* 10px / 16px = 62.5%*/
    font-size: 62.5%; /* 10px */
}

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

body{
    font-family: var(--font-family);
    background-image: 
        url("images/bg-pattern-top-desktop.svg"),
        url("images/bg-pattern-bottom-desktop.svg");
    background-repeat: no-repeat;
    background-position: top left, bottom right;
}

.main-container{
    height: 100vh;
    max-width: 1200px;
    width: 90%;
    display: flex;
    flex-direction: column;
    gap: 4rem;
    margin: 10rem  auto;
}

.heading-rating-container{
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 2rem;
}

.heading-paragraph-container{
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.main-heading{
    color: var(--color-primary);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    max-width: 32rem;
}

.main-paragraph{
    color: var(--color-text);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height);
    max-width: 40rem;
}

.star-rating-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1rem;
}

.stars-container, .stars-text-container{
    display: flex;
    align-items: center;
    justify-content: center;
}

.stars-container{
    gap: 1rem;
}

.stars-text-container{
    gap: 2rem;
}

.list{
    list-style: none;
    background-color: var(--color-rating-background);
    padding: 1.5rem 2rem;
    color: var(--color-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    border-radius: 1rem;
}

.list-1{
    align-self: flex-start;
}

.list-2{
    align-self: center;
}

.list-3{
    align-self: flex-end;
}
    
.testimonials{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 2rem;
    height: 25rem;
}

.cards{
    display: flex;
    flex-direction: column;
    gap: 2rem;
    background-color: var(--color-primary);
    color: var(--white);
    font-size: 1.4rem;
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height);
    padding: 3rem;
    border-radius: 1rem;
    
}

.card-1{
    align-self: start;
}

.card-2 {
    align-self: center;
 
}

.card-3 {
    align-self: end;
}

.image-name-container {
    display: flex;
    gap: 1rem;
}

.user-image {
    max-width: 40px;
    width: 100%;
    border-radius: 50%;
}

.name-buyer-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.verified-buyer{
    color: var(--color-secondary);
}

.attribution {
    text-align: center;
    font-size: var(--font-size-md);
}