:root {
    --col-purple-50: hsl(260, 100%, 95%);
    --col-purple-300: hsl(264, 82%, 80%);
    --col-purple-500: hsl(263, 55%, 52%);
    --col-white: hsl(0, 0%, 100%);
    --col-grey-100: hsl(214, 17%, 92%);
    --col-grey-200: hsl(0, 0%, 81%);
    --col-grey-400: hsl(224, 10%, 45%);
    --col-grey-500: hsl(217, 19%, 35%);
    --col-dark-blue: hsl(219, 29%, 14%);
    --col-black: hsl(0, 0%, 7%);
}



body {
    width: 100%;
    display: grid;
    place-items: center;
    min-height: 100dvh;
}

.container {
    max-width: 1200px;
    max-height: 557px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 20px;
    grid-template-areas: "clifford--card clifford--card walters--card whittle--card"
        "harmon--card abrams--card abrams--card whittle--card";
}


/*  ----- clifford--card ----- */

.clifford--card {
    grid-area: clifford--card;
    background-color: var(--col-purple-500);
    font-family: 'barlow semi condensed', sans-serif;
    font-size: 13px;
    color: var(--col-white);
    border-radius: 10px;
    padding: 15px 23px;
}

.clifford--card img {
    width: 40px;
    border-radius: 50px;
    border: white 1px solid;
}

.intro-card {
    display: grid;
    grid-template-columns: minmax(min-content, 40px) 1fr;
    grid-template-rows: 1fr min-content;
    grid-template-areas: "img h1"
        "img h3";
}

.intro-card,
img {
    grid-area: img;
    align-items: center;
}

.intro-card,
h1 {
    align-items: end;
}

h1 {
    grid-area: h1;
    padding-left: 7px;
    font-size: 15px;
    margin: 0;
}

h3 {
    grid-area: h3;
    padding-left: 7px;
    font-size: 5px;
    margin: 0;
    font-weight: 400;
}

.clifford--card h3 {
    font-size: 13px;
}

.clifford--card p {
    line-height: 17px;
}

/*  ----- harmon--card ----- */

.harmon--card {
    grid-area: harmon--card;
    color: var(--col-grey-400);
    background-color: var(--col-white);
    font-family: 'barlow semi condensed', sans-serif;
    font-size: 13px;
    box-shadow: 1px 1px 200px 1px;
    border-radius: 10px;
    padding: 15px 23px;
}

.harmon--card img {
    width: 40px;
    border-radius: 50px;
    border: white 1px solid;
}

.intro-card-harmon {
    display: grid;
    grid-template-columns: minmax(min-content, 40px) 1fr;
    grid-template-rows: 1fr min-content;
    grid-template-areas: "img h1"
        "img h3";
}

.intro-card-harmon,
img {
    grid-area: img;
    align-items: center;
}

.intro-card-harmon,
h1 {
    align-items: end;
}

h1 {
    grid-area: h1;
    padding-left: 2px;
    font-size: 15px;
    margin: 0;
}

h3 {
    grid-area: h3;
    padding-left: 7px;
    font-size: 5px;
    margin: 0;
    font-weight: 400;
}

.harmon--card h1 {
    color: var(--col-grey-500);
}

.harmon--card h3 {
    font-size: 13px;
}

.harmon--card p {
    line-height: 17px;
}

/*  ----- walters--card ----- */

.walters--card {
    grid-area: walters--card;
    background-color: var(--col-grey-500);
    font-family: 'barlow semi condensed', sans-serif;
    font-size: 13px;
    color: var(--col-white);
    border-radius: 10px;
    padding: 15px 23px;
}

.walters--card img {
    width: 40px;
    border-radius: 50px;
    border: white 1px solid;
}

.intro-card-walters {
    display: grid;
    grid-template-columns: minmax(min-content, 40px) 1fr;
    grid-template-rows: 1fr min-content;
    grid-template-areas: "img h1"
        "img h3";
}

.intro-card-walters,
img {
    grid-area: img;
    align-items: center;
}

.intro-card-walters,
h1 {
    align-items: end;
}

h1 {
    grid-area: h1;
    padding-left: 7px;
    font-size: 15px;
    margin: 0;
}

h3 {
    grid-area: h3;
    padding-left: 7px;
    font-size: 5px;
    margin: 0;
    font-weight: 400;
}

.walters--card h3 {
    font-size: 13px;
}

.walters--card p {
    line-height: 17px;
}

/*  ----- whittle--card ----- */

.whittle--card {
    grid-area: whittle--card;
    color: var(--col-grey-400);
    background-color: var(--col-white);
    font-family: 'barlow semi condensed', sans-serif;
    font-size: 13px;
    box-shadow: 1px 1px 200px 1px;
    border-radius: 10px;
    padding: 15px 23px;
}

.whittle--card img {
    width: 40px;
    border-radius: 50px;
    border: white 1px solid;
}

.intro-card-whittle {
    display: grid;
    grid-template-columns: minmax(min-content, 40px) 1fr;
    grid-template-rows: 1fr min-content;
    grid-template-areas: "img h1"
        "img h3";
}

.intro-card-whittle,
img {
    grid-area: img;
    align-items: center;
}

.intro-card-whittle,
h1 {
    align-items: end;
}

h1 {
    grid-area: h1;
    padding-left: 7px;
    font-size: 15px;
    margin: 0;
}

h3 {
    grid-area: h3;
    padding-left: 7px;
    font-size: 5px;
    margin: 0;
    font-weight: 400;
}

.whittle--card h1 {
    color: var(--col-grey-500);
}

.whittle--card h3 {
    font-size: 13px;
}

.whittle--card p {
    line-height: 20px;
    font-weight: 500;
}

/*  ----- abrams--card ----- */

.abrams--card {
    grid-area: abrams--card;
    background-color: hsl(219, 29%, 14%);
    font-family: 'barlow semi condensed', sans-serif;
    font-size: 13px;
    color: var(--col-white);
    border-radius: 10px;
    padding: 15px 23px;
}

.abrams--card img {
    width: 40px;
    border-radius: 50px;
    border: white 1px solid;
}

.intro-abrams-card {
    display: grid;
    grid-template-columns: minmax(min-content, 40px) 1fr;
    grid-template-rows: 1fr min-content;
    grid-template-areas: "img h1"
        "img h3";
}

.intro-abrams-card,
img {
    grid-area: img;
    align-items: center;
}

.intro-abrams-card,
h1 {
    align-items: end;
}

h1 {
    grid-area: h1;
    padding-left: 7px;
    font-size: 15px;
    margin: 0;
}

h3 {
    grid-area: h3;
    padding-left: 7px;
    font-size: 5px;
    margin: 0;
    font-weight: 400;
}

.abrams--card h3 {
    font-size: 13px;
}

.abrams--card p {
    line-height: 17px;
}

/* ---- media queries tablet/phone sizes ---- */

@media (max-width: 1250px) {
    .container {
        display: flex;
        flex-direction: column;
        margin: 0 70px;
    }
}