.module.pixeld-cards{
  .card-wrapper{
    .heading-section{
        text-align: center;
        max-width: 800px;
        margin: 0 auto;

      .pretitle{
        color: #2CAAE2;
        text-align: center;
        font-family: Stag;
        font-size: 13px;
        font-style: normal;
        font-weight: 600;
        line-height: 19.5px; /* 150% */
        letter-spacing: 0.65px;
        margin-bottom:20px;
      }
      .heading{
        color: #271D42;
        text-align: center;
        font-family: Stag;
        font-size: 48px;
        font-style: normal;
        font-weight: 700;
        line-height: 48px; /* 100% */       
      }
      .content{
        margin-top:30px
        color: #5F6062;
        text-align: center;
        font-family: "Open Sans";
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 24px; /* 150% */
      }
    }
    
    
    .cards{
      
      .card-item{
        border-radius: 5px;
        border: 0.667px solid #F3F4F6;
        padding:30px;
        
          .title{
            color: #271D42;
            font-family: Stag;
            font-size: 18px;
            font-style: normal;
            font-weight: 700;
            line-height: 24.75px; /* 137.5% */    
            margin-top:20px;
          }

          .short_text{
            color: #666;
            font-family: "Open Sans";
            font-size: 15px;
            font-style: normal;
            font-weight: 400;
            line-height: 24.375px; /* 162.5% */    
            margin-top:20px;
          }
        
          .px-link{
            color: #271D42;
            font-family: "Open Sans";
            font-size: 13px;
            font-style: normal;
            font-weight: 700;
            line-height: 19.5px; /* 150% */
            margin-top:20px;
            display: flex;
            gap: 5px;
          }
        
      }

      display: grid;
      gap: 30px;
      margin-top:50px;
  

      &.layout-light{
        .card-item{
          background-color: #F7F8FA !important;
          color: #5F6062;
        }
      }
      
      &.layout-white{
        .card-item{
        background-color: #ffffff !important;
        color: #666;
          
        border-radius: 10px;
        border: 0.667px solid #F3F4F6;
        background: #FFF;
        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.10), 0 1px 2px 0 rgba(0, 0, 0, 0.10);
          
        }
      }

      &.layout-dark{
        .card-item{
        background-color: #271D42 !important;
        color:#fff;
        
          .px-link{
           color:#fff; 
          }
        }
      }
      
      &.column-2{
        grid-template-columns: repeat(2, 1fr);
      }
      
      &.column-3{
        grid-template-columns: repeat(3, 1fr);
      }
      
      &.column-4{
        grid-template-columns: repeat(4, 1fr);
      }
      
      &.column-5{
        grid-template-columns: repeat(5, 1fr);
      }
    }
    
  }
}