@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');
:root{
    --clr-Primary-Purple-50: hsl(260, 100%, 95%);
    --clr-Primary-Purple-300: hsl(264, 82%, 80%);
    --clr-Primary-Purple-500: hsl(263, 55%, 52%);

    --clr-Neutral-White: hsl(0, 0%, 100%);
    --clr-Neutral-Grey-100: hsl(214, 17%, 92%);
    --clr-Neutral-Grey-200: hsl(0, 0%, 81%);
    --clr-Neutral-Grey-400: hsl(224, 10%, 45%);
    --clr-Neutral-Grey-500: hsl(217, 19%, 35%);
    --clr-Neutral-Dark-blue: hsl(219, 29%, 14%);
    --clr-Neutral-Black: hsl(0, 0%, 7%);

    --ff: "Barlow Semi Condensed", sanserif;
    --fw-regular: 500;
    --fw-bold: 600;
    --fs: 13px;
}
.attribution { font-size: 11px; text-align: center; }
.attribution a { color: hsl(228, 45%, 44%); }
/* 1. Use a more-intuitive box-sizing model */
*, *::before, *::after {
  box-sizing: border-box;
}

/* 2. Remove default margin */
* {
  margin: 0;
}

/* 3. Enable keyword animations */
@media (prefers-reduced-motion: no-preference) {
  html {
    interpolate-size: allow-keywords;
  }
}

body {
  /* 4. Add accessible line-height */
  line-height: 1.5;
  /* 5. Improve text rendering */
  -webkit-font-smoothing: antialiased;
}

/* 6. Improve media defaults */
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

/* 7. Inherit fonts for form controls */
input, button, textarea, select {
  font: inherit;
}

/* 8. Avoid text overflows */
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

/* 9. Improve line wrapping */
p {
  text-wrap: pretty;
  font-family: var(--ff);
  font-weight: var(--fw-regular);
  font-size: 13px;
}
h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
  font-family: var(--ff);
  font-weight: var(--fw-bold);
}


body{
    background-color: var(--clr-Neutral-Grey-200);
    display: grid;
    place-content: center;
    margin: 1rem;
    margin-inline: 1rem;
    font-family: var(--ff);
    font-size: var(--fs);
}

article{
    display: flex;
    flex-direction: column;
    margin-inline: 3rem;
    margin-top: 3rem;
}
section{
    box-shadow: 2.5rem 3.75rem 3rem -3rem hsl(var(--clr-Neutral-Grey-400) / 0.25);
    color: var(--clr-Neutral-Grey-100);
    padding: 2rem;
    padding-top: 0;
    border-radius: 0.5rem;
    margin: 1rem;
   

}
section h1,h2,p{
  margin-inline: 0.5rem;
  text-align: start;
}
h1,h2{
  margin-bottom: 0.7rem;
  line-height: 1.3;
}
p{
  font-size: 0.8125rem;
}
section img{
    width: 2rem;
    aspect-ratio: 1;
    display: block;
    border-radius: 50%;
    margin: 0.5rem;
    margin-left: 1.4rem;
}
.name{
    display: flex;
     margin: 0.5rem;
     margin-top: 1.5rem;
}
.name p{
  margin-inline: 0;
}
.name-verified{
    display: flex;
    flex-direction: column;
    margin-top: 0.6rem;
    margin-left: 1rem;
}
.first{
  /*margin-top: 3.8rem;*/
  background-color: var(--clr-Primary-Purple-500);
}
.second{
  background-color: var(--clr-Neutral-Grey-500);
}
.third{
  background-color: var(--clr-Neutral-White);
  color: var(--clr-Neutral-Black);
}
.fourth{
  background-color: var(--clr-Neutral-Black);
}
.fifth{
  background-color: var(--clr-Neutral-White);
  color: var(--clr-Neutral-Grey-500);
}
.fifth p{
  opacity: 0.5;

}
.first img{
  border:0.2em solid var(--clr-Primary-Purple-300);
}

.fourth img{
  border:0.2em solid var(--clr-Primary-Purple-500);
}

section.first{
  grid-area: one;
}
section.second{
    grid-area: two;
}
section.third{
    grid-area: three;
}
section.fourth{
    grid-area: four;
}
section.fifth{
    width: 20rem;
    grid-area: five;
}



@media screen and (min-width: 33rem){
  article{
    display: grid;
    place-content: center;
   grid-template-areas:
      "one one"
      "two three"
      "five five"
      "four four";
  }
}
@media screen and (min-width:600px){
  article{
    display: grid;
    place-content: center;
    grid-template-areas: 
    "one   one  two  five"
    "three four four five";
  }

  section.first{
     background-image: url("./bg-pattern-quotation.svg");
    background-repeat: no-repeat;
    background-position: top right 10%;
    z-index: -1;
  }
}