.services-product-showcase {
    background: var(--dark-bg);
    padding: 88px 50px;
}
.services-product-layout {
    max-width: var(--content-max-width);;
    margin: auto;
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 70px;
    align-items: center;
}

.section-title--light {
    color: var(--white);
}

.services-product-body {
    color: var(--text-muted);
    line-height: var(--line-height-body);
    margin: 20px 0;
    max-width: 620px;
    font-weight: normal;
    font-size: var(--font-size-lg);
}

.services-product-diagram {
    background: rgba(255, 255, 255, .04);
    border: 1px solid var(--border-dim);
    border-radius: var(--radius-card);
    padding: 20px;
}

.diagram-box {
    background: rgba(255, 255, 255, .04);
    border: 1px solid var(--border-dim);
    border-radius: var(--radius-card);
    padding: 22px;
    text-align: center;
}

.diagram-box h4 {
    color: var(--white);
    font-weight: normal;
    margin-bottom: 8px;
    font-size: var(--font-size-xl);
}

.diagram-box p {
    color: var(--text-muted);
    font-size: var(--font-size-lg);
    font-weight: normal;
}

.diagram-box--highlight {
    background: rgba(78, 181, 124, .15);
    border-color: var(--green);
}

.diagram-arrow {
    text-align: center;
    color: var(--green);
    font-size: 26px;
}

.diagram-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-top: 16px;
}

.diagram-chip-list span {
    background: var(--dark-bg);
    color: var(--white);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: var(--base-font-size);
    font-weight: normal;
}

@media(max-width:900px) {

    .services-product-layout {
        grid-template-columns: 1fr;
    }

    .services-product-showcase {
        padding: 50px 24px;
    }

}