/* =========================================================
TABLET
========================================================= */

@media (max-width: 1000px)
{
#toolbar
{
padding: 0 20px;
}


#hero
{
    left: 6%;
    top: 23%;
    width: 350px;
}


#modelInfo
{
    right: 20px;
}


#showcaseCards
{
    right: 20px;
    width: 290px;
}


#metrics
{
    left: 6%;
    gap: 20px;
}


}

/* =========================================================
MOBILE
========================================================= */

@media (max-width: 800px)
{
#toolbar
{
height: 62px;
padding: 0 16px;
}


#navigation
{
    display: none;
}


#hero
{
    left: 6%;
    top: 20%;
    width: 320px;
}


#hero p
{
    width: 280px;
}


h1
{
    font-size:
        clamp(
            36px,
            10vw,
            52px
        );
}


#modelInfo
{
    right: 15px;
    top: 85px;
    width: 200px;
}


#metrics
{
    display: none;
}


#showcaseCards
{
    right: 15px;
    bottom: 105px;
    width: 280px;
}


.showcaseCard
{
    min-height: 95px;
    padding: 11px;
}


#viewPanel
{
    right: 15px;
    bottom: 58px;
}


#status
{
    right: 15px;
    bottom: 15px;
    max-width: 180px;
}


#help
{
    bottom: 15px;
    white-space: nowrap;
}


}

/* =========================================================
SMALL MOBILE
========================================================= */

@media (max-width: 500px)
{
#brandMark
{
width: 28px;
height: 28px;
}


#title
{
    font-size: 12px;
}


#subtitle
{
    font-size: 7px;
}


#hero
{
    top: 18%;
    width: 270px;
}


#heroEyebrow
{
    font-size: 8px;
    letter-spacing: 1.8px;
}


#hero p
{
    width: 250px;
    font-size: 12px;
}


#heroActions
{
    gap: 6px;
}


#heroActions button
{
    padding: 9px 11px;
    font-size: 8px;
}


/*
 * Model information occupies the upper-right area.
 */

#modelInfo
{
    top: 76px;
    right: 12px;
    width: 175px;
    padding: 11px;
}


#modelName
{
    font-size: 12px;
}


#modelDescription
{
    font-size: 9px;
}


/*
 * Domain indicator stays below the toolbar.
 */

#domainIndicator
{
    top: 70px;
    padding: 6px 8px;
    gap: 5px;
}


#domainIndicator span,
#domainIndicator b
{
    font-size: 6px;
}


#domainIndicator i
{
    font-size: 7px;
}


/*
 * Gallery gets its own upper/lower-middle zone.
 * It must not share the same vertical space
 * as the showcase cards.
 */

#modelGallery
{
    left: 6%;
    right: auto;
    bottom: 245px;
    width: 190px;
    padding: 10px;
}


.galleryTitle
{
    font-size: 7px;
}


#modelGallery button
{
    padding: 7px 8px;
    font-size: 7px;
}


/*
 * Showcase cards occupy the lower-middle area.
 */

#showcaseCards
{
    left: 6%;
    right: auto;
    bottom: 82px;
    width: 88%;

    grid-template-columns:
        repeat(2, 1fr);
}


.showcaseCard
{
    min-height: 82px;
    padding: 9px;
}


.showcaseCardTitle
{
    font-size: 10px;
}


.showcaseCardText
{
    font-size: 7px;
}


/*
 * View controls sit above the bottom status area.
 */

#viewPanel
{
    right: 10px;
    bottom: 38px;
}


/*
 * Keep status compact and away from
 * the showcase cards.
 */

#status
{
    right: 10px;
    bottom: 8px;
    max-width: 150px;
}


/*
 * Help is positioned independently so it
 * does not collide with status.
 */

#help
{
    left: 10px;
    right: auto;
    bottom: 8px;
    font-size: 8px;
    white-space: nowrap;
}


}