.container h1 {
    color: var(--color-subtext);
}

.container h4 {
    color: var(--color-subtext);
    font-size: 0.95rem;
}

strong {
    font-weight: bold;
    background-color: var(--color-border);
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
}

.sections {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
}

.section-card {
    background: var(--color-surface);
    border-radius: 0.75rem;
    box-shadow: var(--box-shadow);
    padding: 1.5rem;
    margin-bottom: 2rem;
}

.section-card a {
    color: var(--hover-color);
    font-weight: 600;
    text-decoration: underline;
    transition: color 0.2s ease;
}

.section-card a:hover {
    color: var(--color-border);
}

.section-card strong {
    font-weight: bold;
    background-color: var(--color-background);
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
}

.section-card img {
    width: 100%;
    height: auto !important;
    display: block;
    margin: 1rem auto 2rem;
    /* shorthand for top, horizontal (auto), and bottom margin */
    border-radius: 12px;
    box-shadow: var(--box-shadow);
}

.section-card h2 {
    color: var(--color-accent);
    font-size: 1.25rem;

}

.section-card h4 {
    color: var(--color-accent);
    font-size: 1.25rem;
    padding-top: 1rem;
}

.section-card p {
    color: var(--color-subtext);
    font-size: 0.95rem;
    padding-bottom: 1rem;
}

/* .section-card img {
    max-width: 100%;
    border-radius: 6px;
    object-fit: contain;
    height: 180px;
} */

.foot-note {
    font-size: small;
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
}