:root {
    --clr-very-dark-magenta: hsl(300, 43%, 22%);
    --clr-soft-pink: hsl(333, 80%, 67%);
    --clr-dark-grayish-magenta: hsl(303, 10%, 53%);
    --clr-light-grayish-magenta: hsl(300, 24%, 96%);
    --clr-white: hsl(0, 0%, 100%);

    --ff-default: "League Spartan", sans-serif;

    --fw-400: 400;
    --fw-500: 500;
    --fw-700: 700;
}

body {
    background: url(../images/bg-pattern-top-mobile.svg) top left, url(../images/bg-pattern-bottom-mobile.svg) bottom right;
    background-repeat: no-repeat;
    background-color: var(--clr-white);
    font-family: var(--ff-default);
    font-size: 0.9375rem;
    font-weight: var(--fw-400);
    color: var(--clr-dark-grayish-magenta);
}

/* Helper classes */

.flex {
    display: flex;
    align-items: center;
}

/* Text styles */

.hero-content {
    text-align: center;
}

.hero-title {
    font-size: 2.5rem;
    line-height: 0.8;
    margin-bottom: 1.5rem;
}

.hero-title, .rating-text {
    font-weight: var(--fw-700);
    color: var(--clr-very-dark-magenta);
}

.user-name {
    font-weight: var(--fw-700);
    line-height: 1.2;
    color: var(--clr-light-grayish-magenta);
}

.user-stat {
    font-weight: var(--fw-500);
    line-height: 1.2;
    color: var(--clr-soft-pink);
}

.review-text {
    color: var(--clr-light-grayish-magenta);
}

/* Layout styles */

.wrapper {
    min-height: 100vh;
    padding: 4.25rem 0;
}

.container {
    max-width: 375px;
    padding: 0 1.5rem;
    margin: 0 auto;
}

.hero {
    margin-bottom: 3rem;
    display: flex;
    flex-direction: column;
    row-gap: 2.5rem;
}

.hero-rating {
    display: flex;
    flex-direction: column;
    row-gap: 0.875rem;
}

.rating-item {
    flex-direction: column;
    row-gap: 0.375rem;
}

.reviews {
    flex-direction: column;
    gap: 1.25rem;
}


/* General styles */

.rating-item {
    background-color: var(--clr-light-grayish-magenta);
    padding: 0.5rem;
    border-radius: 0.375rem;
}

.user-info {
    gap: 1.25rem;
    margin-bottom: 1.25rem;
}

.user-image {
    width: 2.375rem;
    border-radius: 50%;
    overflow: hidden;
}

.reviews-card {
    background-color: var(--clr-very-dark-magenta);
    padding: 2rem;
    border-radius: 0.5rem;
}


/* Media queries */

@media (min-width: 1024px) {

    body {
        background: url(../images/bg-pattern-top-desktop.svg) top left, url(../images/bg-pattern-bottom-desktop.svg) bottom right;
        background-repeat: no-repeat;
        background-color: var(--clr-white);
    }

    /* Text styles */

    .hero-content {
        text-align: left;
    }

    .hero-title {
        font-size: 3.375rem;
        line-height: 0.8;
        margin-bottom: 1.5rem;
    }

    .hero-description {
        max-width: 80%;
        font-weight: var(--fw-500);
    }


    /* Layout styles */

    .wrapper {
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .container {
        max-width: 1140px;
        margin: 0 auto;
    }

    .hero {
        margin-bottom: 3.75rem;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .hero-content {
        width: 42%;
    }

    .hero-rating {
        width: 40%;
    }

    .hero-rating {
        align-items: center;
    }

    .rating-item {
        min-width: 21.875rem;
        flex-direction: row;
        align-items: flex-start;
        column-gap: 1.5rem;
    }

    .reviews {
        min-height: 15.625rem;
        flex-direction: row;
        gap: 1.875rem;
    }

    .reviews-card {
        min-height: 13.125rem;
    }

    .rating-item:nth-child(1),
    .reviews-card:nth-child(1){
        align-self: flex-start;
    }

    .rating-item:nth-child(3),
    .reviews-card:nth-child(3) {
        align-self: flex-end;
    }

    /* General styles */

    .rating-item {
        padding: 0.75rem;
    }
}