.container {
    max-width: 1250px;
    margin: 0 auto;
    overflow: auto;
    padding: 0 40px;
}

.flex {
    display: flex;
    align-items: center;
    height: 100%;
}

.grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    height: 100%;
}

.grid-4 {
    grid-template-columns: repeat(4, 1fr);
    height: auto;
}

/* btn */
.btn {
    background: -webkit-gradient(
      linear,
      left top,
      right top,
      from(#31d35c),
      to(#2bb7da)
    );
    position: relative;
    padding: 1rem 2.75rem;
    border-radius: 3rem;
    cursor: pointer;
    border: 0;
    color: white;
    font-weight: 600;
  }
  
  .btn:hover {
    box-shadow: inset 0px 10px 205px 9px rgb(255 255 255 / 65%);
}

.text-center {
    text-align: center;
  }
  
  /* Margin */
  .my-1 {
        margin: 1rem 0;
  }
    
  .my-2 {
      margin: 1.5rem 0;
  }
    
  .my-3 {
      margin: 2rem 0;
  }
    
  .my-4 {
      margin: 3rem 0;
  }
    
  .my-5 {
      margin: 4rem 0;
  }
    
  .m-1 {
      margin: 1rem;
  }
    
  .m-2 {
      margin: 1.5rem;
  }
    
  .m-3 {
      margin: 2rem;
  }
    
  .m-4 {
      margin: 3rem;
  }
    
  .m-5 {
      margin: 4rem;
  }
    
  /* Padding */
  .py-1 {
      padding: 1rem 0;
  }
    
  .py-2 {
      padding: 1.5rem 0;
  }
    
  .py-3 {
      padding: 2rem 0;
  }
    
  .py-4 {
      padding: 3rem 0;
  }
    
  .py-5 {
      padding: 4rem 0;
  }
    
  .p-1 {
      padding: 1rem;
  }
    
  .p-2 {
      padding: 1.5rem;
  }
    
  .p-3 {
      padding: 2rem;
  }
    
  .p-4 {
      padding: 3rem;
  }
    
  .p-5 {
      padding: 4rem;
  }