:root {
    --black: #121212;
    --white: #ffffff;
    --dark-blue: #19202D;
    --grey-100: #E7EAEE;
    --grey-200: #CFCFCF;
    --grey-400: #676D7E;
    --grey-500: #48556A;
    --purple-50: #EDE4FF;
    --purple-300: #A775F1;
    --purple-500: #733FC8;
}

body {
    display: flex;

    background-color: #F6F5F6;
    height: 100vh;
    overflow-x: hidden;
    font-family: "Barlow Semi Condensed", sans-serif;
    font-size: 13px;
    font-weight: 500;
}

.container {
    margin: auto;
    max-width: 1200px;
    padding: 24px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto;
    row-gap: 24px;
    column-gap: 32px;
}

@media (width <= 1000px) {
    .container {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (width <= 500px) {
    .container {
        grid-template-columns: 1fr;
    }
}

.card {
    padding: 32px;
    box-shadow: 40px 60px 50px -47px rgba(72, 85, 106, 0.247378);
    border-radius: 8px;
}

.card .person img {
    width: 28px;
    height: 28px;
    border-radius: 50%;
}

.person {
    display: flex;
    column-gap: 16px;
}

.title {
    margin: 16px 0;
    font-size: 20px;
    font-weight: 600;
    position: relative;
    z-index: 4;
}

.first {
    position: relative;
    grid-column: 1 / 3;
    background-color: var(--purple-500);
    z-index: 2;
}

.quotation-patter {
    position: absolute;
    top: 0;
    right: 120px;
    z-index: 3;
}

@media (width <= 500px) {
    .quotation-patter {
        display: none;
    }
}

.first .person img {
    border: 2px solid var(--purple-300);
}

.first .name {
    color: var(--white);
}

.first .position {
    color: var(--purple-50);
}

.first .title {
    color: var(--white);
}

.first .description {
    color: var(--purple-50);
}

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

.second .name {
    color: var(--white);
}

.second .position {
    color: var(--grey-100);
}

.second .title {
    color: var(--white);
}

.second .description {
    color: var(--grey-100);
}

.third {
    grid-column: 1 / 1;
    grid-row: 2 / 2;
    background-color: var(--white);
}

.third .name {
    color: var(--grey-500);
}

.third .position {
    color: var(--grey-400);
}

.third .title {
    color: var(--grey-500);
}

.third .description {
    color: var(--grey-400);
}

.fourth {
    grid-column: 2 / 4;
    grid-row: 2 / 2;
    background-color: var(--dark-blue);
}

.fourth .person img {
    border: 2px solid var(--purple-500);
}

.fourth .name {
    color: var(--white);
}

.fourth .position {
    color: var(--white);
}

.fourth .title {
    color: var(--grey-200);
}

.fourth .description {
    color: var(--grey-100);
}

.fifth {
    grid-row: span 2;
    background-color: var(--white);
}

.fifth .name {
    color: var(--grey-500);
}

.fifth .position {
    color: var(--grey-400);
}

.fifth .title {
    color: var(--grey-500);
}

.fifth .description {
    color: var(--grey-400);
}

@media (width <= 1000px) {
    .first {
        grid-column: span 2;
        grid-row: auto;
    }

    .second {
        grid-column: 1 / 1;
        grid-row: auto;
    }

    .third {
        grid-column: 2 / 2;
        grid-row: auto;
    }

    .fourth {
        grid-column: span 2;
        grid-row: auto;
    }

    .fifth {
        grid-column: span 2;
        grid-row: auto;
    }
}

@media (width <= 500px) {
    .first,
    .second,
    .third,
    .fourth,
    .fifth {
        grid-column: auto;
        grid-row: auto;
    }
}