.cards-container {
  padding: 120px 0;
  border-bottom: 1px solid #00000024;

  .cards.three_col{
      display: grid;
      grid-template-columns: repeat(3, 1fr);
  }
  
  .cards.four_col{
      display: grid;
      grid-template-columns: repeat(4, 1fr);
    
    .card {
      ul li span , p span, span{ 
        max-width: 365px;
        padding-right: 16px;
      }
    }
  }
  
  .tag {
    font-weight: 400;
    line-height: 36.672px; 
    text-transform: uppercase;
  }
  
  h2 {
    font-weight: 600;
    line-height: 62px;
    margin: 0 0 52px;
    
  }
  
  .card {
    position: relative;
    
    .counter {
      display: flex;
      min-height: 99px;
      max-width: 99px;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 50%;
      color: #fff;
      font-size: 38px;
      font-weight: 600;
      line-height: 62px;
      position: relative;
  }
    
    h2 {
      font-weight: 600;
      line-height: 34px;
      margin: 30px 0 8px 0;
    }
    
    ul li span , p span, span{
      font-weight: 400;
      line-height: 26px; 
      text-transform: inherit;
      display: block;
      padding: 8px 0;
      max-width: 414px;
    }
    
    ul {
      margin-bottom: 0;
    }
  }
   
   
  .cards.progres_line { 
     .card::before {
      content: '';
      position: absolute;
      top: 50px;
      left: 0;
      width: 100%;
      height: 1px; 
      background: repeating-linear-gradient(to right, #66666685, #66666685 5px, transparent 5px, transparent 10px);
  }
    
    .card:last-child::before {
      content: none; 
  }
  }
}


@media (max-width: 1024px) {
  .cards-container {
    padding: 80px 0;
     .cards.three_col ,.cards.four_col {
      grid-template-columns: repeat(2, 1fr); 
      row-gap: 24px;
      column-gap: 100px;
      
       
       
       .card::before {
          content: none;
       }
    }
     .cards.four_col{
     
    
    .card {
      ul li span , p span, span{ 
        padding-right: 0;
      }
    }
  }
}


@media (max-width: 768px) {
  .cards-container {
    padding: 50px 0;
    
     .cards.three_col ,.cards.four_col {
      column-gap: 50px;
       
    .card {
      max-width: 100%;
      
      
      ul li span , p span, span{
       max-width: 100%;
      }
      
      .counter {
        min-height: auto;
        max-width: 60px;
        font-size: 30px;
    }
    }
  }
}
}

@media (max-width: 580px) {
  .cards-container {
     .cards.three_col {
      grid-template-columns: repeat(1, 1fr);
       
     ul li span , p span, span { 
        max-width: 100%;
      }
  }
    
    .cards.four_col {
      grid-template-columns: repeat(1, 1fr);
        
     ul li span , p span, span { 
        max-width: 100%;
      }
    }
  }
}

@media (max-width: 425px) {
  .cards-container {
    
    .card {
       display: flex;
       flex-direction: column;
       align-items: center;
      
      .counter {
        min-height: auto;
        min-width: 60px;
        font-size: 30px;
    }
      
      p {
        text-align: center;
      }
    }
  }
}