:root {
   /* config  */
   --calc-font-size: calc(0.4em + 2vw);
   --small-calc-font-size: calc(1.3em - 2.2vw);
   --default-font-family: "Avenir Book";
   --default-font-color: #3d3d3d;
   --header-font-family: var(--default-font-family);
   --header-font-color: var(--default-font-color);
   --body-font-family: var(--default-font-family);
   --body-font-color: var(--default-font-color);

   /* type  */
   font-size: var(--calc-font-size);
   line-height: 1.35;

   /* layout  */
   margin: auto;
   box-sizing: border-box;
}

body {
   margin: 0;
   min-height: 100vh;
   min-height: -webkit-fill-available;
   display: flex;
   flex-direction: column;
}

h1,
h2,
h3,
h4,
h5,
h6 {
   color: var(--header-font-color);
   font-family: var(--header-font-family);
   margin: 0;
}

p,
ul,
ol {
   color: var(--body-font-color);
   font-family: var(--body-font-family);
   text-rendering: optimizeLegibility;
   max-width: 84ch;
   margin: auto;
}

.header-content,
.body-content,
.footer-content {
   margin: 0 auto;
   display: flex;
}

.body-content {
   margin-top: 2ch;
   flex-direction: column;
   flex: 1;
}

.header-content {
   width: 85vw;
   max-width: 944px;
   align-items: baseline;
   flex-direction: row;
   border-bottom: 1px solid #ccc;
}

.footer-content {
   border-top: 1px solid #ccc;
   align-items: center;
   background: #f3f3f3;
   flex-direction: column;
   width: 100%;
   height: auto;
}

.header-title {
   cursor: default;
   transition: box-shadow 200ms ease, color 200ms ease;
   flex: 1;
}

.header-title>h1:hover {
   color: #000;
}

.breadcrumbs {
   font-style: italic;
   align-self: flex-start;
   margin: 0;
   font-size: var(--small-calc-font-size);
}

.nav-menu {
   display: flex;
}

.link-nav {
   margin: 0 1ch;
   color: var(--body-font-color);
   font-family: var(--header-font-family);
   font-size: calc(0.62 * var(--calc-font-size));
   transition: box-shadow 200ms ease, color 200ms ease;
}

.link-nav.w--current,
.link-nav:hover {
   box-shadow: inset 0 -0.16vw 0 0 #000;
   color: #000;
}

.w-nav-link {
   cursor: pointer;
}

.hero {
   display: flex;
   align-items: center;
   flex-direction: column;
   margin-bottom: 1.25em
}

.background-image {
   background-size: contain;
   background-repeat: no-repeat;
   background-position: center;
   display: flex;
   justify-content: center;

}

.background-image>img {
   opacity: 0;
   width: 85%;
   height: intrinsic;
}

.hero-banner>p {
   padding: 0.5em 80px 1.75em;
   text-align: center;
   position: relative;
}

.salutations>p {
   margin-top: 10px;
   margin-bottom: 2em;
   padding: 0.3em 1em;
   font-size: calc(0.62 * var(--calc-font-size));
}

.date {
   border-top: 1px solid #ccc;
}

.date>p {
   margin-left: 8px;
   font-size: var(--small-calc-font-size);
   font-style: italic;
}


.footer-text {
   font-size: var(--small-calc-font-size);
   text-align: center;
   padding-bottom: 1ch;
}

.thumbnails,
.hero {
   display: flex;
   flex-wrap: wrap;
}

.thumb {
   margin: 0 4px 20px;
   width: 228px;
   height: 200px;
}

.thumb img {
   width: 228px;
   height: 200px;
   vertical-align: middle;
   object-fit: contain;
}


@media screen and (max-width: 487px) {
   .snap-width {
      width: 236px;
   }
}

@media screen and (min-width: 488px) and (max-width: 723px) {
   .snap-width {
      width: 472px;
   }
}

@media screen and (min-width: 724px) and (max-width: 959px) {
   .snap-width {
      width: 708px;
   }
}

@media screen and (min-width: 960px) {
   .snap-width {
      width: 944px;
   }
}