.metrics {
   padding: 20px 0;
}
.metrics__container {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   align-items: center;
   justify-content: center;
   gap: 20px;
}
 .metrics__number {
   color: #000;
   text-align: center;
   font-size: 20px;
   font-weight: 700;
   line-height: 28px;
   letter-spacing: -0.4px;
}
 .metrics__text {
   color: #717171;
   text-align: center;
   font-size: 12px;
   line-height: 16px;
   letter-spacing: -0.12px;
   margin-top: 8px;
}
 @media screen and (min-width: 992px) {
   .metrics {
     padding: 48px 0;
  }
   .metrics__container {
     gap: 48px;
  }
   .metrics__number {
     font-size: 40px;
     line-height: 48px;
     letter-spacing: -0.8px;
  }
   .metrics__text {
     font-size: 14px;
     line-height: 20px;
     letter-spacing: -0.8px;
  }
}
.metrics__item {
  cursor: pointer;
}
.metrics__item .metrics__text, .metrics__item .metrics__number{
  -webkit-transition: all 300ms ease-in-out;
  -moz-transition: all 300ms ease-in-out;
  -ms-transition: all 300ms ease-in-out;
  -o-transition: all 300ms ease-in-out;
  transition: all 300ms ease-in-out;
}
.metrics__item:hover .metrics__text, .metrics__item:hover .metrics__number {
  color: #275894;
}