@charset "UTF-8"; /* ==================================================
 * Snapic Plus for grid.wide Main Stylesheet by Lopwon.
 * www.Lopwon.com
 * 2023-10-18
 * ------------------------------------------------------------------- */

.grid .grid__item, .grid .grid__sizer { width: calc((100% / 3) - 10px); margin: 5px; } .snapic-grid-description, .snapic-grid-poster { padding: 0 1.75em; } .snapic-exif-info { padding: 0.75em 1em; width: calc(100% - 2em + 2px); height: calc(100% - 1.5em + 2px); font-size: var(--font-size-l); } .snapic-exif-info span { margin: 0.25em 0; } .snapic-grid-meta { font-size: var(--font-size-l); } .snapic-grid-by { margin-right: 1em; width: 3em; height: 3em; } .snapic-grid-avatar { width: 2.5em; height: 2.5em; } .snapic-grid-avatar img { width: 2.5em; height: 2.5em; } .snapic-grid-title { font-size: var(--font-size-xxl); line-height: 1.8; } .snapic-grid-excerpt, .snapic-grid-about, .snapic-grid-keyword, .snapic-grid-poster { font-size: var(--font-size-xl); line-height: 1.6; } .snapic-grid-about, .snapic-grid-keyword { padding: 0 1.5em; width: calc(100% - 3em); } .grid__item:hover .snapic-grid-about-avatar img { top: -1em; right: 1.5em; width: 80px; height: 80px; } .grid__item:hover .snapic-grid-keyword-avatar a, .grid__item:hover .snapic-grid-keyword-icon { left: 0.25em; width: 72px; height: 72px; background-size: 72px; } .grid__item:hover .snapic-grid-keyword-meta { left: calc(72px + 2.5em); } .page-navigator li { margin: 0 0.5em; } .page-navigator a { padding: 0.5em; min-width: 2em; height: 2em; } @media screen and (max-width: 960px) { .grid .grid__item, .grid .grid__sizer { width: calc((100% / 2) - 10px); margin: 5px; } } @media screen and (max-width: 640px) { .grid .grid__item, .grid .grid__sizer { width: calc((100% / 1) - 10px); margin: 5px; } } @media screen and (max-width: 768px) { } @media screen and (max-width: 480px) { :root { --font-size-s: 1.0em; --font-size-m: 1.2em; --font-size-l: 1.4em; --font-size-xl: 1.6em; --font-size-xxl: 1.8em; --font-size-xxxl: 2.0em; } .snapic-grid-description, .snapic-grid-poster { padding: 0 1.5em; } } @media screen and (max-width: 400px) { .snapic-grid-description, .snapic-grid-poster { padding: 0 1.25em; } }