.dashboard-items {
    flex: 0 0 auto;
    background: var(--surface);
    border-radius: 9px;
    /* margin-right: 12px; */
    padding: 15px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(187, 134, 252, 0.1);
    scroll-snap-align: start;
    position: relative;
    overflow: hidden;
    /* border-left: 4px solid var(--primary-color); */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    min-height: 150px;
    height: 100%;
    position: relative;
    background-size:50%;
    background-position: right;
    background-repeat: no-repeat;
}

.dashboard-items .content{
    width: 75%;
    position: absolute;
    background-image: linear-gradient(90deg, #fb0000 0%, #fb0000 85%, rgba(255, 255, 255, 0) 100%);
    height: 100%;
    padding: 15px 70px 15px 15px;
    left: 0;
    top: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-transform: uppercase;
    color: var(--white);
}

.dashboard-items .description p {
  margin-bottom: 0;
}

.dashboard-items .image{
    width: 40%;
    position: absolute;
    object-fit: cover;
    height: 100%;
    right: 0;
    top: 0;
}

.dashboard-items.row-2{
  height: 50%;
}

.dashboard-items .content:not(:last-child){
  margin-bottom: 1rem;
}


.dashboard-items.primary .content{
  background-image: linear-gradient(90deg, var(--primary-color) 0%, var(--primary-color) 85%, rgba(255, 255, 255, 0) 100%);
}

.dashboard-items.secondary .content{
  background-image: linear-gradient(90deg, var(--gold) 0%, var(--gold) 85%, rgba(255, 255, 255, 0) 100%);
}

.dashboard-items.default .content{
  background-image: linear-gradient(90deg, var(--black-blue) 0%, var(--black-blue) 85%, rgba(255, 255, 255, 0) 100%);
}

.dashboard-items .content .small{
 font-size: var(--step-1) !important;
}

.dashboard-items .content p{
 font-size: var(--step-5) !important;
 line-height: 1;
color: var(--white);
}