/* Shared viewport safeguards for every page. Page-specific rules live in page CSS files. */
*,
*::before,
*::after {
    box-sizing: border-box;
}

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

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

img,
video,
iframe {
    max-width: 100%;
    height: auto;
}

button,
input,
select,
textarea {
    min-width: 0;
    max-width: 100%;
}

table {
    max-width: 100%;
}

pre,
code {
    max-width: 100%;
    overflow-wrap: anywhere;
}

@media (max-width: 768px) {
    body {
        overflow-x: clip;
    }

    main {
        min-width: 0;
        max-width: 100%;
    }

    :where(.container, .wrapper, .content, .page-container) {
        max-width: 100%;
        min-width: 0;
    }

    :where(.row, .flex, .grid, .input-group, .button-group) {
        min-width: 0;
        max-width: 100%;
    }

    :where(table) {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    :where(h1, h2, h3, h4, h5, h6, p, a, button, label) {
        overflow-wrap: anywhere;
    }
}