div.content-card .image:before {
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%
}

div.content-card h6 {
    color: #000;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .48px;
    line-height: .84;
    margin-bottom: 1rem;
    text-transform: uppercase
}

:lang(my) div.content-card h6,
div.content-card :lang(my) h6 {
    font-size: 1rem
}

div.content-card {
    background-color: #fff;
    border-top: 2px solid #000;
    height: 100%;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
    word-break: break-word
}

div.content-card > a {
    background: none;
    box-sizing: border-box;
    display: block;
    height: 100%;
    padding-bottom: 2.625rem;
    position: relative
}

div.content-card h6 {
    margin-bottom: 0;
    padding: 1rem 1.5rem 1.625rem
}

div.content-card.card h6 {
    padding-bottom: 1rem
}

div.content-card .image {
    position: relative;
    width: 100%
}

div.content-card .image img {
    display: block;
    width: 100%
}

div.content-card .image:before {
    opacity: 0;
    -webkit-transition: all .9s;
    -moz-transition: all .9s;
    -ms-transition: all .9s;
    -o-transition: all .9s;
    transition: all .9s
}

div.content-card p {
    font-size: 1rem;
    margin: 0;
    padding-top: 1rem
}

div.content-card.card:hover {
    background-color: #fafafa
}

div.content-card.card-emphasize {
    background-color: #ffe17e
}

div.content-card.card-emphasize:hover {
    background-color: #ffeb00
}

div.content-card.card-emphasize:hover.red .cta--space:after,
div.content-card.card:hover.red .cta--space:after {
    filter: invert(0) brightness(0)
}

div.content-card.card-emphasize:hover.red .cta--arrow:after,
div.content-card.card:hover.red .cta--arrow:after {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODEiIGhlaWdodD0iMjAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTY5LjUgMSAxMCA4Ljk5OG0wIDBMNjkuNSAxOW0xMC05LjAwMkgwIiBzdHJva2U9IiMwMDAiIHN0cm9rZS13aWR0aD0iMiIvPjwvc3ZnPg==)
}

div.content-card.card-emphasize:hover.yellow,
div.content-card.card:hover.yellow {
    background-color: #ffeb00
}

div.content-card.card-emphasize:hover.red,
div.content-card.card:hover.red {
    background-color: #ee402d
}

div.content-card.card-emphasize:hover.green,
div.content-card.card:hover.green {
    background-color: #6de354
}

div.content-card.card-emphasize:hover.blue,
div.content-card.card:hover.blue {
    background-color: #60d4f2
}

div.content-card.card-emphasize:hover.gray,
div.content-card.card:hover.gray {
    background-color: #fafafa
}

div.content-card.card-emphasize.yellow {
    background-color: #ffe17e
}

div.content-card.card-emphasize.red {
    background-color: #ffbcb7
}

div.content-card.card-emphasize.green {
    background-color: #b8ecb6
}

div.content-card.card-emphasize.blue {
    background-color: #a2daf3
}

div.content-card.card-emphasize.gray,
div.content-card:hover {
    background-color: #fafafa
}

div.content-card:hover .image:before {
    opacity: .75
}

div.content-card:hover .cta--space:after {
    -webkit-transform: translate(70%);
    -moz-transform: translate(70%);
    -ms-transform: translate(70%);
    -o-transform: translate(70%);
    transition: translate(70%, 0)
}

div.content-card:hover .cta--arrow i {
    width: 5rem
}

div.content-card:hover .cta--arrow i:before {
    display: unset
}

div.content-card-wrapper > div {
    margin-bottom: 2rem
}

div.content-card .image:before,
div.content-card.yellow .image:before {
    background: linear-gradient(67.76deg, #ffeb00, transparent 61.11%)
}

div.content-card.red .image:before {
    background: linear-gradient(67.76deg, #ee402d, transparent 61.11%)
}

div.content-card.green .image:before {
    background: linear-gradient(67.76deg, #6de354, transparent 61.11%)
}

div.content-card.blue .image:before {
    background: linear-gradient(67.76deg, #60d4f2, transparent 61.11%)
}

div.content-card.gray .image:before {
    background: linear-gradient(67.76deg, #fafafa, transparent 61.11%)
}

.content-caption {
    padding: 1rem 1.5rem 1.5rem
}

.content-caption h4,
.content-caption h5 {
    margin-bottom: 0
}

.content-caption .cta__link {
    bottom: 1.5rem;
    position: absolute
}

.content-caption_cart {
    height: 100%
}

.content-caption_cart h5 {
    margin-bottom: 1rem
}

[dir=rtl] .content-card .image:before {
    -webkit-transform: scaleX(-1);
    -moz-transform: scaleX(-1);
    -ms-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    transition: scaleX(-1)
}

[dir=rtl] .content-card:hover .cta--space:after {
    -webkit-transform: translate(-50%) rotate(180deg);
    -moz-transform: translate(-50%) rotate(180deg);
    -ms-transform: translate(-50%) rotate(180deg);
    -o-transform: translate(-50%) rotate(180deg);
    transition: translate(-50%, 0) rotate(180deg)
}

[dir=rtl] .content-card:hover .cta--arrow:after {
    margin-left: 0;
    margin-right: .25rem
}

:lang(my) h6 {
    font-size: 1rem
}