.grid-gallery{width:100%;display:grid}.grid-gallery a{width:100%;height:100%;display:block}.gallery-tile{cursor:pointer;contain:layout paint;width:100%;height:100%;position:relative;overflow:hidden}.hover-title{z-index:2;background-color:var(--background-color);opacity:0;pointer-events:none;min-height:var(--gallery-info-bar-height);text-overflow:ellipsis;max-width:100%;padding:0 4px 12px;transition:none;position:absolute;left:0;right:0;overflow:hidden;& .primary-text{font-size:16px;font-weight:400}& .secondary-text{font-size:16px;font-weight:200}@media (width<=728px){padding:0 4px 8px}}.hover-shutter{z-index:1;opacity:0;pointer-events:none;background-color:beige;position:absolute;inset:0}.gallery-tile:hover .hover-shutter{opacity:.2}.gallery-tile:hover .hover-title{opacity:1}.hover-title.auto-show{opacity:1;transition:opacity .3s ease-in-out;transform:translateY(0)}.hover-title.manual-show{opacity:1;transition:opacity .1s ease-in-out}@keyframes titlePulse{0%{opacity:0;transform:translateY(10px)}15%{opacity:1;transform:translateY(0)}85%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-10px)}}@media (width<=728px){.gallery-tile:hover .hover-shutter,.gallery-tile:hover .hover-title{opacity:0}}.collage-element img{width:100%;height:100%;display:block}.grid-gallery{& .square{aspect-ratio:1}& .horizontal{aspect-ratio:2}& .vertical{aspect-ratio:1/2}& .collage-element{box-sizing:border-box;contain:layout paint;overflow:hidden}}.collage-1{grid-template-rows:repeat(4,1fr);grid-template-columns:repeat(3,1fr)}.collage-1{& .hover-title{top:0}& .element-1{grid-row:1/3;&>a{padding:0 6px 6px 0}}& .element-2>a{padding:0 6px 6px}& .element-3>a{padding:0 0 6px 6px}& .element-4>a{padding:6px 6px 6px 0}& .element-5{grid-area:2/2/4/4;&>a{padding:6px 0 6px 6px}}& .element-6{grid-column:1/3;&>a{padding:6px 6px 0 0}}& .element-7>a{padding:6px 0 0 6px}}@media (width<=728px){.collage-1{grid-template-rows:repeat(6,1fr);grid-template-columns:repeat(2,1fr);& .element-1{grid-row:3/5;&>a{padding:4px 4px 4px 0}}& .element-2>a,& .element-3>a{padding:4px 0 4px 4px}& .element-4>a{padding:4px 4px 0 0}& .element-5{grid-area:1/1/3/3;&>a{padding:0 0 4px}}& .element-6{grid-area:5/1/auto/3;&>a{padding:4px 0}}& .element-7>a{padding:4px 0 0 4px}}}