*{
    margin:0;
    padding:0;
 }


 
:root {
  --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%);
  --Purple50:hsl(260, 100%, 95%);
  --Purple300: hsl(264, 82%, 80%);
  --Purple500: hsl(263, 55%, 52%);
  


}


body{
     font-size: 62.5%; /* Makes 1rem = 10px */
       font-family: "Barlow Semi Condensed", sans-serif;
           
}

img{
    border-radius:50%;
    width:3em;
}

main {
        display: grid;
    grid-template-rows: auto;
    gap: 3em;
    padding: 2em;
 
}

article{
    padding:2em;
    border-radius:1em;
}


header{
        display: flex;
    align-items: center;
    gap: 2em;
}
    
.title-wrapper{
        color: var(--grey-200);
}

.purple {
        background: var(--Purple500);
}

.gray{
        background: var(--grey-400);
}

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

.white{
    background:#fff;
    
}

.white header + p {
        color: var(--grey-500);
}

.white p {
        color: var(--grey-400);
}


article header + p {
        font-size: 2.5em;
    color: var(--white);
    font-weight: 600;
    line-height: 1.4em;
    padding: 1em 0;
}




article p {
           color: var(--grey-200);
        font-size: 1.3em;
    line-height: 1.5em;
}

.background-img{
    display:none;
}

@media (min-width: 73em) {

    body{
          display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100dvh; 
    }

    .wrapper{
       max-width: 1200px;
    margin: 0 auto; /* ✅ This centers the wrapper horizontally */
    padding: 0 2rem;
    }

main {
 grid-template-columns: repeat(4, 1fr);
    grid-template-areas: 
    "daniel daniel jonathan kira"
    "jeanette patrick patrick kira"
}

article {
    padding: 2em 3.3em;
    border-radius: 1em;
    box-shadow: 4em 5em 4em var(--grey-200);
}



article {
    position:relative;
}



article header + p {
        font-size: 2.1em;
                position: relative;
}

.purple{
    grid-area:daniel;
}

.gray{
    grid-area:jonathan
}
.jeanette{
grid-area:jeanette;
}

.kira{
    grid-area:kira;
}


.black{
    grid-area:patrick;
}


.background-img{
  position: absolute;
        top: 0;
        left: 40em;
        width: 11em;
        height: 11em;
        object-fit: cover;
        z-index: 0;
        display:block;
    
}

}