.clientCasesDiv {
    display: grid;
    grid-template-rows: 350px repeat(2, 185px);
    gap: 24px;
    color: var(--minuba-white);
    width: 100%;
}

.clientCasesDiv.single_case {
    grid-template-rows: auto 350px;
}

.clientCasesDiv.double_case {
    grid-template-rows: 350px 185px;
}

.clientCasesDiv h2 {
    padding-bottom: 20px;
}

.client_case {
    height: 100%;
    width: 100%;
    padding: 20px;
    border-radius: var(--border-radius-l);
    display: flex;
    gap: 16px;
    align-items: flex-end;
    justify-content: space-between;
    text-decoration: none;
}

.client_case h3,
.client_case h4,
.client_case .card_arrow svg {
    color: var(--minuba-white) !important;
    margin: 0;
}

.client_case:hover {
    color: var(--minuba-white) !important;
}

.primary_client_case {
    background-size: cover !important;
}

.client_case_cta {
    font-weight: var(--bold);
    margin: 0;
}

.primary_client_case_text {
    max-width: 350px;
}

.primary_client_case_text>p:nth-of-type(2) {
    margin-top: 8px;
}

.client_case .trade {
    font-size: var(--overline-size);
    text-transform: uppercase;
    margin-bottom: 0;
}

.secondary_client_case {
    background-color: var(--minuba-primary-regular);
}

.secondary_client_case:hover {
    background-color: var(--minuba-primary-hover);
}

@media screen and (min-width: 768px) {
    .clientCasesDiv.single_case,
    .clientCasesDiv.double_case,
    .clientCasesDiv {
        grid-template-rows: repeat(2, minmax(185px, 1fr));
        grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(min-content, 1fr);
        gap: 30px;
    }

    .clientCasesDiv h2 {
        grid-row: span 2;
        padding-right: 32px;
        padding-bottom: 0;
    }

    .client_case {
        padding: 32px;
    }

    .primary_client_case {
        grid-column: span 2;
        grid-row: span 2;
    }

    .secondary_client_case.span_2 {
        grid-row: span 2;
    }
}