/* Optional reusable components for Peach Static Starter. Load this after Bootstrap and css/site.css when a page uses a component. */ .email-signup { max-width: 36rem; } .email-signup[aria-busy="true"] { cursor: wait; } .email-signup__trap { height: 0; left: -10000px; overflow: hidden; position: absolute; top: auto; width: 1px; } .email-signup__message { margin-bottom: 1rem; } .newsletter-signup { max-width: 36rem; } .newsletter-signup[aria-busy="true"] { cursor: wait; } .newsletter-signup__trap { height: 0; left: -10000px; overflow: hidden; position: absolute; top: auto; width: 1px; } .newsletter-signup__message { margin-bottom: 1rem; } .youtube-embed { margin: 0; max-width: 100%; } .youtube-embed__ratio { overflow: hidden; } .youtube-embed__frame { border: 0; height: 100%; width: 100%; } .youtube-embed__fallback { margin-top: 0.75rem; } .instagram-embed { max-width: 100%; } .instagram-embed__wrap { display: flex; justify-content: center; } .instagram-embed .instagram-media { background: #ffffff; border: 0; border-radius: 3px; box-shadow: 0 0 1px rgba(0, 0, 0, 0.5), 0 1px 10px rgba(0, 0, 0, 0.15); margin: 0 auto; max-width: 34rem; min-width: min(20.375rem, 100%); padding: 1rem; width: 100%; } .instagram-embed__fallback { margin-top: 0.75rem; } .gallery-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); } .gallery-grid--featured .gallery-item:first-child { grid-column: span 2; grid-row: span 2; } .gallery-grid--masonry { align-items: start; } .gallery-item { border-radius: 0.5rem; display: block; overflow: hidden; position: relative; } .gallery-item img { display: block; height: auto; transition: transform 180ms ease; width: 100%; } .gallery-item:hover img, .gallery-item:focus-visible img { transform: scale(1.02); } .gallery-item:focus-visible { box-shadow: 0 0 0 3px rgba(36, 92, 116, 0.35); outline: none; } .gallery-lightbox { align-items: center; background: rgba(14, 18, 22, 0.88); display: flex; inset: 0; justify-content: center; padding: 1rem; position: fixed; z-index: 1080; } .gallery-lightbox__dialog { background: #0f1720; border-radius: 0.5rem; color: #e8eef5; max-width: 72rem; padding: 0.75rem; width: min(100%, 72rem); } .gallery-lightbox__controls { display: flex; gap: 0.5rem; justify-content: flex-end; margin-bottom: 0.75rem; } .gallery-lightbox__btn { background: #ffffff; border: 1px solid #cfd8e3; border-radius: 0.375rem; color: #102030; line-height: 1; padding: 0.5rem 0.75rem; } .gallery-lightbox__btn:focus-visible { box-shadow: 0 0 0 3px rgba(184, 135, 45, 0.45); outline: none; } .gallery-lightbox__figure { margin: 0; } .gallery-lightbox__image { display: block; height: auto; margin: 0 auto; max-height: min(72vh, 52rem); max-width: 100%; } .gallery-lightbox__caption { font-size: 0.95rem; margin-top: 0.625rem; } .gallery-lightbox-open { overflow: hidden; } @media (max-width: 767.98px) { .gallery-grid--featured .gallery-item:first-child { grid-column: auto; grid-row: auto; } }