/*
   --foldable-breakpoint: 832px
   --mobile-breakpoint: 768px

   Note: CSS variables cannot be used in @media conditions.
   Search each number to find all uses of its breakpoint.
*/
@media (max-width: 832px) {  /* --foldable-breakpoint */
    .page-layout {
        --within-foldable-breakpoint: true;
    }
}
@media (max-width: 768px) {  /* --mobile-breakpoint */
    .page-layout {
        --within-mobile-breakpoint: true;
    }
}

/*
    zoom
 */
@media (max-width: 768px) {  /* --mobile-breakpoint */
    html { zoom: 55%; }
}

/*
    header, logo, pitch
 */
header.banner { font-size: 1.3rem; } /* fits 2-column */
.banner {
    padding: 1em;
    border-top: 1px;
    border-top-style: dashed;
    border-bottom: 1px;
    border-bottom-style: dashed;
    background-color: whitesmoke;
}
.logo {
    font-family: serif;
    font-size: 5.0rem;
}
.logo-text {
    font-style: italic;
}
.tagline {
    font-weight: bold;
    font-size: 2.0rem;
}
.pitch-caption {
    font-weight: bold;
    font-size: 1.6em;
}
.pitch-text {
    font-size: 1em;
}

/*
    sections
 */
.sections {
    display: flex; flex-direction: column; align-items: center; gap: 1em;
}
.section:after {
    content: "";
    border-width: 1px;
    border-style: dotted;
    border-color: silver;
    align-self: stretch;
    order: 1;
    margin-top: 3em;
}
.section:last-child:after {
    border-style: none;
}
.section {
    display: flex; flex-direction: column; align-items: center;
    width: 100%;
}
.section-header {
    font-size: 1.3em;
    margin: 1em;
    text-align: center;
}
.section-header-title {
    font-size: 1.6em;
    font-weight: bolder;
    margin-bottom: 0;
}
.section-tagline {

}
.exhibit {
    display:flex; gap: 1em; flex-direction: column; align-items: center;
    width: 100%;
}
.exhibit-side-by-side {
    display: flex;
    flex-wrap: wrap;
    gap: 2em; align-items: stretch; justify-content: space-evenly;
}
.exhibit-above-and-below {
    display: flex; flex-direction: column;
    gap: 1em;
}
.exhibit-preview {
    border-style: double;
    border-width: 1px;
    border-radius: 16px;
    border-color: lightgray;
    padding: 16px;
    background-color: whitesmoke;
}

.preview-html-first {
    min-height: 200px;
    max-width: 240px;
}

.preview-declarative {
    min-height: 610px;
    max-width: 220px;
}

.preview-buildless {
    min-height: 320px;
    min-width: 620px;
}

/*
    view-source
 */
view-source {
    border-width: 6px;
    border-color: lightgray;
    border-style: outset;
    max-width: 90%;
}
@media (max-width: 768px) {  /* --mobile-breakpoint */
    view-source {
        max-width: 180dvw;
    }
}


/*
footer
 */
footer.banner {
    font-size: 1rem;
    display: grid;
    grid-template-columns: auto auto;
    column-gap: 6em;
    row-gap: 1.5em;
    justify-content: space-between;
    align-items: baseline;
}
footer.banner > div:nth-child(even) {
    justify-self: end;
}
@media (min-width: 1200px) {
    footer.banner {
        grid-template-columns: auto auto auto auto;
    }
}