html,
body {
    max-width: 100%;
    overflow-x: clip;
}

@media (max-width: 600px) {
    .storefront-header {
        width: 100%;
    }

    .storefront-brand {
        flex: 1 1 auto;
        overflow: hidden;
    }

    .storefront-brand > span:last-child {
        overflow: hidden;
    }

    .storefront-brand strong,
    .storefront-brand small {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .storefront-hero h1,
    .storefront-hero-copy > p,
    .storefront-section h2,
    .storefront-section p {
        overflow-wrap: anywhere;
    }

    .storefront-footer {
        flex-wrap: wrap;
    }

    .storefront-footer > div:first-child {
        min-width: 0;
        flex: 1 1 220px;
    }

    .storefront-footer > div:first-child > span:last-child {
        min-width: 0;
    }

    .storefront-social {
        flex: none;
    }
}