@import url("https://fonts.googleapis.com/css2?family=Merriweather&family=Muli&display=swap");
:root {
   --ff-head: "Merriweather", serif;
   --ff-body: "Muli", sans-serif;
   --fs-body: 1.8rem;
   --fs-h2: 4rem;
   --fs-h4: 2.4rem;
   --fs-h5: 1.8rem;
   --clr-head: hsla(208, 11%, 15%, 1);
   --clr-body: hsla(208, 9%, 31%, 0.8);
   --clr-accent: hsla(216, 97%, 61%, 1);

   box-sizing: border-box;
}
*,
*::before,
*::after {
   margin: 0;
   padding: 0;
   box-sizing: inherit;
}
html,
body {
   width: 100%;
   min-height: 100vh;
   font-size: 62.5%;
}
body {
   font-family: var(--ff-body);
   font-size: var(--fs-body);
   color: var(--clr-body);
   line-height: 1.8;
   font-weight: normal;
}

img {
   
}
.main {
   padding: 1em 0;
}
.container {
   max-width: 1200px;
   width: 90%;
   margin: 0 auto;
}

.inner__sub {
   --fs-h5: 1.5rem;
   font-size: var(--fs-h5);
   color: var(--clr-head);
   margin-bottom: 1em;
}


.inner__head {
   --fs-h2: 16px
   font-size: var(--fs-h2);
   font-family: var(--ff-head);
   color: var(--clr-head);
   line-height: 1.4;
   margin-bottom: 1em;
}

.inner__content {
   margin-bottom: 3em;
}

.inner__clr {
   color: hsla(216, 97%, 61%, 1);
}

.inner__text {
   text-align: left;
}


.cards-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
   grid-gap: 4em 2rem;
}

.card {
   border-radius: 6px;
   box-shadow: 0 20px 40px 0 rgba(173, 181, 189, 0.1);
   border: solid 1px rgba(129, 147, 174, 0.12);
   background-color: #fff;
   padding: 2.5em;
   text-align: center;
   position: relative;

}

.card:first-child::before {
   content: "";
   position: absolute;
   background-color: #ffd25f;
   top: -8px;
   left: -1px;
   width: calc(100% + 2px);
   height: 8px;
   border-radius: 6px 6px 0 0;
}

.card:nth-child(2)::before {
   content: "";
   position: absolute;
   background-color: #63a2ff;
   top: -8px;
   left: -1px;
   width: calc(100% + 2px);
   height: 8px;
   border-radius: 6px 6px 0 0;
}

.card:last-child::before {
   content: "";
   position: absolute;
   background-color: #5ed291;
   top: -8px;
   left: -1px;
   width: calc(100% + 2px);
   height: 8px;
   border-radius: 6px 6px 0 0;
}

.card__body {
   padding-top: 1em;
}

.card__head {
   --fs-h4: 2rem;
   font-size: var(--fs-h4);
   margin-bottom: 1em;
   color: var(--clr-head);
}

.card__content {
   --fs-body: 16px;
   font-size: var(--fs-body);
}

@media (min-width: 750px) {
   .inner {
      padding: 1em 0;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      width: 100%;
   }

   .inner__sub {
      --fs-h5: 1.8rem;
      font-size: var(--fs-h5);
   }
   .inner__headings {
      flex: 1 0 30%;
   }
   .inner__content {
      flex: 1 0 50%;
      align-self: center;
      margin-left: 2rem;
   }
   .inner__sub {
      margin-bottom: 0;
   }
   .inner__head {
      --fs-h2: 4rem;
   }
}