@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');
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
: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-400: hsl(224, 10%, 45%);
    --Grey-500: hsl(217, 19%, 35%);
    --Dark-blue: hsl(219, 29%, 14%);
    --Black: hsl(0, 0%, 7%);
    /* Weights: 500, 600 */
}
body {
    font-family: "Barlow Semi Condensed", sans-serif;
    font-size: 13px;
    display: flex;
    justify-content: center;
    align-items: center; 
}
.grid-container {
    display: grid;
    gap: 2.8em;
    margin: 6em 2.8em;

    .card {
        padding: 2.8em;
        box-shadow: rgba(100, 100, 111, 0.2) 20px 15px 30px 10px;
        display: grid;
        gap: 1em;
        border-radius: 0.5em;
        min-width: 22.5em;

        .user {
            display: flex;
            align-items: center;
            gap: 1em;

            .user__photo {
                border-radius: 50%;
                height: 2.5em;
                outline: 2px solid var(--Purple-300);
                outline-offset: -2px;

            }

            .user__text {

                .name {
                    font-weight: 500;
                    font-size: 1.2em;
                }
                .verified {
                    font-size: 0.9em;
                    line-height: 150%;
                }
            }
        }
        .highlight {
            font-size: 1.5em;
            font-weight: 600;
        }
        .comment {
            line-height: 140%;
            font-size: clamp(1em, 0.8em + 0.5vw, 1.2em);
        }

        &:nth-child(1){
            background: var(--Purple-500);
            color: var(--Grey-100);
        }
        &:nth-child(2){
            background: var(--Grey-500);
            color: var(--Grey-100);
            .user .user__photo {
                outline: none;
            }
        }
        &:nth-child(3){
            background: var(--White);
            color: var(--Grey-500);
            .user .user__photo {
                outline: none;
            }
        }
        &:nth-child(4){
            background: var(--Dark-blue);
            color: var(--Grey-200);
        }
        &:nth-child(5){
            background: var(--Purple-200);
            color: var(--Grey-500);
            outline: none;
            .user .user__photo {
                outline: none;
            }
        }
    }
}

@media screen and (min-width: 1000px /* 1300px */) {
    
    body {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
    }
    .grid-container {
        grid-template-columns: repeat(4, 1fr);
        width: 80%;
        max-width: 1258px;;

        .card {

            &:nth-child(1){
                grid-column: span 2;
                order: 1;
                /* fondo comilla*/
                background-image: url("images/bg-pattern-quotation.svg");
                background-position: right 15% top 0em;
                background-repeat: no-repeat;

            }
            &:nth-child(2){
                grid-column: span 1;
                order: 2;
            }
            &:nth-child(3){
                grid-row: span 1;
                order: 4;
            }
            &:nth-child(4){
                grid-column: span 2;
                order: 5;
            }
            &:nth-child(5){
                grid-row: span 2;
                order: 3; 
            }
        }
    }
}