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

:root {
    /* primary color */
    --50purple: hsl(260, 100%, 95%);
    --300purple: hsl(264, 82%, 80%);
    --500purple: hsl(263, 55%, 52%);

    /* neutral color */
    --100gray: hsl(214, 17%, 92%);
    --200gray: hsl(0, 0%, 81%);
    --400gray: hsl(224, 10%, 45%);
    --500gray: hsl(217, 19%, 35%);
    --darkblue: hsl(219, 29%, 14%);
}

img {
    max-width: 100%;
    display: block;
}

body {
    background-color: var(--100gray);
    min-height: 100vh;
    font-family: "Barlow Semi Condensed", serif;
    display: grid;
    place-content: center;
}

.main-container {
    max-width: 1440px;
    margin: 1rem;
    display: grid;
    grid-template-areas:
    "item1 item1 item2 item3"
    "item4 item5 item5 item3";
    grid-auto-columns: 1fr;
    gap: 1.5rem;
}

.main-container .container-item {
    padding: 2rem 2.65rem;
    border-radius: .5rem;
}

.main-container .container-item:nth-child(1) {
    grid-area: item1;
    background-color: var(--500purple);
    position: relative;
}

.main-container .container-item:nth-child(1) .person {
    color: white;
    position: relative;
    z-index: 5;
}

.main-container .container-item:nth-child(1) .topic {
    color: white;
    position: relative;
    z-index: 5;
}

.main-container .container-item:nth-child(1) .article {
    color: var(--200gray);
}

.main-container .container-item:nth-child(1) .quotation {
    width: 130px;
    position: absolute;
    top: 0;
    right: 100px;
}

.main-container .container-item:nth-child(2) {
    grid-area: item2;
    background-color: var(--400gray);
    position: relative;
}

.main-container .container-item:nth-child(2) .person {
    color: white;
    position: relative;
    z-index: 5;
}

.main-container .container-item:nth-child(2) .topic {
    color: white;
    position: relative;
    z-index: 5;
}

.main-container .container-item:nth-child(2) .article {
    color: var(--200gray);
}

.main-container .container-item:nth-child(3) {
    grid-area: item3;
    background-color: white;
}

.main-container .container-item:nth-child(3) .topic {
    color: var(--darkblue);
}

.main-container .container-item:nth-child(3) .article {
    color: var(--500gray);
}

.main-container .container-item:nth-child(4) {
    grid-area: item4;
    background-color: white;
}

.main-container .container-item:nth-child(4) .topic {
    color: var(--darkblue);
}

.main-container .container-item:nth-child(4) .article {
    color: var(--500gray);
}

.main-container .container-item:nth-child(5) {
    grid-area: item5;
    background-color: var(--darkblue);
}

.main-container .container-item:nth-child(5) .person {
    color: white;
}

.main-container .container-item:nth-child(5) .topic {
    color: white;
}

.main-container .container-item:nth-child(5) .article {
    color: var(--200gray);
}

.main-container .container-item .person {
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.main-container .container-item .person img {
    width: 35px;
    border-radius: 50%;
}

.main-container .container-item .person h1 {
    font-size: 1.15rem;
}

.main-container .container-item .topic {
    margin-bottom: 1.5rem;
    font-size: 1.65rem;
    font-weight: 600;
}

.main-container .container-item .article {
    font-size: 1.1rem;
    line-height: 1.3;
}

@media (max-width: 1024px) {
    .main-container {
        grid-template-areas:
        "item1 item1 item2 item2"
        "item4 item4 item3 item3"
        "item5 item5 item5 item5";
    }

    .main-container .container-item:nth-child(1) .quotation {
        right: 40px;
    }
}

@media (max-width: 768px) {
    .main-container {
        grid-template-areas:
        "item1"
        "item2"
        "item4"
        "item5"
        "item3";
    }
}