.module.pixeld-cards{
  overflow:hidden;
  
  .card-wrapper{
    
    .button_wrapper{
      margin-top: 50px;
      text-align: center;
      
      .button.card-button{
        
       &:hover{
        background-color:#d95638; 
       }
        
        border-radius: 22369600px;
        background: #F1603F;
        box-shadow: 0 10px 15px 0 rgba(241, 96, 63, 0.30), 0 4px 6px 0 rgba(241, 96, 63, 0.30);
        
        display: flex;
        height: 52px;
        padding: 13.667px 31.063px 14.333px 32px;
        justify-content: center;
        align-items: center;
        
        color: #FFF;
        text-align: center;
        font-family: "Open Sans";
        font-size: 16px;
        font-style: normal;
        font-weight: 600;
        line-height: 24px; /* 150% */
        
        display:inline-block;
        
        margin-bottom:25px;

      }
      
    }
    
    .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;
            align-items: center;
          }
        
      }

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

      &.layout-light{
        .card-item{
          background-color: #F7F8FA !important;
          color: #5F6062;
          
          .px-link svg{
            transition: margin 700ms;
          }
          
          &:hover{
            -webkit-box-shadow: 1px 7px 14px 0px rgba(0,0,0,0.46); 
            box-shadow: 1px 7px 14px 0px rgba(0,0,0,0.46);
            background-color: #ffffff !important;
            cursor:pointer;
            
            .title{
                 color: #2caae2 !important; 
            }
            
            .px-link{
              color: #2caae2 !important; 
              
              svg{
                margin-left:6px;
                path{
                  stroke:  #2caae2 !important; 
                }
              }
            }
          }
        }
      }
      
      &.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);
        
        @media(max-width:1024px){
          grid-template-columns: repeat(3, 1fr);
        }
      }
      
      &.column-5{
        grid-template-columns: repeat(5, 1fr);
        @media(max-width:1024px){
          grid-template-columns: repeat(3, 1fr);
        }
        
      }
      
      @media(max-width:989px){
          grid-template-columns: repeat(2, 1fr) !important;
      }
      
      @media(max-width:767px){
          grid-template-columns: repeat(1, 1fr) !important;
      }
      
    }
    
  }
}