.shortcut-menu-cards-section,
.shortcut-menu-cards,
.shortcut-menu-card {
    position: relative;
}

.shortcut-menu-card {
    display: flex;
    padding: var(--customize-card-inner-padding);
    border-radius: var(--customize-card-border-radius);
    color: rgba(var(--customize-color-black), 1);
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
    outline: none !important;
    text-decoration: none !important;
    cursor: pointer;
}

/* .shortcut-menu-card:hover {
    color: rgba(var(--customize-color-black),1);
    border-color: rgba(var(--customize-color-black),1);
    background-color: rgba(var(--customize-color-black),0);
} */

.splide .shortcut-menu-card {
    height: 100%;
}

.shortcut-menu-card>.shortcut-menu-card-col.this-col-img {
    border-radius: var(--customize-card-inner-border-radius);
    overflow: hidden;
    /* background-color: #ccc; */
}

.shortcut-menu-card>.shortcut-menu-card-col.this-col-img>.img-cover {
    position: relative;
    width: 100%;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.shortcut-menu-card>.shortcut-menu-card-col.this-col-text {
    font-weight: 600;
}

.shortcut-menu-card .title {
    color: rgba(var(--customize-color-black), 1);
    transition: var(--customize-transition-all-fast);
}

/* vertical */
.shortcut-menu-card.vertical {
    flex-direction: column;
    justify-content: flex-start;
}

.shortcut-menu-card.vertical>.shortcut-menu-card-col.this-col-img {
    width: 100%;
    aspect-ratio: 1 / 1;
}

.shortcut-menu-card.vertical>.shortcut-menu-card-col.this-col-text {
    width: 100%;
    flex: 1 0 0;
    padding: 10px 10px 5px 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.shortcut-menu-card.vertical>.shortcut-menu-card-col.this-col-text.line-2 {
    /* height: 65px; */
    min-height: 65px;
}

/* horizontal */
.shortcut-menu-card.horizontal {
    flex-wrap: nowrap;
    height: 82px;
}

.shortcut-menu-card.horizontal>.shortcut-menu-card-col.this-col-img {
    width: 70px;
    height: 70px;
}

.shortcut-menu-card.horizontal>.shortcut-menu-card-col.this-col-text {
    width: calc(100% - 70px);
    flex: 1 0 0;
    padding: 15px 25px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

/* bg white */
.shortcut-menu-card.bg-white {
    background-color: rgba(var(--customize-color-white), 1);
}

.shortcut-menu-card.bg-white:hover {
    background-color: rgba(var(--customize-color-white), 1);
}

.shortcut-menu-card.bg-white:hover .title {
    color: rgba(var(--customize-color-primary), 1);
}

/* bg gray */
.shortcut-menu-card.bg-gray {
    background-color: rgba(var(--customize-color-black), 0.03);
}

.shortcut-menu-card.bg-gray:hover {
    background-color: rgba(var(--customize-color-black), 0);
}

/* hover shadow */
.shortcut-menu-card.hover-shadow {
    box-shadow: 0 0 0 1px rgba(var(--customize-color-black-dark), 0);
    top: 0;
    transition: all 0.2s ease;
}

.shortcut-menu-card.hover-shadow:hover {
    box-shadow: 0 10px 15px 0 rgba(var(--customize-color-black-dark), 0.15);
    top: -5px;
}

/* hover outline */
.shortcut-menu-card.hover-outline {
    border: 1px solid rgba(var(--customize-color-black), 0.05);
}

.shortcut-menu-card.hover-outline:hover {
    border-color: rgba(var(--customize-color-black), 1);
}

/* xxl */
@media (min-width: 1400px) {}

/* xxl - 1 */
@media (min-width:1500px) and (max-width: 1599.98px) {}

/* xxl - 2 */
@media (min-width: 1400px) and (max-width: 1499.98px) {}

/* xl */
@media (min-width: 1200px) and (max-width: 1399.98px) {}

/* lg */
@media (min-width: 992px) and (max-width: 1199.98px) {}

/* md */
@media (min-width: 768px) and (max-width: 991.98px) {}

/* sm - xs */
@media (max-width: 767.98px) {}

/* sm */
@media (min-width: 576px) and (max-width: 767.98px) {}

/* xs */
@media (max-width: 575.98px) {

    /* vertical */
    .splide .shortcut-menu-card.vertical {
        width: 120px;
    }

    /* horizontal */
    .shortcut-menu-card.horizontal>.shortcut-menu-card-col.this-col-text {
        padding: 10px 15px;
    }

}

/* xs custom */
@media (max-width: 399.98px) {}