*{
    background-color: var(--Grey-100);
    font-family: "Barlow Semi Condensed", sans-serif; 
}

body {
    height: 96vh;
    width: 99%;
    display: flex;
}

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

.wrapper {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    grid-template-rows: repeat(2,max-content);
    gap: 10px;
    /* border: 1px solid black; */
    width: 70%;
    margin: auto;
    height: min-content;
}

.wrapper >* {
    font-size: 13px;
    /* border: 1px solid red; */
    padding: 1rem;
    border-radius: 1rem;
    box-shadow: 10px 30px 20px 5px var(--Grey-200);
    z-index: 1;
}

.daniel {
    grid-column: span 2;
    background-color: var(--Purple-500);
    color: var(--White);
    position: relative;
}

.jonathan {
    background-color: var(--Grey-500);
    color: var(--White);
}

.kira {
    grid-row: span 2;
    background-color: var(--White);
    color: var(--Grey-400);
    z-index: 2;
}

.jeanette{
    background-color: var(--White);
    color: var(--Grey-400);
}

.patrick{
    grid-column: span 2;
    background-color: var(--Dark-blue);
    color: var(--Grey-200);
}

.sub,.main{
    background-color: inherit;
}

img {
    border-radius: 50%;
    align-self: center;
    height: 2rem;
    width: 2rem;
    margin-right: .5rem;
    grid-row: span 2;
}

h3 {
    font-size: .9rem;
    margin: 0;
    background-color: transparent;
}

h4 {
    font-size: .7rem;
    margin: 0;
    background-color: transparent;
}

.people {
    background-color: transparent;
    display: grid;
    grid-template-columns: max-content 1fr;
}

.quote {
    border-radius: 0;
    background-color: transparent;
    position: absolute;
    right: 0;
    width: 5rem;
    height: 5rem;
    z-index: -1;
    top: 0;
    margin-right: 3rem;
}

.main{
    font-size: medium;
    z-index: 1;
    background-color: transparent;
}

@media screen and (max-width:40rem) {

    .wrapper{
        display: grid;
        grid-template-rows: repeat(5,max-content);
        grid-template-columns: 1fr;
    } 
    
    .wrapper>*{
        z-index: 1;
    }

    .daniel{
        grid-column: span none;
    }

    .patrick{
        grid-column: span none;
    }
    
    .kira{ 
        grid-row: span none;
    }

    .quote{
        display: none;
    }
}

@media screen and (max-width:60rem) {
    .wrapper{
        grid-template-columns: none;
    }
    
    .wrapper>*{
        z-index: 1;
    }
}