/************************** Global ***************************/

:root {
    --black: hsl(0, 0%, 7%);
    --dark-blue: hsl(219, 29%, 14%);
    --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%);

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

    --bg-color: hsl(300, 5%, 96%);
    --shadow-color: hsla(217, 19%, 35%, 0.25);
}

.text-preset-1 {
    font-weight: 600;
    font-size: 1.25rem;
    line-height: 1.2;
}

.text-preset-2 {
    /*standard set in body*/
    font-family: "Barlow Semi Condensed", sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 0.8125rem;
    line-height: 1.1;
    letter-spacing: 0;
}

.text-preset-3 {
    line-height: 1.4;
}

.text-preset-4 {
    font-size: 0.6875rem;
}

/********************* Standard Resets ***********************/

*,
*::before,
*::after {
    /* Ensures padding & border remain within element's size */
    box-sizing: border-box;
}

* {
    /* Remove browser's default margin, padding, and font settings */
    margin: 0;
    padding: 0;
    /* Ensures forms, buttons, etc., match the document font */
    font: inherit;
}

img,
picture,
svg,
video {
    /* Prevents inline spacing issues */
    display: block;
    /* Ensures media scales within parent container */
    max-width: 100%;
}

/*************************************************************/

body {
    background-color: var(--bg-color);

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

    /* text-preset-2 */
    font-family: "Barlow Semi Condensed", sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 0.8125rem;
    line-height: 1.1;
    letter-spacing: 0;
}

.wrapper {
    max-width: 19.0625rem;
    display: grid;
    gap: 2rem 2rem;
}

article {
    border-radius: 0.5rem;
    padding: 2rem;
    box-shadow: 2.5rem 3.75rem 3.125rem -0.25rem var(--shadow-color);
}

.flex {
    display: flex;
    gap: 1.0625rem;
    align-items: center;
    margin-bottom: 1rem;
}

.user-name {
    margin-bottom: 0.1875rem;
}

.user-pic {
    border-radius: 50%;
    max-width: 1.75rem;
}

.user-role {
    /*text-preset-4*/
    font-size: 0.6875rem;
}

.top-quote {
    /*text-preset-1*/
    font-weight: 600;
    font-size: 1.25rem;
    line-height: 1.2;
    margin-bottom: 1rem;
}

.detailed-quote {
    /*text-preset-1*/
    line-height: 1.4;
    
}


/*** t1 ****/
#t1 {
    background-color: var(--purple500);
    color: var(--white);
}

#t1>.user-role,
#t1>.detailed-quote {
    color: var(--purple-50);
}

#t1 .user-pic {
border: 2px solid var(--purple-300);
}


/*** t2 ****/
#t2 {
    background-color: var(--grey-500);
    color: var(--white);
}

#t2>.user-role,
#t2>.detailed-quote {
    color: var(--grey-100);
}


/*** t3 ****/
#t3 {
    background-color: var(--white);
    color: var(--grey-500);
}

#t3>.user-role,
#t3>.detailed-quote {
    color: var(--grey-400);
}


/*** t4 ****/
#t4 {
    background-color: var(--dark-blue);
    color: var(--white)
}

#t4>.top-quote {
    color: var(--grey-200);
}

#t4>.detailed-quote {
    color: var(--grey-100);
}

#t4 .user-pic {
    border: 2px solid var(--purple-300);
}


/*** t5 ****/
#t5 {
    background-color: var(--white);
    color: var(--grey-500);
}

#t5>.user-role,
#t5>.detailed-quote {
    color: var(--grey-400);
}

/************************ Responsive *************************/

/* Tablet (min-width: 40.5rem) */
@media (min-width: 40.5rem) {

    .wrapper {
        max-width: 40.4375rem;
        gap: 2rem 2rem;
        grid-template-columns: repeat(2, 1fr);
    }

    #t1 {
        grid-column: span 2;
        background-image: url("./images/bg-pattern-quotation.svg");
        background-repeat: no-repeat;
        background-position: top right 31%;
    }

    #t4 {
        grid-column: span 2;
    }

    #t5 {
        grid-column: span 2;
    }
}

/* Desktop (min-width: 70rem) */
@media (min-width: 70rem) {

    .flex {
            gap: 1rem;
        }

    .wrapper {
        max-width: 69.625rem;
        gap: 1.5rem 2rem;
        grid-template-columns: repeat(4, 1fr);
    }

    #t1 {
        background-position: top right 14.2%;
    }

    #t5 {
        grid-column: 4;
        grid-row: 1 / span 2;
    }
}