:root {
    --purple-50: hsl(260, 100%, 95%);
    --purple-300: hsl(264, 82%, 80%);
    --purple-500: hsl(263, 55%, 52%);

    --white: hsl(0, 0%, 100%);
    --grey-100: hsl(214, 17%, 92%);
    --grey-200: hsl(0, 0%, 81%);
    --grey-300: #A3AAB4;
    --grey-400: hsl(224, 10%, 45%);
    --grey-500: hsl(217, 19%, 35%);
    --dark-blue: hsl(219, 29%, 14%);
    --black: hsl(0, 0%, 7%);
}

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

html {
    font-size: 13px;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    font-family: "Barlow Semi Condensed", sans-serif;
    background-color: #F6F5F6;
}

.testimonials-layout {
    display: grid;
    justify-items: center;
    grid-template-columns: 1fr;
    margin-inline: .5rem;
    place-items: center;
}

.boxes {
    display: flex;
    flex-direction: column;
    gap: 1.23rem;
    padding: 2.46rem;
    margin: 0 2.46rem 2.46rem;
    border-radius: .5rem;
    max-width: 23.46rem;
    box-shadow: 40px 60px 50px -47px rgba(72, 85, 106, 60%);
    transition: all 0.3s ease;
    line-height: 1.2;
}

.testimonial-user {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1.06rem;
}

.user-image {
    border-radius: 50%;
    width: 2.5rem;
    height: 2.5rem;
    border: 2px solid var(--purple-300);
}

.user-name {
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.1;
}

.user-verification {
    font-size: 0.84rem;
    font-weight: 500;
    line-height: 1.1;
}

.testimonial-user span {
    display: block;
}

.user-description {
    font-size: clamp(1.3rem, 2vw, 1.53rem);
    font-weight: 500;
    line-height: 1.2;
}

.user-review {
    font-size: clamp(.9rem, 2vw, 1.3rem);
    font-weight: regular;
    line-height: 1.4;
}

.box-1 {background-color: var(--purple-500); margin-top: 32px;}
.box-1 .user-name {color: var(--white);}
.box-1 .user-verification {color: var(--purple-50);}
.box-1 .user-description {color: var(--white);}
.box-1 .user-review {color: var(--purple-50);}
.box-1 img {border: 2px solid var(--purple-300);}

.box-2 {background-color: var(--grey-500);}
.box-2 .user-name {color: var(--white);}
.box-2 .user-verification {color: var(--grey-300);}
.box-2 .user-description {color: var(--white);}
.box-2 .user-review {color: var(--grey-100);}
.box-2 img {border: 2px solid var(--grey-100);}

.box-3 {background-color: var(--white);}
.box-3 .user-name {color: var(--grey-500);}
.box-3 .user-verification {color: var(--grey-400);}
.box-3 .user-description {color: var(--grey-500);}
.box-3 .user-review {color: var(--grey-400);}
.box-3 img {border: none;}

.box-4 {background-color: var(--dark-blue);}
.box-4 .user-name {color: var(--white);}
.box-4 .user-verification {color: var(--white);}
.box-4 .user-description {color: var(--grey-200);}
.box-4 .user-review {color: var(--grey-100);}
.box-4 img {border: 2px solid var(--purple-500);}

.box-5 {background-color: var(--white);}
.box-5 .user-name {color: var(--grey-500);}
.box-5 .user-verification {color: var(--grey-300);}
.box-5 .user-description {color: var(--grey-500);}
.box-5 .user-review {color: var(--grey-400);}
.box-5 img {border: none;}

@media (min-width: 768px) {
    .testimonials-layout {
        padding: 32px;
        grid-template-columns: repeat(2, 1fr);
        grid-column-gap: 32px;
        grid-row-gap: 32px;
    }

    .boxes {
        margin: 0;
        max-width: none;
        height: auto;
        align-self: stretch;

    }

    .box-2, .box-3 {
        max-height: 307.5px;
    }

    .box-1, .box-4, .box-5 {
        grid-column: span 2;
    }

    .box-1 {
        grid-row: 1/2;
        background-image: url('../assets/images/bg-pattern-quotation.svg');
        background-repeat: no-repeat;
        background-position: top right 15%;
    }

    .box-2 {
        grid-column: 1;
        grid-row: 2/3;
    }

    .box-3 {
        grid-column: 2;
        grid-row: 2/3;
    }

    .box-5 {
        grid-row: 4/5;   
    }
}

@media (min-width: 1024px) {
    .testimonials-layout {
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: auto;
    }

    .boxes {
        max-width: none;
        max-height: none;
        display: flex;
        flex-direction: column;
        height: auto;
        align-self: stretch;
        padding: 1.5rem;
    }

    .box-1 {
        grid-column: 1/3;
        grid-row: 1/2;
        background-position: top right 30%;
    }

    .box-2 {
        grid-column: 3/4;
        grid-row: 1/2;
    }

    .box-3 {
        grid-column: 1/2;
        grid-row: 2/3;
    }


    .box-5 {
        grid-row: 1/3;
    }
}