/* barlow-semi-condensed-500 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Barlow Semi Condensed';
    font-style: normal;
    font-weight: 500;
    src: url('./Fonts/barlow-semi-condensed-v15-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* barlow-semi-condensed-600 - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Barlow Semi Condensed';
    font-style: normal;
    font-weight: 600;
    src: url('./Fonts/barlow-semi-condensed-v15-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }

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

  /* =========================== */
  /* ====== Mobile styles ====== */
  /* =========================== */

  body {
    min-height: 100vh;
    background-color: hsl(214, 17%, 92%);
    font-family: 'Barlow Semi Condensed';
    align-content: center;
  }

  main {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.8em;
    padding: 15% 6%;
  }

  /* Card container styles */

  .card-container {
    padding: 1.75em;
    border-radius: 0.5rem;
    box-shadow: 2.5em 2.5em 1.5em 1em hsl(0, 0%, 81%); /* Revisit */
  }

  .purple {
    background-color: hsl(263, 55%, 52%);
  }

  .grey {
    background-color: hsl(224, 10%, 45%);
  }

  .white {
    background-color: hsl(0, 0%, 100%);
  }

  .dark-blue {
    background-color: hsl(219, 29%, 14%);
  }

  /* === Card container child styles === */

  .card-container img {
    border-radius: 50%;
    width: 2rem;
    display:inline-block;
  }

  .purple img {
    border: 0.15rem solid hsl(264, 82%, 80%);
  }

  .dark-blue img {
    border: 0.15rem solid hsl(263, 55%, 52%);
  }

  .graduate-info {
    display: inline-block;
    margin-left: 0.9em;
  }

  .graduate-info h1 {
    font-size: 0.9rem;
    font-weight: 600;
  }

  .graduate-info h2 {
    font-size: 0.8rem;
    font-weight: 500;
  }

  .card-container h3 {
    font-size: 1.4rem;
    margin-top: 0.7em;
  }

  .card-container p {
    font-size: 0.9rem;
    font-weight: 500;
    margin-top: 1em;
  }

  /* === Card container child font colors === */

  .purple h1, .purple h3 {
      color: hsl(0, 0%, 100%);
    }

  .purple h2, .purple p {
    color: hsl(264, 82%, 80%);
  }

  .grey h1, .grey h3 {
    color: hsl(0, 0%, 100%);
  }

  .grey h2, .grey p {
    color: hsl(214, 17%, 92%);
  }

  .white h1, .white h3 {
    color: hsl(217, 19%, 35%);
  }

  .white h2, .white p {
    color: hsl(224, 10%, 45%);
  }

  .dark-blue {
    color: hsl(214, 17%, 92%);
  }

  /* =========================== */
  /* ====== Desktop styles ===== */
  /* =========================== */

  @media (min-width: 1111px) {
    main {
      grid-template-columns: repeat(4,1fr);
      gap: 1.2em;
    }

    .purple {
      grid-column: span 2;
      background-image: url("./Images/bg-pattern-quotation.svg");
      background-repeat: no-repeat;
      background-position: top right 15%;
    }

    #Jeanette {
      grid-row-start: 2;
    }

    .dark-blue {
      grid-row-start: 2;
      grid-column: span 2;
    }

    #Kira {
      grid-row: span 2;
    }
  }