saas-platform/frontend/saas-web/app/view/home/InfoCard.scss

$max-card-width: 235px;

.x-info-card {

    .x-panel-bodyWrap {
        .x-autocontainer-innerCt {

            .x-row {
                display: flex;
                width: 100%;
                justify-content: flex-start;
            
                .x-col {
            
                    flex: 1;
                    max-width: $max-card-width;
                    color: #fff;
                    padding: 10px;
            
                    .x-box {
                        padding: 16px;
                        height: 120px;
                        border-radius: 0.5rem;
                        box-shadow: 0 0 1px rgba(0,0,0,.125), 0 1px 3px rgba(0,0,0,.2);
                        position: relative;
                        display: block;
                        cursor: pointer;
            
                        &:hover {
                            opacity: 0.7;
                        }

                        h3 {
                            text-align: center;
                            font-size: 16px;
                        }
            
                        p {
                            font-size: 24px;
                            text-align: center;
                            margin-top: 32px;
                        }
            
                    }
                    .x-box.x-view-item-focused {
                        outline: none !important;
                    }
                }
            }
        }
    }

    .x-toolbar-default-vertical {
        padding: 0;
    }
}

.x-scroller-button {
    position: absolute !important;
    z-index: 1;
    width: 44px !important;
    min-width: 44px !important;
    height: 145px !important;
    padding: 0 !important;
    background-color: white !important;
    border: none !important;
    box-shadow: none !important;
    background-repeat: no-repeat !important;
    background-size: 30px !important;
    background-position-y: center !important;
    background-position-x: 6px !important;
}

.x-scroller-button-left {
    left: 0;
    background-image: url('images/default/arrows-left.png') !important;
    background-position-x: 10px !important;
}

.x-scroller-button-right {
    right: 0;
    background-image: url('images/default/arrows-right.png') !important;
    background-position-x: 4px !important;
}

.x-btn-over.x-btn-default-small.x-scroller-button-left,
.x-btn.x-btn-disabled.x-btn-default-small.x-scroller-button-left,
.x-btn-over.x-btn-default-small.x-scroller-button-right,
.x-btn.x-btn-disabled.x-btn-default-small.x-scroller-button-right,
.x-keyboard-mode .x-btn-focus.x-btn-default-small.x-scroller-button-left,
.x-keyboard-mode .x-btn-focus.x-btn-default-small.x-scroller-button-right {
    background: white;
}

.x-bg-default {
    background: linear-gradient(to right, #25CBDB , #5161F1);
}
.x-bg-yellow {
    background: linear-gradient(to right, #F4BF59 , #F99A50);
}
.x-bg-purple {
    background: linear-gradient(to right, #946DFF , #7460FF);
}
.x-bg-red {
    background: linear-gradient(to right, #FA8B86 , #F36487);
}
.x-bg-blue {
    background: linear-gradient(to right, #1AD0C5 , #26CBDB);
}
.x-bg-pink {
    background: linear-gradient(to right, #FA8A86 , #F26187);
}
.x-bg-gray {
    background: linear-gradient(to right, #D8D8D8 , #D8D8D8);
}