.about-container {
    max-width: 900px;
    margin: 80px auto;
    padding: 32px 24px;
    background: var(--bg);
    border-radius: 7px;

    width: calc(100% - 28px);
}

.about-container h1 {
    font-size: 2rem;
    margin-bottom: 24px;
    color: var(--text);
}

.about-container h2 {
    font-size: 1.3rem;
    margin-top: 32px;
    margin-bottom: 12px;
    color: var(--primary);
}

.about-container p {
    color: var(--text-muted);
    margin-bottom: 16px;
    line-height: 1.9;
}

.about-container .intro {
    font-size: 1.05rem;
    color: var(--text);
}

.about-container ul {
    margin-top: 12px;
    padding-right: 18px;
}

.about-container ul li {
    margin-bottom: 10px;
    position: relative;
    padding-right: 14px;
    color: var(--text-muted);
}

.about-container ul li::before {
    content: "•";
    position: absolute;
    right: 0;
    color: var(--primary);
}

@media(min-width: 768px) {
    .about-container {
        background-color: var(--bg-dark);
    }
}