@import url('https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

/* root */
:root {
    --clr-Moderate-violet: #7541c8;
    --clr-Very-dark-grayish-blue: #48556a;
    --clr-Very-dark-blackish-blue: #19212e;
    --clr-White: #ffffff;
    
    --clr-Light-gray: #cfcfcf;
    --clr-Light-grayish-blue: #ecf2f8;

    --ff-primary: "Barlow Semi Condensed", sans-serif;

    --fw-400: 500;
    --fw-700: 600;
  
    --fs-small: 0.6875rem;
    --fs-medium: 0.8125rem;
    --fs-large: 1.25rem;
}


/* reset */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

img {
  max-width: 100%;
  display: block;
}

body {
    font-family: var(--ff-primary);
    font-size: var(--fs-medium);
    font-weight: var(--fw-400);
    color: var(--clr-Light-grayish-blue);

    display: grid;
    place-items: center;
    min-height: 100dvh;
}


/* helper classes */
.flex {
    display: flex;
    align-items: center;
    gap: .8rem;
}

.testimonial-bg-grey {
    background: var(--clr-Very-dark-grayish-blue) !important;
}

.testimonial-bg-dark {
    background: var(--clr-Very-dark-blackish-blue) !important;
}

.testimonial-bg-light {
    background: var(--clr-White) !important;
}

.testimonial-bg-light p {
    color: var(--clr-Very-dark-grayish-blue);
}


/* text styles */
.username, .user-role {
    color: var(--clr-Light-grayish-blue);
}

.username {
    font-weight: var(--fw-700);
}

.user-role {
    opacity: 50%;
}

.testimonial-content p:not([class]) {
    opacity: 70%;
}

.testimonial-heading {
    font-size: var(--fs-large);
    color: var(--clr-White);
    margin: 1rem 0 .8rem;
}


/* components */
.testimonial {
    padding: 1.25rem;
    border-radius: .5rem;
    background: var(--clr-Moderate-violet);
}

.user-info img {
    width: 2rem;
    border-radius: 50%;
    border: 1px solid var(--clr-Light-grayish-blue);
}


/* layout styles */
.testimonial-container {
    display: grid;
    gap: 1.25rem;
    width: min(90%, 70rem);
    margin: 4rem 0;

    grid-auto-columns: 1fr;
    grid-template-areas: 
    'one'
    'two'
    'three'
    'four'
    'five'
    ;
}

.testimonial:nth-child(1) {
    grid-area: one;
}

.testimonial:nth-child(2) {
    grid-area: two;
}

.testimonial:nth-child(4) {
    grid-area: three;
}

.testimonial:nth-child(4) {
    grid-area: four;
}

.testimonial:nth-child(5) {
    grid-area: five;
}


/* media query */
@media screen and (min-width: 35em) {
    .testimonial-container {
        grid-template-areas: 
        'one one'
        'two five'
        'three five'
        'four four'
        ;
    }
}

@media screen and (min-width: 55em) {
    .testimonial-container {
        grid-template-areas: 
        'one one two five'
        'three four four five'
        ;
    }
}