@media (max-width: 992px) {

}

@media (max-width: 1024px) {

}
/* Global responsive refinements */
html,
body,
#app {
    max-width: 100%;
    overflow-x: hidden;
}

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

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

@media (max-width: 1023px) {
    main > div > .grid,
    main > section > .grid {
        gap: 1.25rem;
    }

    .compact-table {
        min-width: 680px;
    }
}

@media (max-width: 767px) {
    body {
        font-size: 15px;
    }

    header .max-w-7xl {
        padding-left: .75rem !important;
        padding-right: .75rem !important;
    }

    header h1 {
        font-size: 1rem !important;
        line-height: 1.2 !important;
    }

    header h1 + p {
        max-width: 180px;
        font-size: .62rem !important;
        line-height: 1.2;
    }

    header img {
        width: 2.5rem !important;
        height: 2.5rem !important;
    }

    main .max-w-7xl,
    main .max-w-6xl,
    main .max-w-5xl,
    main .max-w-4xl {
        padding-left: .85rem !important;
        padding-right: .85rem !important;
    }

    main h1 {
        font-size: clamp(1.65rem, 8vw, 2.25rem) !important;
        line-height: 1.12 !important;
    }

    main h2 {
        line-height: 1.18 !important;
    }

    main [class*="rounded-lg"],
    main [class*="rounded-xl"] {
        border-radius: .75rem;
    }

    main [class*="p-8"],
    main [class*="p-10"],
    main [class*="p-12"] {
        padding: 1.1rem !important;
    }

    main [class*="px-8"],
    main [class*="px-10"],
    main [class*="px-12"] {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .overflow-x-auto {
        margin-left: -.25rem;
        margin-right: -.25rem;
        padding-bottom: .45rem;
        overscroll-behavior-inline: contain;
        scrollbar-width: thin;
    }

    table {
        font-size: .78rem;
    }

    footer {
        text-align: center;
    }

    footer .flex {
        justify-content: center;
    }

    footer ul a {
        justify-content: center !important;
    }
}

@media (max-width: 420px) {
    header .fixed.top-0.left-0 {
        width: min(92vw, 22rem) !important;
    }

    header .fixed nav .dropdown-menu {
        position: static !important;
        width: 100% !important;
        margin-top: .5rem;
    }

    main button,
    main a {
        overflow-wrap: anywhere;
    }
}