:root {

    --ff: 'Barlow Semi Condensed', sans-serif;

    --fw-500: 500;
    --fw-600: 600;



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


    --clr-White: hsl(0, 0%, 100%);
    --clr-Grey-100: hsl(214, 17%, 92%);
    --clr-Grey-200: hsl(0, 0%, 81%);
    --clr-Grey-400: hsl(224, 10%, 45%);
    --clr-Grey-500: hsl(217, 19%, 35%);
    --clr-Dark-blue: hsl(219, 29%, 14%);
    --clr-Black: hsl(0, 0%, 7%);



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


    body {
        min-height: 100vh;
        font-family: var(--ff);
        font-size: .8125rem
            /* 13/16 */
        ;
        color: var(--clr-White);
        background-color: var(--clr-Grey-100);
        display: flex;
        justify-content: center;


    }

    .container {
        max-width: 1200px;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 1.25rem;
        justify-content: center;
        align-content: center;
        margin: auto 15%;


    }

    @media screen and (max-width :768px) {
        .container {
            grid-template-columns: 1fr;

            margin: 70px 30px;
        }

        .box {
            grid-column: 1;
        }

        .box:nth-child(1) {
            grid-column: 1;
            grid-row: 1;
        }

        .box:nth-child(2) {
            grid-column: 1;
            grid-row: 2;
        }

        .box:nth-child(4) {
            grid-column: 1;
            grid-row: 4;
        }

        .box:nth-child(5) {
            grid-column: 1;
            grid-row: 5;
        }

    }



    .box {
        border-radius: .625rem
            /* 10/16 */
        ;
        padding: 1.875rem
            /* 30/16 */
        ;
        box-shadow: 30px 35px 23px 3px rgba(0, 0, 0, 0.23);
    }

    .box-daniel {
        background-color: var(--clr-Purple-500);
        grid-column: 1 / 3;
        background-image: url(images/bg-pattern-quotation.svg);
        background-repeat: no-repeat;
        background-position: top 10px right 100px;


    }

    .box-Jonathan {
        background-color: var(--clr-Grey-500);
        grid-column: 3 / 4;
    }

    .box-Jeanette {
        background-color: var(--clr-White);
        grid-column: 1 /2;
        color: var(--clr-Grey-400);
    }

    .box-Patrick {
        background-color: var(--clr-Dark-blue);
        grid-column: 2 / 4;
    }

    .box-Kira {
        background-color: var(--clr-White);
        grid-column: 4 / 5;
        grid-row: 1 / 3;
        color: var(--clr-Grey-400);
    }

    img {
        width: 1.875rem
            /* 30/16 */
        ;
        height: 1.875rem
            /* 30/16 */
        ;
        border-radius: 50%;
    }

    .name-box {
        display: flex;
        align-items: center;
        gap: .9375rem
            /* 15/16 */
        ;

    }

    .name {
        font-size: .75rem
            /* 12/16 */
        ;
    }

    .status {
        font-size: .625rem
            /* 10/16 */
        ;
        margin-top: .1875rem
            /* 3/16 */
        ;
    }

    .content {
        margin-top: 1rem;
    }

    .title {
        font-size: 1.125rem
            /* 18/16 */
        ;
        font-weight: var(--fw-600);
        margin-bottom: 1rem;
    }

    .subtitle {
        font-size: .75rem
            /* 12/16 */
        ;
        font-weight: var(--fw-500);
        line-height: 1.5;
        font-weight: 31.25rem
            /* 500/16 */
        ;
        opacity: 70%;

    }