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

* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

body {
   font-family: 'Barlow Semi Condensed';
   font-size: 13px;
   display: grid;
   place-content: center;
   padding: 4rem;
   line-height: 1;
}

.grid-cont {
   max-width: 1300px;
   gap: 1.5rem;
   display: grid;
   margin-bottom: 2rem;
   grid-auto-columns: 1fr;
   grid-auto-rows: 1fr;

   grid-template-areas: 
   'itm1 itm1 itm1 itm2 itm5'
   'itm3 itm4 itm4 itm4 itm5';
}
.grid-cont .item{
   box-shadow: -10px 10px 10px var(--grey-100);
}
.item {
   padding: 2.5rem 1.5rem;
   overflow: hidden;
   border-radius: 0.75rem;
   text-align: left;
}
/* SVG BG PATTERN */

.item:first-child {
   position: relative;
}
.bg-pattern{
   position: absolute;
   z-index: 1;
   top: 0;
   right: 50px;
   width: 150px;
   height: 150px;
   color: var(--purple-50);
}

/* GRIA AREA NAME */

.grid-cont .item:nth-child(1){
   grid-area: itm1;
}
.grid-cont .item:nth-child(2){
   grid-area: itm2;
}
.grid-cont .item:nth-child(3){
   grid-area: itm3;
}
.grid-cont .item:nth-child(4){
   grid-area: itm4;
}
.grid-cont .item:nth-child(5){
   grid-area: itm5;
}

/* GRID ITEM BG COLORS */

.grid-cont .item:nth-child(1){
   background-color: var(--purple-500);
   color: var(--white);
}
.grid-cont .item:nth-child(2){
   background-color: var(--grey-400);
   color: var(--white);
}
.grid-cont .item:nth-child(3){
   background-color: var(--white);
   color: var(--dark-blue);
}
.grid-cont .item:nth-child(4){
   background-color: var(--dark-blue);
   color: var(--white);
}
.grid-cont .item:nth-child(4) img{
   outline: 2px solid var(--purple-500);
}
.grid-cont .item:nth-child(5){
   background-color: var(--white);
   color: var(--black);
}

/* ///////// */

.ppl-block {
   display: inline-flex;
   justify-content: space-between;
   align-items: center;
   gap: 1.25rem;
   margin-bottom: 1.5rem;
}
.ppl-block img{
   border-radius: 50%;
   display: block;
   width: 45px;
   height: 45px;
   outline: 2px solid var(--white);
}
.name-block {
   display: flex;
   flex-direction: column;
   gap: 0.25rem;
   z-index: 10;
}
.name-block span{
   font-size: 0.9rem;
   font-weight: 400;
}
.name {
   font-size: 1.15rem;
   font-weight: 500;
}
.title {
   position: relative;
   z-index: 10;
   font-size: 1.5rem;
   font-weight: 600;
   margin-bottom: 1.5rem;
   width: 100%;
   height: auto;
}
blockquote{
   z-index: 10;
   line-height: 1.5;
   font-size: 1rem;
   width: 100%;
   height: auto;
}

/* MEDIA */

@media (max-width: 1158px){
   .grid-cont {
   grid-auto-columns: 1fr;
   grid-auto-rows: auto;

   grid-template-areas: 
   'itm1 itm2'
   'itm1 itm3'
   'itm4 itm5';
}
   body {
      padding: 3rem;
   }
}
@media (max-width: 768px){
   .grid-cont {
   grid-auto-columns: 1fr;
   grid-auto-rows: auto;

   grid-template-areas: 
   'itm1'
   'itm2'
   'itm3'
   'itm4'
   'itm5';
}
   body {
      padding: 2rem;
   }
}
@media (max-width: 577px){
   .bg-pattern{
      display: none;
   }
}
@media (max-width: 510px){
   body {
      padding: 0.5rem;
   }
}