/* primary rules */
:root {
    --Moderate-Violet: hsl(263, 55%, 52%);  /* first div color */
    --Verydark-grayish-blue: hsl(217, 19%, 35%);  /* second div color */
    --Verydark-blackish-blue: hsl(219, 29%, 14%); /* fourth div color */
    --White: hsl(0, 0%, 100%); /* third & last div color */
    --Light-gray: hsl(0, 0%, 81%); /* p & info color */
    --Lightgrayish-blue: hsl(210, 46%, 95%); /* background color */
    --font-size : 13px;
}
body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    font-family: 'Barlow Semi Condensed', sans-serif; 
    background-color: var(--Lightgrayish-blue);
}
.container > div {
    padding: 30px;
    border-radius: 10px;
}
img {
    border-radius: 50%;
}
.header {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.test-info {
    margin-left: 20px;
}
.name {
    margin-bottom: 5px;
}
.grad {
    margin-top: 5px;
}
.container {
    display: grid;
    grid-template-columns: 285px 285px 285px 285px;
    gap: 15px;
}
/* primary rules */

/*start content */
.header .name {
    font-size: 18px;
}
.header .grad {
    font-size: 15px;
    color: rgba(236, 242, 248, 0.5);
}

/*start test one */
.test-one {
    background-color: var(--Moderate-Violet);
    display: grid;
    grid-column: 1 / 3;
}
.test-one .name {
    color: var(--White);
}
.test-one .heading {
    color: var(--White);
    font-size: 25px;
    font-weight: 500;
}
.test-one .paragraph {
    color: rgba(236, 242, 248, 0.5);
    font-weight: 500;
}
.test-one img {
    border: 2px solid rgba(236, 242, 248, 0.5);
}
/* end test one */

/*start test two */
.test-two {
    background-color: var(--Verydark-grayish-blue);
}
.test-two .name {
    color: var(--White);
}
.test-two .heading {
    color: var(--White);
    font-size: 25px;
    font-weight: 500;
}
.test-two .paragraph {
    color: rgba(236, 242, 248, 0.5);
    font-weight: 500;
}
.test-two img {
    border: 2px solid rgba(236, 242, 248, 0.5);
}
/* end test two */

/*start test three */
.test-three {
    background-color: var(--White);
}
.test-three .name {
    color: var(--Verydark-grayish-blue);
}
.test-three .grad {
    color: rgba(72, 85, 106, 0.5);
}
.test-three .heading {
    color: var(--Verydark-grayish-blue);
    font-size: 25px;
    font-weight: 500;
}
.test-three .paragraph {
    color: rgba(72, 85, 106, 0.5);
    font-weight: 500;
}
.test-three img {
    border: 2px solid rgba(236, 242, 248, 0.5);
}
/* end test three */

/*start test four */
.test-four {
    background-color: var(--Verydark-blackish-blue);
    display: grid;
    grid-column: 2 / 4;
}
.test-four .name {
    color: var(--White);
}
.test-four .heading {
    color: var(--White);
    font-size: 25px;
    font-weight: 500;
}
.test-four .paragraph {
    color: rgba(236, 242, 248, 0.5);
    font-weight: 500;
}
.test-four img {
    border: 2px solid var(--Moderate-Violet);
}
/* end test four */

/*start test five */
.test-five {
    background-color: var(--White);
    display: grid;
    grid-column: 4 / 5;
    grid-row: 1 / 3;
}
.test-five .name {
    color: var(--Verydark-grayish-blue);
}
.test-five .heading {
    color: var(--Verydark-grayish-blue);
    font-size: 25px;
    font-weight: 500;
}
.test-five .paragraph {
    color: rgba(72, 85, 106, 0.5);
    font-weight: 500;
}
.test-five img {
    border: 2px solid rgba(236, 242, 248, 0.5);
}
.test-five .grad {
    color: rgba(72, 85, 106, 0.5);;
}
/* end test five */

@media (max-width: 390px) {
    .container {
        display: grid;
        grid-template-columns: 320px;
        margin-top: 40px;
        margin-bottom: 40px;
    }
    .test-one {
        display: grid;
        grid-row: 1 / 2;
        grid-column: 1 / 2;
    }
    .test-two {
        display: grid;
        grid-row: 2 / 3;
        grid-column: 1 / 2;
    }
    .test-three {
        display: grid;
        grid-row: 3 / 4;
        grid-column: 1 / 2;
    }
    .test-four {
        display: grid;
        grid-row: 4 / 5;
        grid-column: 1 / 2;
    }
    .test-five {
        display: grid;
        grid-row: 6 / 7;
        grid-column: 1 / 2;
    }
}

/*end content */