@import url('https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:wght@500;600&display=swap');

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

img {
   display: block;
}


body {
   font-family: 'Barlow Semi Condensed', sans-serif;
   font-size: 13px;
   font-weight: 500;
   background-color: var(--LIGHT-GREYISH-BLUE);
   min-width: 375px;
   max-width: 1440px;
   height: 100vh;
   color: hsla(0, 0%, 100%, 0.5);
   display: grid;
   justify-content: center;
   align-items: center;
   line-height: 1.3;
}

:root {
   /* COLORS */
   --MODERATE-VIOLET: hsl(263, 55%, 52%);
   --VERY-DARK-GRAYISH-BLUE: hsl(217, 19%, 35%);
   --VERY-DARK-BLACKISH-BLUE: hsl(219, 29%, 14%);
   --WHITE: hsl(0, 0%, 100%);

   --LIGHT-GRAY: hsl(0, 0%, 81%);
   --LIGHT-GREYISH-BLUE: hsl(210, 46%, 95%);
}

/* || FONT */
h1 { 
   font-size: 0.8rem;
   font-weight: 500;
   color: var(--WHITE);
}

h2 {
   font-size: 0.7rem;
   font-weight: 500;
   color:hsla(0, 0%, 100%, 0.5);
}

p {
   color: hsla(0, 0%, 100%, 0.5);
}

.p-top {
   font-size: 1.2rem;
   color: var(--WHITE);
   margin: 15px 0;
}

.p__wide-width {
   width: 470px;
}

.p__width {
   width: 184px;
}
.textcol {
   color: hsla(217, 19%, 35%, 0.699);
}
/* ||  */



main {
   display: grid;
   grid-template-columns: repeat(4, 260px);
   grid-template-rows: 280px 266px;
   gap: 1.5rem;
   margin: 10px;
}

.container__top {
   display: grid;
   grid-auto-flow: column;
   justify-content: start;
}

.container {
   border-radius: 10px;
   box-shadow: 10px 10px 50px var(--LIGHT-GRAY);
   padding: 25px;
}

.hero {
   border: 2px solid rgba(255, 255, 255, 0.5);
   border-radius: 50%;
   width: 32px;
   height: 32px;
}

.names {
   margin-left: 18px;
}

/* || DANIEL CLIFFORD */
.container__daniel {
   background-color: var(--MODERATE-VIOLET);
   background-image: url(images/bg-pattern-quotation.svg);
   background-repeat: no-repeat;
   background-position: top 0 right 80px;
   grid-column: 1 / 3; 
}

/* || JONATHAN WALTERS */
.container__jonathan {
   background-color: var(--VERY-DARK-GRAYISH-BLUE);
   grid-column: 3 / 4;
   grid-row: 1 / 2;
}

/* || JEANETTE HARMON */
.container__jeanette {
   background-color: var(--WHITE);
   grid-row: 2 / 3;
}

.container__jeanette h1 {
   font-weight: 600;
   color: var(--VERY-DARK-GRAYISH-BLUE);
}

.container__jeanette h2 {
   color: hsla(217, 19%, 35%, 0.5);
}

.container__jeanette .p-top {
   color: var(--VERY-DARK-GRAYISH-BLUE);
   font-weight: 600;
   margin-bottom: 25px;
}

/* || PATRICK ABRAMS */
.container__patrick {
   background-color: var(--VERY-DARK-BLACKISH-BLUE);
   grid-column: 2 / 4;
   grid-row: 2 / 3;
}

.container__patrick .p-top {
   margin-bottom: 25px;
}

.hero__border {
   border: 2px solid var(--MODERATE-VIOLET);
}

/* || KIRA WHITTLE */
.container__kira {
   background-color: var(--WHITE);
   grid-row: 1 / 3;
}

.container__kira h1 {
   font-weight: 600;
   color: var(--VERY-DARK-GRAYISH-BLUE);
}

.container__kira h2 {
   color: hsla(217, 19%, 35%, 0.5);
}

aside .p-top {
   color: var(--VERY-DARK-GRAYISH-BLUE);
   font-weight: 600;
   margin-bottom: 30px;
}

@media screen and (max-width: 1100px) {
   main {
      grid-template-columns: 330px;
      grid-template-rows: 444px 242px 222px 384px 440px;
   }

   .container__daniel {
      background-position: top 0 right 25px;
      grid-column: 1 / 2;
      grid-row: 1 / 2;
   }
   .container__jonathan {
      grid-column: 1 / 2;
      grid-row: 2 / 3;
   }
   .container__jeanette {
      grid-column: 1 / 2;
      grid-row: 3 / 4;
   }
   .container__patrick {
      grid-column: 1 / 2;
      grid-row: 4 / 5;
   }
   .container__kira {
      grid-column: 1 / 2;
      grid-row: 5 / 6;
   }

   .p-top, .p__wide-width, .p__width {
      width: 263px;
   }
}


.attribution { 
   font-size: 11px; text-align: center; 
}
.attribution a { 
   color: hsl(228, 45%, 44%); 
}