*,*::after,*::before{
    box-sizing: border-box;
    margin:0;
    padding:0;
}
:root{
    --Light-gray: hsl(0, 0%, 81%);
    --Light-grayish-blue: hsl(210, 46%, 95%);
    --Moderate-violet: hsl(263, 55%, 52%);
     --Very-dark-grayish-blue: hsl(217, 19%, 35%);
      --Very-dark-blackish-blue: hsl(219, 29%, 14%);
       --White: hsl(0, 0%, 100%);
}
html{
    font-size: 13px;
}
body{
    font-family: 'Barlow Semi Condensed', sans-serif;
    font-weight: 500;
    background-color: var(--Light-grayish-blue);
}
.article{
    display: flex;
    flex-direction: column;
    gap:1em;
    padding:2.5em;
    border-radius: 1rem;
}
.profile{
    display: flex;
    gap:1rem;
}
.profile-relative{
    position:relative;
}
h3{
    margin-bottom: 1rem;
    font-size:1.5rem;
    position: relative;
}
p{
    position: relative;
    line-height: 1.5;
    z-index: 3;
}
.person-photo{
    border-radius: 50%;
    width:28px;
    height:28px;
}
.quotation{
    position:absolute;
    right:4em;
    bottom:-2.5em;
}
.name1,
.name2,
.name5,
.main-quote1,
.main-quote2,
.main-quote5{
    color: var(--White);
}
.graduate1,
.graduate2,
.graduate5{
    color:hsla(0, 0%, 100%,50%);
    font-size: 0.9rem;
}
.story1,
.story2,
.story5{
    color: hsla(0, 0%, 100%, 70%);
}

.name3,
.name4,
.main-quote3,
.main-quote4{
    color: var(--Very-dark-blackish-blue)
}

.graduate3,
.graduate4 {
    color: hsl(219, 29%, 14%,50%);
    font-size:0.9rem;
}

.story3,
.story4{
    color: hsl(219, 29%, 14%,70%);
}
.name1,
.name2,
.name3,
.name4,
.name5 {
    font-weight: 600;
}

.articles {
    margin:13em;
    display: grid;
    gap:1rem;
    grid-auto-columns: 1fr;
    grid-template-areas: 
    'one one two three'
    'four five five three';
    box-shadow: 1rem 3rem 3rem hsl(0, 0%, 90%);
}
article:first-child {
    background-color: var(--Moderate-violet);
    grid-area: one;
}

article:nth-child(2) {
    background-color: var(--Very-dark-grayish-blue);
    grid-area: two;
}

article:nth-child(3) {
    background-color: var(--White);
    grid-area: three;
}

article:nth-child(4) {
    background-color: var(--White);
    grid-area: four;
}

article:nth-child(5) {
    background-color: var(--Very-dark-blackish-blue);
    grid-area: five;
}
@media (min-width:801px)and (max-width:1100px) {
    .articles {
        margin: 2em;
        margin-top: 4em;
        display: grid;
        gap: 1rem;
        grid-auto-columns: 1fr;
        grid-template-areas:
            'one one two'
            'three three three'
            'four five five'
        ;
        box-shadow: 1rem 3rem 3rem hsl(0, 0%, 90%);
    }
}

@media (max-width:800px){
    .articles {
            margin:2em;
            margin-top:4em;
            display: grid;
            gap: 1rem;
            grid-auto-columns: 1fr;
            grid-template-areas:
                'one'
                'one'
                'two'
                'four'
                'five'
                'five'
                'three'
                'three';
            box-shadow: 1rem 3rem 3rem hsl(0, 0%, 90%);
        }
                .quotation {
                    position: absolute;
                    right: 1em;
                    bottom: -2.5em;
                }
}