.proscons-shortcode__container {
    padding: var(--section-spacing) 20px;
    margin: var(--section-spacing) -20px var(--section-spacing);
    background: var(--card-bg-color);
    color: var(--text-color-card);
    box-shadow: var(--box-shadow);
    box-sizing: border-box;
    max-width: 700px;
    scroll-margin-top: 6rem;
}

.proscons-shortcode__card {
    padding: 1.25rem 2rem;
    background: #f9f9fc;
    box-sizing: border-box;
    width: 100%;
    border-radius: var(--border-radius);
}

.proscons-shortcode__card:last-child {
    margin-top: 0;
    background: #f9f9fc;
}

.proscons-shortcode__description {
    font-size: var(--body-text);
    font-weight: normal;
    line-height: var(--line-height-body);
    color: var(--text-color-card);
}

span.proscons-shortcode__description p,
span.proscons-shortcode__description strong,
span.proscons-shortcode__description li,
span.proscons-shortcode__description a {
    color: var(--text-color-card);
}

.proscons-shortcode__container h2 {
    font-size: var(--font-size-h2);
    color: var(--text-color-card);
    margin-top: 0;
    margin-bottom: 0.75rem;
    font-weight: var(--headers-weight);
    text-transform: var(--headers-transform);
}

.proscons-shortcode__card h3 {
    vertical-align: middle;
    margin-left: .6rem;
    margin-bottom: 0.5rem;
    display: inline;
    text-transform: var(--headers-transform);
    font-weight: var(--headers-weight);
    color: var(--text-color-card);
}

.proscons-shortcode__card h4 {
    margin-bottom: .5rem;
    color: var(--text-color-card);
}

.proscons-shortcode__card svg {
    width: 32px;
    height: 32px;
    display: inline-block;
    vertical-align: middle;
}

.proscons-shortcode__card ul {
    list-style: disc;
    font-size: var(--body-text);
    padding: 0;
    margin: 0.75rem 0.75rem 0;
}

.proscons-shortcode__card li {
    display: list-item;
    margin: 0 0 .5rem;
}

.proscons-shortcode__card_container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-top: 1.25rem;
}

@media (min-width: 500px) {
    .proscons-shortcode__container {
        padding: 2rem;
        margin: var(--section-spacing-desktop) auto;
        border-radius: var(--border-radius);
    }
}

@media (min-width: 768px) {
    .proscons-shortcode__container h2 {
        font-size: var(--font-size-h2-desktop);
    }
}

@media (min-width: 960px) {
    .proscons-shortcode__card_container {
        grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    }
}