@media (width <= 835px) {
    main {
        width: 100%;
        padding: 0 20px;
    }

    nav {
        padding: 0;

        .nav-inner {
            width: 100%;
        }
    }

    .hero {
        padding: 80px 20px 60px;

        h1 {
            font-size: 2.2em;
        }

        .hero-tagline {
            font-size: 1em;
        }
    }

    .showcase {
        padding: 0 20px 40px;

        .showcase-thumbs {
            grid-template-columns: 1fr;
        }
    }

    .docs-layout {
        width: 100%;
    }

    .sidebar {
        display: none;
    }

    .docs-content {
        padding: 24px 20px 40px;
    }

    footer {
        padding: 0 20px;

        .footer-content {
            width: 100%;
        }
    }
}