.component__cards{
  padding:2rem 0;
}

.cards{
  width:100%;
}
@media screen and (min-width:768px){
  .cards{
    width:70%;
  }
}

.cards__title{
  font-size:1.25rem;
  font-weight:500;
  margin-bottom:1rem;
  text-align:left;
}
@media screen and (min-width:768px){
  .cards__title{
    font-weight:700;
  }
}

.cards__items{
  display:grid;
  gap:1rem;
  grid-template-columns:1fr;
}
@media screen and (min-width:768px){
  .cards__items{
    gap:2rem;
  }
}

.cards__card-item{
  align-items:start;
  background-color:var(--color-white);
  border-radius:var(--radius-lg);
  color:#15a8f1;
  display:grid;
  gap:1rem;
  grid-template-columns:3rem 1fr 86px;
}
@media screen and (min-width:768px){
  .cards__card-item{
    align-items:center;
  }
}

.cards__card-number{
  font-size:2.3rem;
  text-align:center;
}

.cards__card-text{
  color:var(--color-linline-black);
  display:flex;
  flex-direction:column;
  gap:.8rem;
  justify-content:flex-start;
}

.cards__card-title{
  font-size:1.25rem;
  font-weight:500;
  line-height:1.5rem;
}
.cards__card-title:after{
  border:0;
  border-radius:5px;
  border-top:5px solid #15a8f1;
  content:"";
  display:block;
  margin:.4rem 0 0;
  width:200px;
}

.cards__card-img{
  height:86px;
  width:86px;
}

.cards__card-icon{
  background-position:50%;
  background-repeat:no-repeat;
  background-size:cover;
}