/* Special thanks to frontendmentor.io */

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

:root {
 --white: hsl(0, 0%, 100%);
 --black: hsl(0, 0%, 0%);
 --light-gray: hsl(0, 0%, 81%);
 --light-grayish-blue: hsl(210, 46%, 95%);
 --mod-violet: hsl(263, 55%, 52%);
 --grayish-blue: hsl(217, 19%, 35%);
 --blackish-blue: hsl(219, 29%, 14%);
}

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

body {
 background: var(--light-gray);
 font-family: 'Barlow Semi Condensed', sans-serif;
}

.cards {
 /* padding: 1em; */
 /* margin: 0 auto; */
 margin: 4rem auto 2em;
}

.text--white {
 color: var(--white);
}

.text--light-gray {
 color: var(--light-gray);
}

.text--dark {
 color: var(--black);
}

.card {
 border-radius: 7px;
 padding: 1.5rem;
 margin: 1rem auto;
}

.user {
 display: flex;
}

/* .user .left {
 
} */

.user .right {
 margin-left: -1.5rem;
 line-height: 1.4;
 /* opacity: 50%; */
}

img {
 width: 40%;
 border-radius: 50px;
 border: 1.5px solid var(--light-grayish-blue);
 margin-bottom: 0.9rem;
}

.one {
 background-color: var(--mod-violet);
 background-image: url(images/bg-pattern-quotation.svg);
 background-repeat: no-repeat;
 background-position: right 20px top;
 /* consider using "background" shorthand here */
}

.two {
 background: var(--grayish-blue);
}

.three {
 background: var(--white);
}

.four {
 background: var(--blackish-blue);
}

.four img {
 border: 1.5px solid var(--mod-violet);
}

.five {
 background: var(--white);
}

.name {
 font-size: 0.6rem;
 font-weight: 600;
 letter-spacing: 0.02rem;
}

.designation {
 font-size: 0.55rem;
 opacity: 50%;
}

.article .heading {
 font-weight: 600;
 padding-bottom: 1rem;
}

.article .details {
 font-size: 0.65rem;
 line-height: 1.5;
 opacity: 70%;
}


@media screen and (min-width: 375px) {
 .card {
  width: 260px;
 }
}

@media screen and (min-width: 1440px) {
 .container {
  width: 70%;
  margin: 4em auto;
 }

 .cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 15em 15em;
  gap: 1.5rem;
 }

 .card {
  width: unset;
  margin: unset;
 }

 .one {
  grid-column: 1 / 3;
  grid-row: 1 / 2;
  background-position: right 5rem top;
 }

 .two {
  grid-column: 3 / 4;
  grid-row: 1 / 2;
 }

 .three {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
 }

 .four {
  grid-column: 2 / 4;
  grid-row: 2 / 3;
 }

 .five {
  grid-column: 4 / 5;
  grid-row: 1 / 3;
 }
}


/* Frontendmentor.io Attribution */

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