/* Mobile spacing overrides
   Keeps pages from touching the viewport edges on small screens. */

@media (max-width: 640px) {
    .container {
        padding-left: 16px;
        padding-right: 16px;
    }

    .app-header .container {
        padding-left: 12px;
        padding-right: 12px;
    }

    .main {
        padding-top: 28px;
    }

    .hero {
        margin-left: -16px;
        margin-right: -16px;
        padding-left: 16px;
        padding-right: 16px;
    }

    .toolbar,
    .dashboard-search,
    .sort-tabs,
    .video-card,
    .card,
    .feature,
    .pricing-card {
        max-width: 100%;
    }
}