.sp-account-status {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 7px 24px;
    margin: 0 0 28px;
    padding: 22px 24px;
    border-left: 5px solid #2f668f;
    background: #fff;
    box-shadow: 0 8px 28px rgba(23, 33, 43, .06);
}
.sp-account-status span {
    grid-column: 1 / -1;
    color: #2f668f;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.sp-account-status strong { font-size: 20px; }
.sp-account-status p {
    grid-column: 1 / 2;
    margin: 0;
    color: var(--sp-muted);
}
.sp-account-status a {
    grid-column: 2;
    grid-row: 2 / 4;
    align-self: center;
    padding: 11px 16px;
    background: var(--sp-blue);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
}
.sp-account-status--scheduled { border-color: #b47b19; }
.sp-account-status--scheduled span { color: #8b5d0d; }
.sp-account-status--ended { border-color: #9a3535; }
.sp-account-status--ended span { color: #9a3535; }
.sp-account-status--payment { border-color: #b47b19; }
.sp-account-status--payment span { color: #8b5d0d; }
.sp-account-status--paused { border-color: #65717e; }
.sp-account-status--paused span { color: #52606d; }
@media (max-width: 650px) {
    .sp-account-status { grid-template-columns: 1fr; }
    .sp-account-status span,
    .sp-account-status p,
    .sp-account-status a { grid-column: 1; }
    .sp-account-status a {
        grid-row: auto;
        justify-self: start;
        margin-top: 8px;
    }
}