* { box-sizing: border-box; } html, body { margin: 0; padding: 0; } header { position: sticky; top: 0; background: white; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; opacity: 0.975; box-shadow: 0 1px 3px rgba(0,0,0,0.1); height: 120px; z-index: 1; } .container { padding: 1em max(calc(100vw - 1200px) / 2, 1em); } section { max-width: 100%; scroll-margin-top: 100px; } @media (max-width: 600px) { header { height: 130px; } section { scroll-margin-top: 130px; } } section:nth-child(even) { background: #f8f8f8; } .logo img { height: 90px; } @media (max-width: 600px) { .logo, nav { margin: auto; } } nav ul { padding: 0; list-style-type: none; display: flex; font-size: 1.1em; } nav li:not(:first-child) { margin-left: 1em; } nav a { text-decoration: none; } a { color: #355e3b; } p, li { line-height: 1.6em; } #home { height: 50vh; } #home img { height: 100%; width: 100%; object-fit: cover; object-position: center center; } /* PHOTOS */ .photos { display: flex; flex-wrap: wrap; gap: 1em; } .photos img:not(.full) { width: calc(25% - .75em); min-width: 120px; max-height: 12em; object-fit: cover; cursor: pointer; border: 2px solid #355e3b; } .photos img.full { position: fixed; padding: 1em; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; z-index: 2; object-fit: contain; cursor: pointer; background: rgba(0,0,0,0.8); } /* COLUMNS */ .columns { display: flex; flex-wrap: wrap; } .column { width: 50%; } @media (max-width: 720px) { .column { width: 100%; } nav { display: none; } } /* MAP */ #map { width: 100%; height: 50vh; }