@media only screen and (max-width: 786px){
    :root{
        --layout-padding: 20vh !important;
    }

    .container{
        height: max-content !important;
    }
}

/* === Mobile Devices === */
@media only screen and (max-width: 481px) {
    /* === Typography === */
    h1 {
        font-size: 16px;
    }

    h2 {
        font-size: 14px;
    }

    h3 {
        font-size: 12px;
    }

    h4 {
        font-size: 10px;
    }

    h5 {
        font-size: 8px;
    }

    *:is(h1,h2,h3,h4,h5,h6,p,a,label) {
        line-height: 1.3;
    }

    .nav-title {
        font-size: 12px;
    }

    .banner.leaderboard h5, .banner.team-summary h5 {
        font-size: 12px;
    }
    /* === Spacing === */
    body {
        /* === Margin === */
        --m1: 0.125rem !important;
        --m2: 0.25rem !important;
        --m3: 0.5rem !important;
        --m4: 0.75rem !important;
        --m5: 1.5rem !important;
        /* === Padding === */
        --p1: 0.125rem !important;
        --p2: 0.25rem !important;
        --p3: 0.5rem !important;
        --p4: 0.75rem !important;
        --p5: 1.5rem !important;
        /* === Gap === */
        --gap1: 0.125rem !important;
        --gap2: 0.25rem !important;
        --gap3: 0.5rem !important;
        --gap4: 0.75rem !important;
        --gap5: 1.5rem !important;
    }

    .container{
        padding-top: var(--p3);
    }

    /* === Buttons === */
    .button, button {
        font-size: 10px;
    }

        button.breadcrumb,
        .button.breadcrumb {
            font-size: 10px;
            padding: .05rem .15rem;
        }

    .button-icon .icon {
        height: 16px;
        width: 16px;
    }

    .icon.sm img{
        height: 14px;
        width: 14px;
    }

    .tile {
        /*min-width: 80px !important;
        max-width: 100px !important;*/
    }

        .tile.dashboard {
            border-radius: 1em !important;
        }

            .tile.dashboard :is(h1,h2,h3,h4,h5,h6) {
                font-family: var(--font-body);
                font-size: 10px;
                width: 100%;
                text-align: center;
            }

        .tile svg.icon {
            height: 56px;
            width: 56px;
            fill: var(--color-light);
            align-self: center;
            padding: var(--p1);
            margin-block: var(--m1);
        }


    /* === Tables === */

    table {
        border-spacing: 0.2em 0.2em;
    }

    th, td {
        font-size: 10px;
    }

    table.ladder *:is(th,td) {
        padding: 0.1em;
    }

    .ladder__component {
        min-width: 290px;
        width: 100%;
    }



    .img.img__club-dashboard {
        max-width: 8em;
    }

    .card:is(.leaderboard) {
        width: 290px !important;
    }

    .card:is(.team) .avatar img {
        max-width: 100px;
        height: auto;
    }

    .page-header {
        box-shadow: none;
        clip-path: none;
    }
}