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

$max-card-width: 235px;

.x-info-card {

    .x-panel-bodyWrap {
        .x-autocontainer-innerCt {
            .x-component {
                display: flex;
                flex-direction: column;
                justify-content: center;
                height: 100%;

                .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;
                            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-mask {
        background-color: transparent;
    }
}

.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);
}