@import url('https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:wght@500;600&display=swap');

:root {
    /* colors */
    --black: rgb(18, 18, 18);
    --dark-blue: rgb(25, 32, 45);
    --white: rgb(255, 255, 255);

    --grey-100: rgb(231, 234, 2348);
    --grey-200: rgb(207, 207, 207);
    --grey-400: rgb(103, 109, 126);
    --grey-500: rgb(72, 85, 106);

    --purple-50: rgb(237, 228, 255);
    --purple-300: rgb(167, 117, 241);
    --purple-500: rgb(115, 63, 200);

    /* typography */
    --fs-1: 1.25rem; /* 20px */
    --lh-1: 120%;
    --fw-1: 600;
    
    --fs-2: 0.8125rem; /* 13px */
    --lh-2: 110%;
    --fw-2: 500;

    --fs-3: 0.8125rem; /* 13px */
    --lh-3: 140%;
    --fw-3: 500;

    --fs-4: 0.6875rem; /* 11px */
    --lh-4: 110%;
    --fw-4: 500;

    /* spacing */
    --spacing-40: 2.5rem; /* 40px */
    --spacing-32: 2rem; /* 32px */
    --spacing-24: 1.5rem; /* 24px */
    --spacing-16: 1rem; /* 16px */
    --spacing-8: 0.5rem; /* 8px */
    --spacing-4: 0.25rem; /* 4px */ 
}

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

body {
    font-family: 'Barlow Semi Condensed', sans-serif;
    max-width: 1114px;
    margin: 0 auto;
    background-color: #F6F5F6;
    display: flex;
    align-items: center;
    height: 100vh;
}

p.graduate-name {
    font-size: var(--fs-2);
    font-weight: var(--fw-2);
    line-height: var(--lh-2);
}

p.verified-graduate {
    font-size: var(--fs-4);
    font-weight: var(--fw-4);
    line-height: var(--lh-4);
}

p.testimonial {
    font-size: var(--fs-3);
    font-weight: var(--fw-3);
    line-height: var(--lh-3);
}

p.testimonial-quote {
    font-size: var(--fs-1);
    font-weight: var(--fw-1);
    line-height: var(--lh-1);
}

main {
    display: grid;
    padding: var(--spacing-40) var(--spacing-32);
    gap: var(--spacing-32);
}

div {
    display: flex;
    flex-direction: column;
}

.container {
    padding: var(--spacing-32);
    gap: var(--spacing-16);
    border-radius: var(--spacing-8);
    box-shadow: 10px 7px 7px rgb(72, 85,106, 0.1);
}

.graduate-container {
    flex-direction: row;
    gap: var(--spacing-16);
    align-items: center;
}

.graduate-container img {
    width: 2.5rem;
    border-radius: 50%;
}

.graduate-content {
    gap: var(--spacing-4);
}

.daniel {
    background-color: var(--purple-500);
    color: var(--white);
}

.daniel img {
    border: 0.2rem solid var(--purple-300);
}

.daniel p.verified-graduate {
    color: var(--purple-50);
}

.daniel p.testimonial {
    color: var(--purple-50);
}

.jonathan {
    background-color: var(--grey-500);
    color: var(--white);
}

.jonathan img {
    border: 0.2rem solid var(--grey-400);
}

.jonathan p.verified-graduate {
    color: var(--grey-200);
}

.jonathan p.testimonial {
    color: var(--grey-200);
}

.jeanette {
    background-color: var(--white);
    color: var(--grey-500);
}

.jeanette p.verified-graduate {
    color: var(--grey-400);
}

.jeanette p.testimonial {
    color: var(--grey-400);
}

.patrick {
    background-color: var(--dark-blue);
    color: var(--white);
}

.patrick img {
    border: 0.2rem solid var(--purple-500);
}

.patrick p.testimonial-quote {
    color: var(--grey-200);
}

.patrick p.testimonial {
    color: var(--grey-100);
}

.kira {
    background-color: white;
    color: var(--grey-500);
}

.kira p.verified-graduate {
    color: var(--grey-200);
}

.kira p.testimonial {
    color: var(--grey-400);
}

/* ===
TABLET
===*/ 
@media only screen and (min-width: 768px) {
    .daniel {
        background-image: url('/resources/images/bg-pattern-quotation.svg');
        background-repeat: no-repeat;
        background-position: 75% 0;
    }

    main {
        grid-template-areas: 
        'daniel daniel'
        'jonathan jeanette'
        'patrick patrick'
        'kira kira';
        grid-template-columns: repeat(2, 1fr);
    }

    .daniel { grid-area: daniel; }
    .jonathan { grid-area: jonathan; }
    .jeanette { grid-area: jeanette; }
    .patrick { grid-area: patrick; }
    .kira { grid-area: kira; }
}

/* === DESKTOP
=== */
@media only screen and (min-width: 1024px) {
    main {
        grid-template-areas:
        'daniel daniel jonathan kira'
        'jeanette patrick patrick kira';
        grid-template-columns: repeat(4, 1fr);
    }

}