@media (max-width: 620px) {
    .site-header .nav {
        align-items: stretch;
    }

    .nav-links {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 4px;
    }

    .nav-links a {
        padding: 8px 3px;
        text-align: center;
        white-space: normal;
        overflow-wrap: anywhere;
        font-size: 0.8rem;
    }

    .hero,
    .hero h1,
    .hero p,
    .section-title,
    .archive-section-head,
    .card-body,
    .detail-hero,
    .content-box {
        text-align: start;
    }

    .hero p {
        line-height: 2;
    }

    .meta {
        justify-content: flex-start;
    }

    .footer-row {
        text-align: center;
    }
}