/* universal */
:root {
    /* colors */
    --white: rgb(255, 255, 255);
    --purple-900: rgb(81, 32, 81);
    --purple-300: rgb(146, 123, 145);
    --purple-100: rgb(247, 242, 247);
    --pink-400: rgb(238, 105, 164);
    --orange-400: rgb(239, 149, 70);
    --gradient-1: linear-gradient(90deg,rgba(138, 67, 137, 0) 0%, rgba(81, 32, 81, 1) 100%);

    /* text-preset-1 */
    --font-size-1: 3.5rem; /* 56px */
    --font-weight-1: 700; /* bold */
    --line-height-1: 0.85;

    /* text-preset-2 */
    --font-size-2: 2.5rem; /* 40px */
    --font-weight-2: 700; /* bold */
    --line-height-2: 0.85;

    /* text-preset-3 */
    --font-size-3: 1.1875rem; /* 19px */
    --font-weight-3: 500; /* medium */
    --line-height-3: 1.35;

    /* text-preset-4 */
    --font-size-4: 1.0625rem; /* 17px */
    --font-weight-4-bold: 700; 
    --line-height-4-bold: 1;

    --font-weight-4-medium: 500;
    --line-height-4-medium: 1.3;

    --font-weight-4-regular: 400;    
    --line-height-4-regular: 1;

    /* spacings */
    --spacing-0: 0;
    --spacing-100: 0.5rem; /* 8px */
    --spacing-200: 1rem; /* 16px */
    --spacing-300: 1.5rem; /* 24px */
    --spacing-400: 2rem; /* 32px */
    --spacing-600: 3rem; /* 48px */
    --spacing-1000: 6rem; /* 96px */
}

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

body {
    font-family: "League Spartan", sans-serif;
    min-height: 100vh;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* mobile */ 

.main-container, .container, .description {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-400);
}

.main-container {
    padding: var(--spacing-400);
    max-width: 1350px;
}

.description {
    text-align: center;
}

.description h1 {
    font-size: var(--font-size-2);
    line-height: var(--line-height-2);
    font-weight: var(--font-weight-2);
    color: var(--purple-900);
}

.description p {
    font-size: var(--font-size-3);
    line-height: var(--line-height-3);
    font-weight: var(--font-weight-3);
    color: var(--purple-300);
}

.ratings {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-200);
}

.reviews, .report-guru, .besttech {
    background-color: var(--purple-100);
    border-radius: var(--spacing-100);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--spacing-100);
    gap: var(--spacing-100);
}

.reviews, .report-guru, .besttech > p {
    font-size: var(--font-size-4);
    font-weight: var(--font-weight-4-bold);
    line-height: var(--line-height-4-bold);
    color: var(--purple-900);
}

.testimonials-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-400);
}

.customer {
    display: flex;
    align-items: center;
    gap: var(--spacing-100);
}

.customer p.name {
    font-size: var(--font-size-4);
    font-weight: var(--font-weight-4-bold);
    line-height: var(--line-height-4-bold);
    color: var(--white);
}

.customer p.buyer {
    font-size: var(--font-size-4);
    font-weight: var(--font-weight-4-regular);
    line-height: var(--line-height-4-regular);
    color: var(--pink-400);
}

.testimonial-1, .testimonial-2, .testimonial-3 {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-300);
    background-color: var(--purple-900);
    border-radius: var(--spacing-100);
    padding: var(--spacing-300);
}

.testimonial-1, .testimonial-2, .testimonial-3 > p {
    font-size: var(--font-size-4);
    font-weight: var(--font-weight-4-medium);
    line-height: var(--line-height-4-medium);
    color: var(--white);   
}

/* tablet */
@media only screen and (min-width: 768px) {
    .main-container {
        padding: var(--spacing-1000);
    }
}

/* desktop */
@media only screen and (min-width: 1024px) {
    body {
        background-image: url('/resources/images/bg-pattern-top-desktop.svg');
        background-repeat: no-repeat;
        background-size: contain;
        background-position: right -25rem;
        overflow: hidden;
    }

    .main-container {
        gap: var(--spacing-600);
    }

    .container {
        flex-direction: row;
    }

    .description {
        text-align: left;
        width: 50%;
    }

    .ratings {
        grid-template-rows: repeat(3, 1fr);
        width: 50%;
    }

    .reviews, .report-guru, .besttech {
        flex-direction: row; 
        width: 27rem;
        justify-content: center;
    }

    .reviews {
        justify-self: start;
    }

    .report-guru {
        justify-self: center;
    }

    .besttech {
        justify-self: end;
    }

    .testimonials-container {
        grid-template-columns: repeat(3, 1fr);
        height: 19rem;
    }

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

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

    .testimonial-3 {
        align-self: flex-end;
    }
}