@font-face {
    font-family: "Poppins";
    src: url("./fonts/Poppins_ExtraLight_200_latin.woff2") format("woff2");
    font-style: normal;
    font-weight: 200;
    font-display: swap;
  }
  
  @font-face {
    font-family: "Poppins";
    src: url("./fonts/Poppins_Regular_400_latin.woff2") format("woff2");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
  }
  
  @font-face {
    font-family: "Poppins";
    src: url("./fonts/Poppins_SemiBold_600_latin.woff2") format("woff2");
    font-style: normal;
    font-weight: 600;
    font-display: swap;
  }
  
  /********************************/
  /* CUSTOM PROPERTIES */
  /********************************/
  
  :root {
    /* Colors */
  
    --red: hsl(0, 78%, 62%);
    --cyan: hsl(180, 62%, 55%);
    --orange: hsl(34, 97%, 64%);
    --blue: hsl(212, 86%, 64%);
  
    /* Shades */
  
    --grey-500: hsl(234, 12%, 34%);
    --grey-400: hsl(212, 6%, 44%);
    --background: hsl(0, 0%, 98%);
    --white: hsl(0, 0%, 100%);
  
    /* Spacing */
    --s-6: 0.375rem;
    --s-13: 0.8125rem;
    --s-15: 0.938rem;
    --s-16: 1rem;
    --s-20: 1.25rem;
    --s-24: 1.5rem;
    --s-32: 2rem;
    --s-36: 2.25rem;
    --s-47: 2.94rem;
    --s-60: 3.75rem;
    --s-80: 5rem;
    --s-74: 4.625rem;
    --s-102: 6.375rem;
    --s-163: 10.188rem;
    --s-250: 15.625rem;
    --s-314: 19.625rem;
    --s-316: 19.75rem;
    --s-350: 21.875rem;
    --s-540: 33.75rem;
  
    /* Fonts */
    --extra-light: 200;
    --regular: 400;
    --semibold: 600;
  
    --shadow: 0 15px 30px -11px rgba(131, 167, 210, 0.5);
  }
  
  /********************************/
  /* GENERAL */
  /********************************/
  
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Poppins", sans-serif;
    color: var(--grey-500);
    line-height: 1.4;
  }
  
  main {
    padding-top: 3.986vh;
    margin-bottom: 2.94rem;
    gap: var(--s-60);
  }
  
  /********************************/
  /* UTILITIES */
  /********************************/
  
  /* Text Presets */
  /********************************/
  
  .txt-p--1,
  .txt-p--2 {
    font-size: var(--s-24);
    letter-spacing: 0.25px;
  }
  
  .txt-p--1,
  .txt-p--3 {
    font-weight: var(--semibold);
  }
  
  .txt-p--2 {
    font-weight: var(--extra-light);
  }
  
  .txt-p--3 {
    font-size: var(--s-20);
    line-height: 1.35;
  }
  
  .txt-p--4 {
    font-size: var(--s-15);
    letter-spacing: 0.1px;
    font-weight: var(--regular);
  }
  
  .txt-p--5 {
    font-size: var(--s-13);
    line-height: 1.6;
    font-weight: var(--regular);
    color: var(--grey-400);
  }
  
  /* Spacing */
  /********************************/
  
  .pd--32 {
    padding: var(--s-32);
  }
  
  .mg-b--6 {
    margin-bottom: var(--s-6);
  }
  
  .mg-b--16 {
    margin-bottom: var(--s-16);
  }
  
  .mg-b--32 {
    margin-bottom: var(--s-32);
  }
  
  .mg-b--60 {
    margin-bottom: var(--s-60);
  }
  
  .gap {
    gap: var(--s-32);
  }
  
  /* Layout */
  /********************************/
  
  .flex {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  
  /********************************/
  /* ELEMENTS */
  /********************************/
  
  .header {
    width: 100%;
    max-width: var(--s-316);
    text-align: center;
  }
  
  .card {
    width: var(--s-314);
    height: var(--s-250);
    background-color: var(--white);
    border-radius: 4px 4px;
    align-items: flex-start;
  }
  
  .icon {
    align-self: end;
  }
  
  .cyan {
    box-shadow: inset 0 4px var(--cyan), var(--shadow);
  }
  
  .red {
    box-shadow: inset 0 4px var(--red), var(--shadow);
  }
  
  .orange {
    box-shadow: inset 0 4px var(--orange), var(--shadow);
  }
  
  .blue {
    box-shadow: inset 0 4px var(--blue), var(--shadow);
  }
  
  /********************************/
  /* MEDIA QUERIES */
  /********************************/
  
  /* Above 752px */
  @media (min-width: 47rem) {
    main {
      gap: var(--s-74);
      padding-top: var(--s-80);
      margin-bottom: var(--s-80);
    }
  
    .two {
      flex-direction: row;
    }
  
    .header {
      max-width: var(--s-540);
    }
  
    .txt-p--1,
    .txt-p--2 {
      font-size: var(--s-36);
    }
  
    .txt-p--4 {
      letter-spacing: 0px;
    }
  }
  
  /* Above 1280px */
  @media (min-width: 80rem) {
    main {
      padding-top: var(--s-102);
      margin-bottom: var(--s-163);
    }
  
    .cards {
      flex-direction: row;
    }
  
    .card {
      width: var(--s-350);
      height: var(--s-250);
    }
  
    .two {
      flex-direction: column;
    }
  }