.card-layout {
    position: relative;

}

.card-layout::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    height: 50%;
    width: 100%;
    background-color: var(--primary-color);
    z-index: -1;
}

.card-layout .card-item {
    background-color: var(--background-color);
}

.card-layout .card-item .card-image img {
    aspect-ratio: 4 / 3;
}

.card-layout .card-item {
    height: 100%;
}

.card-layout .card-detail {
    padding: 40px 70px 50px 40px;
}

.card-layout .card-description p {
    margin-bottom: 0;
    color: var(--black-color);
}

.card-layout .card-title{
    font-size: var(--font-24);
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 10px;
    font-family: var(--primary-font);
}

.card-layout .card-description{
    font-size: var(--font-20);
    line-height: 150%;
}