/* ======= Variables ======= */
/* :root {
  --brand-primary: #3A4B3F;
  --brand-secondary: #C3A86B;
  --neutral-dark: #090808;
  --neutral-light: #F6F6ED;
} */

:root{
    --uspcard-bg: #3B4F44;
    --uspcard-bg-hover: #40544A;
    --uspdivider-col: #F6F6ED;
}

/* ======= USP Card ======= */
.c-uspcard{
    background-color: var(--uspcard-bg);
    padding: 2rem !important;
    border: 1px #47584E solid;
}

.c-uspcard::after{
    content: "";
    width: 100%;
    height: 1px;
    position: absolute;
    top: 0;
    left: 0;
    background-color: var(--brand-secondary);
    transform-origin: center right;
    transform: scaleX(0%);
    transition: transform 0.3s ease;
}

/* Hover state */
.c-uspcard:hover{
    background-color: var(--uspcard-bg-hover);
}

.c-uspcard:hover::after{
    transform: scaleX(100%);
    transform-origin: center left;
}

/* ======= USp ALT card ======= */
.c-uspcard--alt, .c-uspcard--alt:hover{
    background-color: #fff;
    border: 1px #F3F4F4 solid;
}

.c-uspcard.c-uspcard--alt::after{
    top: unset !important;
    bottom: 0 !important;
}

/* ======= USP Divider Line ======= */
.c-uspdivider{
    width: 1px !important;
    height: 92px !important;
    background-color: var(--uspdivider-col) !important;
}

@media (max-width: 576px){
    .c-uspdivider{
        width: 92px !important;
        height: 1px !important;
    }
}