:root {
    --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%);
    --black: hsl(0, 0%, 0%);
    --light-gray: hsl(0, 0%, 81%);
    --light-grayish-blue: hsl(210, 46%, 95%);
    --typography: 'Barlow Semi Condensed', sans-serif;
}


.div__container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 25px;
}
/* Card configuration for all cards */
.card {
    border-radius: 8px;
    border: 0;
}

/* Section One */
.card--one {
    background-color: var(--moderate-violet);
    background-repeat: no-repeat;
    background-position: 210px top;
}


.title--one {
    color: var(--light-grayish-blue);
}

/* header__subtitle configuration for all cards */
.header__subtitle {
    font-size: 0.7rem;
    font-weight: 500;

}

.subtitle--one {
    color: var(--light-grayish-blue);
    opacity: 0.6;
}

.one__title {
    color: var(--light-grayish-blue);
    padding: 20px 45px 20px 30px;
    font-size:15px;
}

.one__cite {
    color: var(--white);
    opacity: 1;
    font-weight: 500;
    padding: 0 50px 0 30px;

}

.one__cite a{
    color:#ffbe2b;
}
.one__cite a:hover{
    color:#fff;
}

/* Section Two */

.card--two {
    /*background-color: var(--very-dark-grayish-blue);*/
}

.title--two {
    color: var(--light-grayish-blue);
}

.subtitle--two {
    color: var(--light-grayish-blue);
    opacity: 0.6;
}

.two__title {
    color: var(--light-grayish-blue);
    padding: 20px 45px 20px 30px;
}

.two__cite {
    color: var(--light-gray);
    opacity: 0.8;
    font-weight: 500;
    padding: 0 35px 0 30px;
}

/* Section Three */

.card--three {
    background-color: var(--white);
}

.title--three {
    color: var(--very-dark-blackish-blue);
    opacity: 0.7;
}

.subtitle--three {
    color: var(--very-dark-blackish-blue);
    opacity: 0.5;
}

.three__title {
    color: var(--very-dark-grayish-blue);
    padding: 20px 45px 20px 30px;
}

.three__cite {
    color: var(--very-dark-grayish-blue);
    opacity: 0.8;
    font-weight: 500;
    padding: 0 35px 0 30px;
}

/* Section Four */

.card--four {
    background-color: var(--light-grayish-blue);
}

.title--four {
    color: var(--black);
    opacity: 0.9;
}

.subtitle--four {
    color: var(--black);
    opacity: 0.4;
}

.four__title {
    color: var(--black);
    padding: 20px 45px 20px 30px;
}

.four__cite {
    color: var(--black);
    opacity: 0.8;
    font-weight: 500;
    padding: 0 38px 0 30px;
}

/* Section Five */

.card--five {
    background-color: var(--light-gray); 
}

.title--five {
    color: var(--very-dark-grayish-blue);
}

.subtitle--five {
    color: var(--very-dark-grayish-blue);
    opacity: 0.5;
}

.five__title {
    color: var(--very-dark-grayish-blue);
    padding: 20px 45px 20px 30px;
}

.five__cite {
    color: var(--very-dark-grayish-blue);
    opacity: 0.8;
    font-weight: 500;
    line-height: 18px;
    padding: 0 43px 0 30px;
}

/* Respoonsive 768px */
@media (min-width: 768px) {


    .div__container {
        display: grid;
        /*grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(2, 1fr);*/
        grid-column-gap: 25px;
        grid-row-gap: 25px;
        }

        .card--one {
            grid-area: 1 / 1 / 2 / 3;
        }

        .card--two {
            grid-area: 1 / 3 / 2 / 4;
        }
        .card--three {
            grid-area: 2 / 1 / 3 / 2;
        }

        .card--four {
            grid-area: 2 / 2 / 3 / 4;
        }

        .card--five {
            grid-area: 1 / 4 / 3 / 5;
        }
}