@font-face {
  font-family: 'Barlow Semi Condensed';
  src: url(fonts/BarlowSemiCondensed-Medium.ttf);
  font-weight: 500;
}
@font-face {
  font-family: 'Barlow Semi Condensed';
  src: url(fonts/BarlowSemiCondensed-SemiBold.ttf);
  font-weight: 600;
}

:root {
  --clr-moderate-violet: hsl(263 55% 52%);
  --clr-very-dark-grayish-blue: hsl(217 19% 35%);
  --clr-very-dark-blackish-blue: hsl(219 29% 14%);
  --clr-white: hsl(0 0% 100%);

  --clr-light-gray: hsl(210 46% 95%);
  --clr-light-grayish-blue: hsl(0 0% 81%);

  --ff-primary: "Barlow Semi Condensed", sans-serif;

  --fw-regular: 500;
  --fw-bold: 600;

  --fs-300: 0.6875rem;
  --fs-400: 0.8125rem;
  --fs-500: 1.25rem;
}

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

img {
  max-width: 100%;
  display: block;
}

body {
  background-color: var(--clr-light-gray);
  
  font-family: var(--ff-primary);
  font-size: var(--fs-300);
  font-weight: var(--fw-regular);
  line-height: 1.3;

  min-height: 100vh;

  padding-inline: 1.5rem;
  padding-block: 4rem;
}

.cards-container {
  display: grid;
  gap: 1.5rem;
  grid-auto-columns: 1fr;
  grid-template-areas: 
  'one'
  'two'
  'three'
  'four'
  'five';
}

.card {
  display: grid;
  gap: 1.5rem;
  padding: 1.75rem;
  border-radius: .5rem;
}

.title-section {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.title-section h2 {
  font-size: var(--fs-400);
  font-weight: var(--fw-regular);
}
.title-section p {
  font-size: var(--fs-300);
  font-weight: var(--fw-regular);
}

.title-section img {
  width: 1.75rem;
  aspect-ratio: 1;
  border-radius: 50%;
}

.title-section p,
.card p:not(.title) {
  opacity: .7;
}

._1,
._2,
._4 {
  color: var(--clr-light-grayish-blue);
}
._3,
._5 {
  background-color: var(--clr-white);
  color: var(--clr-very-dark-grayish-blue);
}
._1 .title-section h2,
._2 .title-section h2,
._4 .title-section h2 {
  color: var(--clr-white);
}
._1 img,
._2 img,
._3 img,
._4 img,
._5 img {
  border: 2px solid var(--clr-light-grayish-blue);
}
._1 .title,
._2 .title,
._4 .title {
  color: var(--clr-white);
  font-size: var(--fs-500);
  font-weight: var(--fw-bold);
}
._3 .title,
._5 .title {
  font-size: var(--fs-500);
  font-weight: var(--fw-bold);
}

._1 {
  background-color: var(--clr-moderate-violet);
  background-image: url(images/bg-pattern-quotation.svg);
  background-repeat: no-repeat;
  background-position: top right 10%;

  grid-area: one;
}
._2 {
  background-color: var(--clr-very-dark-grayish-blue);

  grid-area: two;
}
._3 {
  grid-area: three;
}
._4 {
  background-color: var(--clr-very-dark-blackish-blue);

  grid-area: four;
}
._5 {
  grid-area: five;
}

@media (min-width: 600px) {
  .cards-container {
    grid-template-areas: 
    'one one'
    'two four'
    'three four'
    'five five';
  }
}

@media (min-width: 737px) {
  body {
    padding: 7rem;
  }
}

@media (min-width: 1080px) {
  body {
    padding: 7rem;
  }

  .cards-container {
    grid-template-areas: 
    'one one two five'
    'three four four five';
  }
}