@font-face{
    font-family: "DMSans";
    src:url('assets/fonts/DMSans-Italic-VariableFont_opsz\,wght.woff2') format(woff2);
    src:url('assets/fonts/DMSans-VariableFont_opsz\,wght.woff2') format(woff2);
    src:url('assets/fonts/DMSans-Italic-VariableFont_opsz\,wght.woff') format(woff);
    src:url('assets/fonts/DMSans-VariableFont_opsz\,wght.woff') format(woff); 
    src:url('assets/fonts/DMSans-VariableFont_opsz\,wght.ttf') format(truetype);
}

:root{
     --purple-100:hsl(254, 88%, 90%);
     --purple-500:hsl(256, 67%, 59%);
     --yellow-100:hsl(31, 66%, 93%);
     --yellow-500:hsl(39, 100%, 71%);
     
     --white:hsl(0, 0%, 100%);
     --gray:hsl(0, 0%, 92%);
     --black:hsl(0, 0%, 7%);
}

body{
     position:relative;
     display:flex;
     justify-content:center;
     align-items:center;
     font-family:"DMSans";
     min-height:100vh;
     width:100vw;
     background-color:var(--gray);
     padding-block:2.5rem 4rem; 
}

.grid-container{ 
     display:grid;
     grid-template-columns:1fr;
     grid-auto-rows:auto;
     gap:1.5rem;
     width:min(91vw, 1120px);
}

.card{
     width:fit-content;
     display:flex;
     flex-direction:column;
     border-radius:0.5rem;
     overflow:hidden;
}

h1{
     font-size:2.75rem;
     font-style:normal;
     font-weight:550;
     line-height:0.95;
}
h2{
     font-size:1.9rem;
     font-style:normal;
     font-weight:550;
     line-height:0.9;
     letter-spacing:-1.5px;
}
h3{
     font-size:1.675rem;
     font-style:normal;
     font-weight:595;
     line-height:0.90;
     letter-spacing:-2px;
}

h4{
     font-size:1.15rem;
     font-weight:500;
     line-height:1.1;
     letter-spacing:-0.5px;
}
/* ------------------------------------------- */
.card-1{
      background-color: var(--purple-500);
      text-align:center;
      color:var(--white);
      padding:2.2rem;
      gap:1.5rem;;
}
.card-1 .digit{
     color:var(--yellow-500);
}
.card-1 .italic{
      font-style:italic;
}
.card-1 img{
      width:190px;
      margin-inline:auto;
      margin-bottom:-1rem;
}
/* ------------------------------------------- */
.card-2{
     background-color:var(--white);
     text-align:left;
     padding:1rem;
     gap:1rem;
}
.card-2 .img-container{
     border-radius:1.875rem;
     background-color: var(--white);
     box-shadow:0 10px 25px hsla(256, 47%, 39%, 0.075);
     overflow:hidden;
}
/* ------------------------------------------- */
.card-3{
      background-color:var(--yellow-500);
      padding:1rem;
      gap:1rem;
      text-align:left;
      max-height:215px;
}
.card-3 img{
      width:65%;
}
/* ------------------------------------------- */
.card-4{
      background-color: var(--purple-100);
      padding:1.75rem 1rem;
      text-align:center;
      gap:1.25rem;
}
/* ------------------------------------------- */
.card-5{
     background-color:var(--purple-500);
     padding:1.5rem 3.5rem;
     gap:2.25rem;
}
.card-5 h2{
     color:var(--white);
     text-align:center;
}
/* ------------------------------------------- */
.card-6{
      background-color:var(--white);
      padding:1.5rem;
      gap:1.15rem;
}
.card-6 img{
      width:60%;
}
/* ------------------------------------------- */
.card-7{
      background-color: var(--yellow-100);
      padding:2rem;
      gap:1.15rem;
}
.card-7 span{
      font-style:italic;
      color:var(--purple-500);
}
.card-7 img{
      width:67%;
}
/* ------------------------------------------- */
.card-8{
      background-color:var(--yellow-500);
      padding:1.5rem;
      gap:1.15rem;
}
.card-8 img{
      width:71%;
}

footer{
     position:absolute;
     left:50%;
     bottom:1%;
     transform:translateX(-50%);
     font-size:10px;
     text-align:center;
}