@import url("https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
* {
   padding: 0;
   margin: 0;
   box-sizing: border-box;
}
body {
   font-family: "Barlow Semi Condensed", serif;
   background-color: hsl(0, 0%, 81%);
   display: grid;
   /* grid-template-columns: repeat(4, 1fr); */
   gap: 25px;
   padding-block: 2rem;
   width: min(95%, 70rem);
   margin-inline: auto;
}
/* .grid-col-span {
   grid-column: span 2;
} */

/* Section */
section {
   border-radius: 10px;
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
section img {
   width: 40px;
   border-radius: 50%;
}
section div {
   margin: 20px 20px 20px;
}
.profile {
   display: flex;
   align-items: center;
}
.profile p {
   margin-left: 10px;
}
.profile span {
   color: hsl(0, 0%, 81%);
   font-size: 12px;
}
.job p {
   margin-bottom: 20px;
}
.job p:nth-child(1) {
   color: hsl(0, 0%, 100%);
   font-size: 20px;
}
.job p:nth-child(2) {
   color: hsl(0, 0%, 81%);
}

/* Section Daniel Clifford */
.section-dani {
   background-color: hsl(263, 55%, 52%);
   color: white;
   background-image: url("./images/bg-pattern-quotation.svg");
   background-repeat: no-repeat;
   background-position: top right;
}

/* Section Jonathan Walters*/
.section-jona {
   background-color: hsl(217, 19%, 35%);
}
.profile-jona p {
   color: white;
}

/* Section Jeanette Harmon*/
.section-jean {
   background-color: hsl(0, 0%, 100%);
}
.profile-jean p {
   color: hsl(217, 19%, 35%);
}
.profile-jean span {
   color: hsl(217, 19%, 35%);
}
.section-jean .job p:nth-child(1) {
   color: hsl(219, 29%, 14%);
}
.section-jean .job p:nth-child(2) {
   color: hsl(217, 19%, 35%);
}

/* Section Patrick Abrams*/
.section-patr {
   background-color: hsl(219, 29%, 14%);
}
.profile-patr p {
   color: white;
}

/* Section Kira Whittle*/
.section-kira {
   background-color: hsl(0, 0%, 100%);
}
.profile-kira p {
   color: hsl(217, 19%, 35%);
}
.profile-kira span {
   color: hsl(217, 19%, 35%);
}
.section-kira .job p:nth-child(1) {
   color: hsl(219, 29%, 14%);
}
.section-kira .job p:nth-child(2) {
   color: hsl(217, 19%, 35%);
}
/* .section-kira {
   grid-column-start: 4;
   grid-row-start: 1;
   grid-row-end: 3;
} */

@media (min-width: 50em) {
   .grid-col-span {
      grid-column: span 2;
   }
   body {
      grid-template-columns: repeat(4, 1fr);
   }
   .section-kira {
      grid-column-start: 4;
      grid-row-start: 1;
      grid-row-end: 3;
   }
}