html {
    max-width: 100%;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

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

img,
picture,
video,
canvas {
    max-width: 100%;
}

img,
video {
    height: auto;
}

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

textarea {
    resize: vertical;
}

a,
button,
input,
select,
textarea {
    touch-action: manipulation;
}

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

pre {
    overflow: auto;
}

.page,
.wrap,
.wrapper,
.container,
.panel,
.card,
main,
section {
    min-width: 0;
}

.table-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
}

table {
    max-width: none;
}

h1,
h2,
h3,
p,
.brand,
.detail strong {
    overflow-wrap: anywhere;
}

@media (max-width: 768px) {
    input,
    select,
    textarea {
        font-size: 16px;
    }

    button,
    .btn,
    input[type="button"],
    input[type="submit"] {
        min-height: 44px;
    }

    .top > *,
    .topbar > *,
    .topnav > *,
    .navbar > *,
    .trainer-nav > * {
        min-width: 0;
        max-width: 100%;
    }
}

@media (max-width: 480px) {
    input[type="file"] {
        width: 100%;
        font-size: 14px;
    }

    button,
    .btn {
        white-space: normal;
    }
}