/* CSS RESET */
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* MY CODE */
/* 
STYLE GUIDE:
#2F7BBA - Don's Blue (WCAG AA)
#F5F8FC - Don's Blue 5%
#EAF2F8 - Don's Blue 10%
#C1D7EA - Don's Blue 30%
#2d6da5 - Don's Blue dark
#BA2028 - Don's Red
#EABCBF - Don's Red 30%
#a62024 - Don's Red dark
#F6F1D3 - Don's Tan

NEXT STEPS:
- Photography (see below)
- DONE Domain/Hosting/SSL
- Reduce file size of images/compress stylesheet
- Align messaging across platforms
 > logo, copywriting, colors, font (if applicable), hours + direction information
 > Toast, Facebook, Instagram, Google Business, email, and website)

PHOTOGRAPHY REQUIREMENTS:
https://www.lindseyfligerphotography.com/
- 3x Food flatlays (breakfast - HOME, lunch - OUR STORY, and dinner - HOURS & DIRECTIONS)
- 1x Homepage hero image (Exterior photo of Perrault family in doorway of diner - HOME)
- 2x Page hero images (Interior photo of Parrault family behind the counter - OUR STORY, Server delivering food to a table - HOURS & DIRECTIONS)
*/

/* I.) BASE */
/* LAYOUT */
header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 3;
/*     background-color: #2F7BBA; */
/*     border-bottom: .4em #4E8FC4 solid; */
}
nav,
section,
article {
    padding-left: 72px;
    padding-right: 72px;
}
section,
article {
    padding-top: 7em;
    padding-bottom: 7em;
    text-align: center;
}
footer {
    background-color: #2F7BBA;
    min-height: 400px;
}
footer li {
    display: contents;
}
footer section,
footer nav,
section section {
/*     Reset sections nested inside footer */
    padding: 0;
    text-align: left;
}

/* TYPE */
html {
    background-color: #ffffff;
    font-family: "Kodchasan", Arial, Helvetica, sans-serif;
    color: #2F7BBA;
}
h1,
h2 {
    font-family: "Voltaire", Arial, Helvetica, sans-serif;
    text-transform: uppercase;
}
h1 {
    font-size: 4em;
}
h2 {
    font-size: 3em;
    padding-bottom: .5em;
}
p {
    font-size: 1.4em;
    font-weight: 500;
    line-height: 120%;
}
footer {
    color: #ffffff;
}
em {
    font-style: italic;
}

/* BUTTONS & LINKS */
/*Form items do not inherit by default. Reset*/
input, select, textarea, button {
    font-family: inherit;
    color: inherit;
}
button {
    padding: .15em 1em;
    border-radius: .4em;
    border-width: .15em;
    border-style: solid;
    font-size: 1.4em;
    font-weight: bold;
}
a button:hover {
    cursor: pointer;
}
a, 
a:active,
a:visited {
    color: inherit;
}
header a,
footer a,
button {
    text-decoration: none;
}





/* II.) LAYOUT */
/* MAIN NAV */
.logo-wordmark {
    height: 2.6em;
}
.nav-main { 
    display: flex;
    justify-content: space-between; /* Justifies img to the left and ul to the right */
    align-items: center; /* Aligns img and ul to middle */
    gap: 6em; /* Gap between img and ul when screen is narrow (i.e. breathing room) */
    padding-top: 1em; /* Top padding of entire nav */
    padding-bottom: 1em; /*Bottom padding of entire nav */
}
.nav-list {
    display: inline-flex;
    flex-wrap: wrap; /* Wrap li's when screen is narrow */
    justify-content: flex-end;
    gap: .5em 1em; /* Row AND column gaps between li's when screen is narrow (i.e. breathing room) */
}
.nav-main li {
    flex: 0 0 auto; /* li's will not change shape (i.e. text will not wrap inside li's) */
}
.hamburger {
    justify-self: end;
    display: grid;
    border: none;
    padding: 1em;
    font-size: 1em;
    z-index: 5;
}

/* SECTIONS */

/* HERO */
.section-hero {
    /* Reset BASE layout established in I.)*/
    box-sizing: border-box;
    padding-top: 9em;
    text-align: left;
    /**/
    width: 100%; /* NOTE TO SELF: Figure out why this works and 100vw, 100% don't */
    min-height: 100vh; /* Background defaults to 100vh, but content will not overflow background in smaller windows (i.e. if content < vh, height = vh. if content > vh, height = content) */
    display: inline-flex;
}
.flex-hero {
    flex: auto; /* Div will stretch to fill when zoomed out*/
    display: flex;
    flex-wrap: wrap;
    column-gap: 5.6em;
    row-gap: 2.6em;
    justify-content: center;
    align-items: stretch;
}
.image-hero {
    margin: 1.4em; /* Included box-shadow when div is centered */
    flex: 2 1 400px;
    min-height: 300px;
}
.copy-hero {
    margin: 1.4em; /* Borders will align with .image-hero */
    flex: 1 1 300px;
    align-self: center;
}
/* 
OBSOLETE with the introduction of <span class="no-wrap">
.copy-hero h1 {
    min-width: 296px; /* Eliminates orphans when screen is narrow
    max-width: 653px; /* Eliminates orphans when screen is wide
}
 */

/* SOCIAL */
.container-social {
    display: flex;
    flex-wrap: nowrap;
    overflow: hidden;
    justify-content: center; /* Justifies center, even when screen is narrow */
    align-items: center;
}
.image-fork, 
.image-knife-spoon {
    flex: 0 0 auto;
}
.section-social {
    min-width: 500px; /* Cutlery won't overlap when screen is narrow */
    margin: 0 auto; /* Creates the effect of justify: space-between on .container-social when screen is wide */
    /* Vertically stack divs when screen is narrow */
    display: flex;
    flex-wrap: wrap;
    /**/
    justify-content: center; /* Justifies center, even when screen is narrow */
    align-items: center;
}
.copy-social-container {
    /* Makes container smaller than content, allowing divs to overlap... */
    width: 334px; /* ...when horizontally stacked */
    height: 304px; /*... when vertically stacked */
    display: grid;
    justify-content: center;
    align-content: center;
    z-index: 1;
}
.copy-social {
    width: 500px;
    height: 500px;
    display: grid;
    place-content: center;
    place-items: center;
    transform: rotate(-10deg);
}
.copy-social p {
    max-width: 300px;
}
.image-social-container {
    z-index: 2; /* Bring to front */
}

/* ORDER */
.section-order {
/*     padding: 0;
    height: 448px; */ /* IDEA: Same height as Hours & Directions section */
    height: 40vh;
    display: grid;
    align-content: center;
}

/* REVIEWS */
.reviews-container {
    display: flex;
    flex-wrap: wrap;
    gap: 4em;
    justify-content: space-around;
    padding-top: 4em;
}
.reviews-item {
    min-width: min-content;
    max-width: 24%;
    padding: 1.4em 2em;
    display: grid;
    gap: .75em;
}
.reviews-top {
    display: grid;
    gap: 2.6em;
    align-self: start;
    justify-self: center;
}
.reviews-top p {
    text-align: left;
}
.reviews-top img {
    justify-self: center;
}
.reviews-bottom {
    display: grid;
    gap: 3em;
    align-self: end;
    justify-self: center;
}
.section-reviews > p {
    padding-top: 4em;
}

/* VISIT */
.section-visit {
    padding: 0;
    height: 448px; /* Evenly fit exactly 7 rows of checkers */
    /* Prevent background logo from overflowing when screen is narrow */
    display: flex;
    flex-wrap: nowrap;
    overflow: hidden;
    /**/
    justify-content: center; /* Justifies center, even when screen is narrow */
}
.copy-visit {
    /* Align center "COME VISIT US" */
    position: absolute;
    padding-top: 193px;
    z-index: 1;
}
.copy-visit h1 {
    white-space: nowrap;
}
.background-visit {
    flex: 0 0 auto; /* Prevent background logo from overflowing when screen is narrow */
    width: 600px;
    height: 600px;
}

/* FOOTER */
.footer-parent {
    border-top: .4em #4E8FC4 solid;
    padding: 4em 72px;
    display: flex;
    flex-wrap: wrap;
    gap: 5em 3em;
    justify-content: space-around;
}
.footer-item {
    min-width: 250px;
    max-width: 20%;
    display: grid;
}
.footer-copy {
    display: grid;
    gap: .75em;
}
.footer-copy button {
    width: 100%;
}
.footer-body {
    /* Override .footer-copy's gap: .75em */
    gap: 1.75em;
}
.footer-nav {
    padding-top: 153px;
    align-self: end;
}
.footer-other {
    align-content: start;
}
.footer-hours {
    grid: repeat(7, max-content) / repeat(2, max-content);
}
.footer-social-icons {
    display: grid;
    grid: 1fr / repeat(2, max-content);
    gap: .5em;
}
.footer-copyright {
    padding-bottom: 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: .75em 1.4em;
    justify-content: center;
}

/* PAGES */
.page-hero {
    box-sizing: border-box;
    padding-bottom: 4em;
    height: 448px;
    display: grid;
    align-content: end;
}
.page {
    padding-top: 1em;
    display: grid;
}
.page h1,
.page h2 {
    padding-top: 1em;
}

/* OUR STORY */
.page-our-story {
    padding-top: 4rem;
    padding-bottom: 4em;
    margin: 0 auto;
    max-width: 80ch;
}
.page-our-story p {
    line-height: 150%;
    margin-bottom: 1.4em;
    text-align: left;
}
.our-story-images {
    max-width: 300px;
    display: grid;
    grid: repeat(2, max-content) / 1fr;
    grid-auto-flow: column;
}
.our-story-images-A {
    padding: 1.4em 3em 2em 3em;
    float: right;
}
.our-story-images-B {
    padding: 2em 5em 3em 1em;
    float: left;
}

/* HOURS & DIRECTIONS */
.page-hours-directions {
    justify-self: center;
    display: flex;
    flex-wrap: wrap;
    gap: .75em 2em;
}
.page-hours-directions button {
    margin-top: .5em;
}
.hours-directions-item {
    display: grid;
    grid: repeat(auto-fill, max-content) / repeat(2, max-content);
    gap: .75em 2em;
}
.hours-directions-item li {
    display: contents;
}
.hours-directions-body {
    display: contents;
}
.hours-directions-copy {
    display: contents;
}
.map {
    min-height: 40vh;
    margin-bottom: 7em;
    margin-left: 72px;
    margin-right: 72px;
    position: relative;
}
.map iframe {
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    position: absolute;
}

/* VIEW MENU & ORDER */
/* 
Toast has iframes blocked
source: https://www.reddit.com/r/ToastPOS/comments/17mau0w/integration_with_custom_website/
*/

/* GENERAL (GRID, FLEXBOX) */
.span-2 {
    grid-column: 1 / span 2;
}
.column-2 {
    grid-column: 2;
}
.button-grid {
    display: grid;
    grid-template-columns: repeat(2, max-content);
    place-content: center;
    align-items: center;
    gap: .75em;
}
.stretch {
    min-width: min-content;
}

/* COPY */
.copy-title p {
    margin-top: 1em;
}
.copy-button {
    display: inline-flex;
    flex-wrap: wrap; /* Wrap li's when screen is narrow */
    gap: .5em 1em; /* Row AND column gaps between li's when screen is narrow (i.e. breathing room) */
    margin-top: 2em;   
    justify-content: center;
}





/* III.) MODULE */
/* LAYOUT */
.contact-info {
    grid: repeat(3, max-content) / repeat(2, max-content);
}

/* TYPE */
.contact-info a {
    text-decoration: underline;
    text-underline-offset: .15em;
}
.h-cta {
    color: #BA2028;
/*     -webkit-text-stroke: .5px #F5F8FC;
    text-stroke: .5px #F5F8FC; */
}
.h-shadow-primary {
    text-shadow: .0625em .0625em #D1E4F4;
}
.h-shadow-cta {
    text-shadow: /* .0625em .0625em #ffffff50, */ 0 4px 10px #F8E9E975, 4px 4px 20px #F8E9E950, 4px 4px 30px #00000025;
}
.alert {
    color: #BA2028;
    font-weight: bold;
}
.copy-hero p {
    text-shadow: 0 0 16px #ffffff, 0 0 15px #ffffff, 0 0 14px #ffffff, 0 0 13px #ffffff, 0 0 12px #ffffff, 0 0 11px #ffffff, 0 0 10px #ffffff, 0 0 9px #ffffff, 0 0 8px #ffffff, 0 0 7px #ffffff, 0 0 6px #ffffff, 0 0 5px #ffffff, 0 0 4px #ffffff, 0 0 3px #ffffff, 0 0 2px #ffffff, 0 0 1px #ffffff;
}
.section-social p {
    font-weight: 600;
}
.section-reviews > p {
    font-weight: bold;
    font-style: italic;
}
.reviews-top p {
    font-size: 1.2em;
}
.reviews-bottom p {
    font-size: 1.4em;
    color: #BA2028;
    text-align: center;
}
.footer-heading {
    font-size: 2em;
    padding-bottom: .5em;
}
.footer-copy p {
    font-size: 1em;
    font-weight: 400;
}
.footer-copyright {
    font-size: .75em;
    font-weight: normal;
}
.text-decoration-none {
    text-decoration: none;
}
.no-wrap {
    white-space: nowrap;
}

/* BUTTONS */
header button {
    border-width: .1em;
}
.hamburger {
    border: none;
    background-color: #2F7BBA;
}
.button-primary {
    border-color: #2F7BBA;
    background-color: #2F7BBA;
    color: #ffffff;
}
.button-cta {
    border-color: #BA2028;
    background-color: #BA2028;
    color: #ffffff;
}
.button-secondary {
    border-color: #2F7BBA;
    background-color: #ffffff;
    color: #2F7BBA;    
}
.button-secondaryCTA {
    border-color: #BA2028;
    background-color: #ffffff;
    color: #BA2028;    
}
.button-alt {
    border-color: #ffffff;
    background-color: #ffffff;
    color: #2F7BBA;  
}
.button-altCTA {
    border-color: #ffffff;
    background-color: #BA2028;
    color: #ffffff; 
}
.small-button {
    padding: .5em;
    border-width: .1em;
    font-size: 1em;
}

/* BACKGROUNDS & IMAGES */
.background-position-bottom {
    background-position: bottom center;
}
.background-position-top {
    background-position: top center;
}
.background-checker {
    background-image: url("../images/background-checker.svg"); 
    background-size: 128px;
}
.background-logo {
    background-image: url("../images/logo_background only.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-origin: content-box;
    background-clip: content-box;
}
.background-photo {
    background-color: #ffffff99;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat; 
}
.image-container {
    border: .4em solid #2F7BBA;
    border-radius: 2em;
    box-shadow: 1.4em 1.2em #EABCBF;
    overflow: hidden;
}
.image-hero {
    background-color: #EAF2F8;
    background-image: url("../images/food04.jpg"), url("../images/exterior05.jpg");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-origin: border-box;
    background-clip: border-box;
    transform: rotate(-3deg);
}
.image-fork {
    height: 500px;
    transform: rotate(25deg);
}
.image-knife-spoon {
    height: 600px;
    transform: rotate(-15deg);
}
.reviews-image {
    height: 2.2em;
}
.section-order {
    background-position: center;
    background-attachment: fixed;
    background-size: cover;
/*     box-shadow: 0 0 10px 10px #00000025 inset; */ /* IDEA */
    box-shadow: 0 .4em 0 0 #D1E4F4 inset, 0 1.4em 0 0 #C1D7EA inset, 0 -.4em 0 0 #EAF2F8 inset; 
    /* , 0 -.3em 0 0 #f8f8f8 inset, 0 -.6em 0 0 #f4f4f4 inset, 0 -1.2em 0 0 #f2f2f2 inset */ /* IDEA */
    /* , 0 -.8em 0 0 #C1D7EA inset, 0 -1.2em 0 0 #EAF2F8 inset */ /* IDEA */
    border-top-left-radius: 100% 15%;
    /* border-bottom-right-radius: 100% 10%; */ /* IDEA */
    background-blend-mode: overlay;
}
.home-order {
    background-image: url("../images/food05.jpg");
}
.logo-decorative {
    min-width: 300px;
    max-width: 25%;
    position: absolute;
    filter: drop-shadow(0 4px 10px #00000025) drop-shadow(0 4px 15px #1ABCFE25);
}
.logo-decorative-header {
    left: -60px;
    top: -8px;
    overflow: hidden;
}
.footer-info-icon {
    height: 1.2em;
}
.footer-social-icon {
    height: 2em;
}
.button-icon {
    height: 1em;
}
.page-hero {
    background-blend-mode: overlay;
    box-shadow: 0 -.4em 0 0 #EAF2F8 inset; 
}
.our-story-hero {
    background-image: url("../images/food02.jpg");
    background-position: 50% 64%;
/*     background-image: url("../images/food01.jpg");
    background-position: 50% 60%; */
}
.our-story-photo {
    max-width: 100%;
}
.our-story-01 {
    margin-left: 4em;
    transform: rotate(3deg);
}
.our-story-02 {
    margin-right: 4em;
    transform: rotate(-3deg);
}
.our-story-03 {
    transform: rotate(-3deg)
}
.our-story-04 {
    margin-top: -.25em;
    margin-left: -3em;
    transform: rotate(4deg);
}
.our-story-order {
    background-image: url("../images/food06.jpg");
}
.hours-directions-hero {
    background-image: url("../images/food01.jpg");
    background-position: 50% 68%;
}
.hours-directions-order {
    background-image: url("../images/food07.jpg");
    box-shadow: 0 .4em 0 0 #D1E4F4 inset, 0 1.4em 0 0 #C1D7EA inset; 
}
.hours-directions-info-icon {
    height: 1.7em;
}





/* IV.) STATE */

/* PSEUDO-CLASSES */

/* BUTTONS & LINKS */
button:hover {
    box-shadow: 0.4em 0.3em #EABCBF;
    transition: box-shadow 250ms, border-color 250ms, background-color 250ms;
}
.hamburger:hover {
    box-shadow: none;
}
.button-primary:hover {
    background-color: #2d6da5;
    border-color: #2d6da5;
}
.button-cta:hover {
    background-color: #a62024;
    border-color: #a62024;
}
.button-header.button-primary:hover,
.button-header.button-cta:hover {
    border-color: #ffffff;
    box-shadow: 0.3em 0.2em #EABCBF;
}
.button-header.button-primary:hover {
    background-color: #2F7BBA;
}
.button-header.button-primary:active {
    background-color: #2d6da5;
}
.button-header.button-cta:hover {
    background-color: #BA2028;
}
.button-header.button-cta:active {
    background-color: #a62024;
}
.button-secondary:hover {
    background-color: #F5F8FC;
}

.footer-social-icon:hover {
    filter: brightness(0) saturate(100%) invert(22%) sepia(47%) saturate(4045%) hue-rotate(340deg) brightness(84%) contrast(100%);
    transition: filter 250ms;
}

a:hover,
.contact-info a:hover {
    text-decoration: none;
}
a:active,
.contact-info a:active {
    color: #BA2028
}




/* INTERSECTION OBSERVER API */

/* SOCIAL */
.image-fork-outline {
    stroke-dasharray: 8871.36328125;
    stroke-dashoffset: 8871.36328125;
}
.image-knife-spoon-outline {
    stroke-dasharray: 11913.2744140625;
    stroke-dashoffset: 11913.2744140625;
}
.image-fork-outline.move,
.image-knife-spoon-outline.move {
    animation: move 6s ease-out forwards;
}
@keyframes move {
    100% {
        stroke-dashoffset: 0;
    }
}

.intersection-observer-target {
    position: absolute;
    width: 1px;
    height: 1px; 
}

/* IMAGES */
.appear {
    transition: all 1s;
    opacity: 0;
    transform: translateY(4em);
}
.appear.image-hero {
    transform: translateY(4em) rotate(-3deg);
}
.appear.in-view {
    opacity: 1;
    transform: translateY(0);
}
.appear.in-view.image-hero {
    transform: translateY(0) rotate(-3deg);
}

/* MAIN NAV */
header.fade {
    transition: 250ms;
    background-color: #2F7BBA00;
}
header.fade.in-view {
    transition: 500ms;
    background-color: #2F7BBA;
    border-bottom: .4em #4E8FC4 solid;
}
header.fade.instant,
header.fade.in-view.instant {
    transition: 0s;
}

.logo-decorative-fade {
    transition: 250ms;
    opacity: 0;
    z-index: -1;
}
.logo-decorative-fade.in-view {
    transition: 500ms;
    opacity: 1;
    z-index: 4;
}

.logo-wordmark-fade {
    transition: 250ms;
    opacity: 0;
}
.logo-wordmark-fade.in-view {
    transition: 500ms;
    opacity: 1;
}





/* MEDIA QUERIES */

/* MAIN NAV */
@media screen and (min-width: 1177px) {
    .hamburger {
        display: none;
    }
}

@media screen and (max-width: 1176px) { 
    header {
        height: 80px;
        align-content: center;
    }
    .header-height {
        height: auto;
    }
    .nav-main {
        padding-top: .5em;
        padding-bottom: 1.4em;
        display: grid;
        grid: repeat(2, max-content) / repeat(2, max-content);
        gap: 0;
    }
    .nav-list {
        padding-top: 2em;
        grid-column: 1 / span 2;
        display: grid;
        gap: 1em;
        justify-content: center;
        justify-items: center;
    }
    .closed {
        display: none;
    }

    .section-hero {
        padding-top: 7em;
        padding-bottom: 3.25em;
    }

    .page-hours-directions {
        display: grid;
    }
}

@media screen and (max-width: 784px) {
    .our-story-item > p,
    .hours-directions-item p {
        font-size: 1.2em;
        line-height: 150%;
    }
    .our-story-images { 
        max-width: 100%;
        padding-left: 0;
        padding-right: 2.5em;
        padding-bottom: 3em;
        grid: 1fr / repeat(2, 1fr);
        grid-auto-flow: row;
        float: none;
        justify-content: center;
        justify-items: stretch;
    }
    .our-story-photo {
        margin: 0;
        min-width: 50%;
    }
}

/* MOBILE */
@media screen and (max-width: 599px) {
    section,
    .footer-parent,
    .reviews-item {
        padding-left: 24px;
        padding-right: 24px;
    }
    .page-our-story,
    .page-hours-directions {
        padding-left: 32px;
        padding-right: 32px;
    }
    nav {
        padding-left: 16px;
        padding-right: 16px;
    }
    h1 {
        font-size: 3rem;
    }
    h2 {
        font-size: 2rem;
    }
    p,
    .copy-social p,
    .reviews-bottom p,
    .section-reviews > p,
    .hours-directions-item button {
        font-size: 1.2em;
    }
    .reviews-top p,
    .our-story-item > p,
    .hours-directions-item p{
        font-size: 1em;
    }
    .logo-decorative-header {
        min-width: 248px;
    }
    .section-order {
        padding-bottom: 6em;
        background-attachment: scroll;
    }
    .section-reviews {
        padding-top: 5em;
        padding-bottom: 5em;
    }
    .reviews-image {
        height: 2em;
    }
    .our-story-images { 
        max-width: 100%;
        margin-bottom: 1em;
        padding-left: 5%;
        padding-right: 15%;
        grid: repeat(2, 1fr) / 1fr;
        grid-auto-flow: column;
        float: none;
        justify-content: center;
        justify-items: stretch;
    }
    .our-story-photo {
        max-width: 90%;
    }
    .our-story-01 {
        margin-left: 10%
    }
    .our-story-02 {
        margin-top: -1em;
        margin-right: 5%;
    }
    .our-story-04 {
        margin-top: -1em;
        margin-left: 5%;
    }
    .hours-directions-body {
        display: grid;
        gap: 1em;
    }
    .hours-directions-copy {
        display: grid;
        grid: repeat(auto-fill, max-content) / max-content;
        gap: 1.4em;
    }
    .hours-directions-item li {
        display: block;
    }
    .map {
        margin-left: 32px;
        margin-right: 32px;
    }
}

/* TABLET PORTRAIT */

@media screen and (min-height: 1100px) {
.section-hero {
    min-height: 80vh; /* Background defaults to 90vh, but content will not overflow background in smaller windows (i.e. if content < vh, height = vh. if content > vh, height = content) */
}
}

/* IV.) THEME */