@import url("https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:wght@300;500;600&display=swap");

*,
*::before,
*::after {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    outline: none;
}

:root {
    /* Colors */
    /* Primary */

    --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%);

    /* Neutral */

    --light-gray: hsl(0, 0%, 81%);
    --light-grayish-blue: hsl(210, 46%, 95%);

    /* Fonts */

    --font-barlow-semi-condensed: "Barlow Semi Condensed", sans-serif;
}

html {
    font-size: 13px;
}

body {
    font-family: var(--font-barlow-semi-condensed);
    background-color: var(--Light-grayish-blue);
    padding: 5rem 2rem;
}

.card {
    border-radius: 0.6rem;
    padding: 2.6rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    box-shadow: 0px 12px 12px 0px hsl(217, 19%, 35%, 0.1);
}

.card__cite {
    display: flex;
    align-items: center;
}

.card__cite img {
    height: 2.5rem;
    border-radius: 50%;
    margin-right: 1rem;
}

.card__cite-name {
    font-size: 1rem;
    font-weight: 600;
    font-style: normal;
}

.card__cite-sign {
    font-style: normal;
    font-size: 0.9rem;
    opacity: 0.8;
    font-weight: 300;
}

.card__quote {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 2rem;
}

.card__words {
    font-weight: 300;
    opacity: 0.8;
    line-height: 1.5rem;
}

.bwhite__cite-sign,
.swhite__cite-sign,
.bwhite__words,
.swhite__words {
    font-weight: 400;
}

.purple {
    background-color: var(--moderate-violet);
    background-image: url(../images/bg-pattern-quotation.svg);
    background-repeat: no-repeat;
    background-position: 15rem 0rem;
}

.gray {
    background-color: var(--very-dark-grayish-blue);
}

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

.black {
    background-color: var(--very-dark-blackish-blue);
}

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

.purple,
.gray,
.black {
    color: var(--white);
}

.swhite,
.bwhite {
    color: var(--very-dark-grayish-blue);
}

.purple img,
.black img {
    border: 2px solid hsl(263, 55%, 72%);
}

main {
    display: grid;
    row-gap: 2rem;
}

@media (min-width: 1300px) {
    body {
        padding: 12.5rem 10rem 0rem 10rem;
        background-color: var(--light-grayish-blue);
        display: grid;
        place-content: center;
    }
    .purple {
        background-position: 24rem 0rem;
        grid-area: p;
    }
    .gray {
        grid-area: g;
    }
    .swhite {
        grid-area: sw;
    }
    .black {
        grid-area: b;
    }
    .bwhite {
        grid-area: bw;
    }
    main {
        display: grid;
        grid-template-areas:
            "p p g bw"
            "sw b b bw";
        gap: 2.5rem;
        margin: auto;
    }
}