body::after {
    display: none !important
}

.sr-hint {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important
}

.hide-sm,
.hide-md,
.hide-lg,
.hide-xl,
.hide-xxl {
    display: block
}

.show-sm,
.show-md,
.show-lg,
.show-xl,
.show-xxl {
    display: none
}

@media (min-width: 0) {
    :root {
        --active-view: xs
    }

    body::after {
        content: "breakpoint-xs"
    }

    head {
        font-family: breakpoint-xs
    }

    .hide-xs {
        display: none
    }

    .show-xs {
        display: block
    }
}

@media (min-width: 30rem) {
    :root {
        --active-view: sm
    }

    body::after {
        content: "breakpoint-sm"
    }

    head {
        font-family: breakpoint-sm
    }

    .hide-xs {
        display: block
    }

    .show-xs {
        display: none
    }

    .hide-sm {
        display: none
    }

    .show-sm {
        display: block
    }
}

@media (min-width: 48rem) {
    :root {
        --active-view: md
    }

    body::after {
        content: "breakpoint-md"
    }

    head {
        font-family: breakpoint-md
    }

    .hide-sm {
        display: block
    }

    .show-sm {
        display: none
    }

    .hide-md {
        display: none
    }

    .show-md {
        display: block
    }
}

@media (min-width: 62rem) {
    :root {
        --active-view: lg
    }

    body::after {
        content: "breakpoint-lg"
    }

    head {
        font-family: breakpoint-lg
    }

    .hide-md {
        display: block
    }

    .show-md {
        display: none
    }

    .hide-lg {
        display: none
    }

    .show-lg {
        display: block
    }
}

@media (min-width: 75rem) {
    :root {
        --active-view: xl
    }

    body::after {
        content: "breakpoint-xl"
    }

    head {
        font-family: breakpoint-xl
    }

    .hide-lg {
        display: block
    }

    .show-lg {
        display: none
    }

    .hide-xl {
        display: none
    }

    .show-xl {
        display: block
    }
}

@media (min-width: 87.5rem) {
    :root {
        --active-view: xxl
    }

    body::after {
        content: "breakpoint-xxl"
    }

    head {
        font-family: breakpoint-xxl
    }

    .hide-xl {
        display: block
    }

    .show-xl {
        display: none
    }

    .hide-xxl {
        display: none
    }

    .show-xxl {
        display: block
    }
}

[tabindex],
a[href],
area[href],
button,
details,
input,
iframe,
select,
textarea {
    scroll-margin-top: var(--scroll-margin);
    scroll-margin-bottom: var(--scroll-margin)
}

@media (min-width: 0) {
    :root {
        --scroll-margin: 5.25rem
    }
}

@media (min-width: 48rem) {
    :root {
        --scroll-margin: 5.875rem
    }
}

@media (min-width: 62rem) {
    :root {
        --scroll-margin: 8.375rem
    }
}

@media (min-width: 30rem) {
    :root {
        --container-maxwidth: 27.5rem
    }
}

@media (min-width: 48rem) {
    :root {
        --container-maxwidth: 45rem
    }
}

@media (min-width: 62rem) {
    :root {
        --container-maxwidth: 57.5rem
    }
}

@media (min-width: 75rem) {
    :root {
        --container-maxwidth: 67.5rem
    }
}

@media (min-width: 87.5rem) {
    :root {
        --container-maxwidth: 80rem
    }
}