:root {
    /* Colors */
    --primary-moderate_violet: hsl(263, 55%, 52%);
    --primary-very-dark-grayish-blue: hsl(217, 19%, 35%);
    --primary-very-dark-blackish-blue: hsl(219, 29%, 14%);
    --primary-white: hsl(0, 0%, 100%);

    --neutral-light-gray: hsl(0, 0%, 81%);
    --neutral-light-grayish-blue: hsl(210, 46%, 95%);

    --font-family: 'Barlow Semi Condensed', sans-serif;
    --font-size: 13px;
}

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

body {
    font-family: var(--font-family);
    font-size: var(--font-size);   
    background-color: var(--neutral-light-grayish-blue); 
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

.main-grid-container {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-gap: 1rem;
    margin: 3rem 1rem;
}

.card {
    border-radius: 5px;
    padding: 1rem;
}

.card-name-container {
    display: flex;
    flex-direction: row;
    padding-bottom: 1rem;
}

.card-name-container img {
    margin-right: 1rem;
    border-radius: 50%;
    height: 2rem;
}

.card-name {
    display: flex;
    flex-direction: column;
}

.card-heading {
    font-size: 22px;
    font-weight: 500;
    padding-bottom: 1rem;
}

.card-testimonial {
    padding-bottom: 1rem;
    line-height: 1.5;
}

#card-1-container {
    background-color: var(--primary-moderate_violet);
    color: var(--primary-white);
    font-weight: 500;
}

#card-2-container {
    background-color: var(--primary-very-dark-grayish-blue);
    color: var(--primary-white);
}

#card-3-container {
    background-color: var(--primary-white);
    color: var(--primary-very-dark-grayish-blue);
}

#card-4-container {
    background-color: var(--primary-very-dark-blackish-blue);
    color: var(--primary-white);
}

#card-5-container {
    background-color: var(--primary-white);
    color: var(--primary-very-dark-grayish-blue);
}



.verified-graduate {
    opacity: 50%
}

.card-testimonial {
    opacity: 70%;
}


@media(min-width: 768px) {

    

    .main-grid-container { 
        max-width: 1110px; 
        margin: 3rem 2rem;      
        display: grid;
        grid-template-columns: repeat(4, 1fr);      
    }

    #card-1-container {
        grid-column: 1 / span 2;
    }

    #card-4-container {
        grid-column: 2 / span 2;        
    }

    #card-5-container {
        grid-column: 4 / span 1;
        grid-row: 1 / span 2;
        padding-bottom: 0;
        margin-bottom: 0;
    }

}