*,
*::before,
*::after {
    box-sizing: border-box;
}


html {
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
}

html:focus-within {
    scroll-behavior: smooth;
}


body,
h1, h2, h3, h4, p,
figure, blockquote, dl, dd {
    margin: 0;
}


body {
    min-height: 100vh;
    line-height: 1.5;
    text-rendering: optimizeSpeed;
    font-family: inherit;
}


h1, h2, h3, h4,
button, input, label {
    line-height: 1.1;
}


h1, h2,
h3, h4 {
    text-wrap: balance;
}


a:not([class]) {
    text-decoration-skip-ink: auto;
    color: currentColor;
}


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


input, button,
textarea, select {
    font-family: inherit;
    font-size: inherit;
}


textarea:not([rows]) {
    min-height: 10em;
}


:target {
    scroll-margin-block: 5ex;
}


ul[role='list'],
ol[role='list'] {
    list-style: none;
}

:root {

    --purple-50:hsl(260, 100%, 95%);
    --purple-300:hsl(264, 82%, 80%);
    --purple-500:hsl(263, 55%, 52%);

    --white: hsl(0, 0%, 100%);
    --grey-100:hsl(214, 17%, 92%);
    --grey-200:hsl(0, 0%, 81%);
    --grey-400:hsl(224, 10%, 45%);
    --grey-500:hsl(217, 19%, 35%);
    --Dark-Blue:hsl(219, 29%, 14%);
    --black:hsl(0, 0%, 7%);

    --fw-500:500;
    --fw-600:600;
    
    --ff:"Barlow Semi Condensed", sans-serif;
    --fs: 13px;

}

body {
    font-family: var(--ff);
    font-size: var(--fs);
    background-color: var(--grey-100);
}

/* desktop version */


.container {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;

    padding: 0 10rem;
}

.wrapper{
    display: grid;
    grid-template-areas:
    "c1 c1 c2 c3"
    "c4 c5 c5 c3";
    gap:2rem;
}

.cards{
    padding: 1.6rem;
    
    display: flex;
    flex-direction: column;
    gap: 1rem;

    border-radius: 8px;
}

.intro {
    display: flex; 
    gap: 1.2rem;
}

.profile_image {
    width: 28px;
    aspect-ratio: 1;
    border-radius: 50%;
}

/* Daniel card */

.Daniel_card {
    grid-area: c1;
    background-color: var(--purple-500);
    color: var(--purple-300); 

    background-image: url(./images/bg-pattern-quotation.svg);
    background-repeat: no-repeat;
    background-position: 80% 0%;
}
.Daniel_card > div > div {
    color: var(--purple-300);
}
.Daniel_card > div > div > h2 {
    color: var(--grey-100); 
    font-weight: 500;
}
.Daniel_card > div > div > h3 {
    font-weight: 500; 
}
.Daniel_card > h1 {
    color: var(--white);
}
.Daniel_card > p {
    font-weight: 500;
}
.Daniel_img {
    border: 3px solid var(--purple-300);
}


/* Jonathan card */
.Jonathan_card{
    grid-area: c2;

    background-color: var(--grey-500);
    color:var(--white);
}
.Jonathan_img {
    border: 3px solid var(--grey-200);
}
.Jonathan_card > div > div {
    color: var(--grey-200);
}
.Jonathan_card > div > div > h2 {
    color: var(--grey-100); 
    font-weight: 500;
}
.Jonathan_card > div > div > h3 {
    font-weight: 500; 
}
.Jonathan_card > h1 {
    color: var(--white);
}
.Jonathan_card > p {
    font-weight: 500;
}
    

/* Jeanette card */
.Jeanette_card{
    grid-area: c4;
    
    background-color: var(--white);
    color: var(--grey-500);
}
.Jeanette_img {
    border: 3px solid var(--grey-500);
}

.Jeanette_card h2,
.Jeanette_img h3,
.Jeanette_card p {
    font-weight: 500;
}

/* Patrick card */
.Patrick_card {
    grid-area: c5;

    background-color: var(--Dark-Blue);
    color: var(--grey-200);
}
.Patrick_img {
    border: 3px solid var(--purple-500);
}
.Patrick_card h2,
.Patrick_card h3,
.Patrick_card p {
    font-weight: 500;
}
.Patrick_card > p {
    font-weight: 500;
}

/* Kira card */
.Kira_card{
    grid-area: c3;

    background-color: var(--white);
    color: var(--grey-500);
}
.Kira_img {
    border: 3px solid var(--grey-500);
}
.Kira_card > h2,
.Kira_card > h3,
.Kira_card >p {
    font-weight: 500;
}


/* Mobile Version */
@media (max-width :375px){
    
    .container {
        padding:0 2rem;
        margin: 4rem 0;
    }

    
    .Daniel_card {
       background-image: none;
    }

    .wrapper{
        display: flex;
        flex-direction: column;
        gap:2rem;
    }
}