/**
 * Stack Gallery — Elementor Widget Styles
 * Prefix: stkg-
 */

/* ═══════════════════════════════════════════
   BASE — Grid & Column System
═══════════════════════════════════════════ */

.stkg-wrap {
	--stkg-cols: 3;
	--stkg-accent: #4f46e5;
	--stkg-line: #e5e7eb;
	display: grid;
	grid-template-columns: repeat(var(--stkg-cols), 1fr);
	gap: 16px;
}

.stkg-cols-1 { --stkg-cols: 1; }
.stkg-cols-2 { --stkg-cols: 2; }
.stkg-cols-3 { --stkg-cols: 3; }
.stkg-cols-4 { --stkg-cols: 4; }
.stkg-cols-5 { --stkg-cols: 5; }

@media (max-width: 1024px) {
	.stkg-tablet-1 { --stkg-cols: 1; }
	.stkg-tablet-2 { --stkg-cols: 2; }
	.stkg-tablet-3 { --stkg-cols: 3; }
}

@media (max-width: 767px) {
	.stkg-mobile-1 { --stkg-cols: 1; }
	.stkg-mobile-2 { --stkg-cols: 2; }
}

/* ═══════════════════════════════════════════
   BASE — Item & Image
═══════════════════════════════════════════ */

.stkg-item {
	position: relative;
	overflow: hidden;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.stkg-img-wrap {
	display: block;
	position: relative;
	overflow: hidden;
	width: 100%;
}

/* Aspect ratio variants */
.stkg-img-wrap.ratio-1-1  { aspect-ratio: 1 / 1; }
.stkg-img-wrap.ratio-4-3  { aspect-ratio: 4 / 3; }
.stkg-img-wrap.ratio-16-9 { aspect-ratio: 16 / 9; }
.stkg-img-wrap.ratio-3-2  { aspect-ratio: 3 / 2; }
.stkg-img-wrap.ratio-3-4  { aspect-ratio: 3 / 4; }
.stkg-img-wrap.ratio-free { aspect-ratio: auto; }

.stkg-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.35s ease, filter 0.35s ease;
}
.stkg-img-wrap.ratio-free .stkg-img {
	height: auto;
}

.stkg-overlay {
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,0);
	transition: background 0.3s ease;
	pointer-events: none;
}

/* ═══════════════════════════════════════════
   BASE — Caption & Badge
═══════════════════════════════════════════ */

.stkg-caption {
	padding: 10px 12px;
}

.stkg-caption-title {
	font-size: 14px;
	font-weight: 700;
	color: #222;
	margin: 0 0 4px;
	line-height: 1.3;
}

.stkg-caption-desc {
	font-size: 13px;
	color: #666;
	margin: 0;
	line-height: 1.4;
}

.stkg-badge {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 3;
	font-size: 0.68rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	padding: 3px 10px;
	border-radius: 20px;
	background: #4f46e5;
	color: #fff;
	pointer-events: none;
}

/* ═══════════════════════════════════════════
   STYLE 01 — Grid (base, no extras)
═══════════════════════════════════════════ */

.stkg-grid .stkg-caption-title { color: #222; }
.stkg-grid .stkg-caption-desc  { color: #666; }

/* ═══════════════════════════════════════════
   STYLE 02 — Masonry (CSS columns)
═══════════════════════════════════════════ */

/* Masonry used CSS `columns`, which fills each column top to bottom. The
   displayed sequence therefore never matched the order set in the repeater —
   with 3 columns, item 2 appeared below item 1 rather than beside it. It is now
   a row-major grid whose tiles alternate height, so the order on screen is the
   order the author set while the stagger is preserved. */
.stkg-masonry {
	display: grid;
	grid-template-columns: repeat(var(--stkg-cols), 1fr);
	grid-auto-rows: 12px;
	gap: 16px;
}
.stkg-masonry-cols-1 { --stkg-cols: 1; }
.stkg-masonry-cols-2 { --stkg-cols: 2; }
.stkg-masonry-cols-3 { --stkg-cols: 3; }
.stkg-masonry-cols-4 { --stkg-cols: 4; }
.stkg-masonry-cols-5 { --stkg-cols: 5; }

/* Row height and gap compound across a span, so these numbers stay small:
   span 10 is 10 rows of 12px plus 9 gaps of 16px. */
.stkg-masonry .stkg-item {
	grid-row: span 10;
	width: 100%;
	display: flex;
	flex-direction: column;
}
.stkg-masonry .stkg-item:nth-child(3n + 1) { grid-row: span 13; }
.stkg-masonry .stkg-item:nth-child(4n + 3) { grid-row: span 8; }
.stkg-masonry .stkg-img-wrap {
	aspect-ratio: auto;
	flex: 1 1 auto;
	min-height: 0;
}
.stkg-masonry .stkg-img {
	height: 100%;
	object-fit: cover;
}

/* ═══════════════════════════════════════════
   STYLE 03 — Caption Overlay (hover)
═══════════════════════════════════════════ */

.stkg-caption-overlay .stkg-img-wrap {
	overflow: hidden;
}
.stkg-caption-overlay .stkg-caption {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 20px 16px 16px;
	background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 100%);
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 0.3s ease, transform 0.3s ease;
}
.stkg-caption-overlay .stkg-caption-title,
.stkg-caption-overlay .stkg-caption-desc {
	color: #fff;
}
.stkg-caption-overlay .stkg-item:hover .stkg-caption {
	opacity: 1;
	transform: translateY(0);
}
.stkg-caption-overlay .stkg-item:hover .stkg-overlay {
	background: rgba(0,0,0,0.25);
}

/* ═══════════════════════════════════════════
   STYLE 04 — Split Card
   Was a hover fade that differed from Style 03 only by its transition. The
   item is now a two-column card: picture on the left, caption block on the
   right, so the caption is readable without hovering (and on a phone).
═══════════════════════════════════════════ */

.stkg-caption-fade .stkg-item {
	display: grid;
	grid-template-columns: 40% 1fr;
	align-items: stretch;
	background: #fff;
	border: 1px solid #e6e7ef;
	border-radius: 12px;
	overflow: hidden;
}
.stkg-caption-fade .stkg-img-wrap {
	height: 100%;
	aspect-ratio: auto !important;
	min-height: 130px;
}
.stkg-caption-fade .stkg-img {
	height: 100%;
	object-fit: cover;
}
.stkg-caption-fade .stkg-caption {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 16px 18px;
}
.stkg-caption-fade .stkg-caption-title {
	font-size: 15px;
	margin-bottom: 6px;
}
.stkg-caption-fade .stkg-badge {
	top: auto;
	bottom: 10px;
	left: 10px;
}
.stkg-caption-fade .stkg-item:hover {
	border-color: #c2c5da;
}

/* ═══════════════════════════════════════════
   STYLE 05 — Corner Label
   Was a hover zoom on the same overlay as Style 03. The caption is now a
   permanent solid label that sits over the bottom-left corner of the picture
   and stops short of its right edge, so the image is never fully covered.
═══════════════════════════════════════════ */

.stkg-caption-zoom .stkg-img-wrap {
	overflow: hidden;
}
.stkg-caption-zoom .stkg-item {
	border-radius: 12px;
	overflow: hidden;
}
.stkg-caption-zoom .stkg-caption {
	position: absolute;
	left: 0;
	bottom: 0;
	max-width: 78%;
	padding: 12px 18px 12px 14px;
	background: #ffffff;
	border-radius: 0 12px 0 0;
	box-shadow: 0 1px 2px rgba(16,24,40,.06), 0 8px 24px -8px rgba(16,24,40,.12);
	transition: max-width 0.3s ease;
}
.stkg-caption-zoom .stkg-caption-title {
	color: #1c1c28;
}
.stkg-caption-zoom .stkg-caption-desc {
	color: #64647a;
}
.stkg-caption-zoom .stkg-badge {
	left: auto;
	right: 10px;
}
.stkg-caption-zoom .stkg-item:hover .stkg-caption {
	max-width: 100%;
}
.stkg-caption-zoom .stkg-item:hover .stkg-img {
	transform: scale(1.04);
}

/* ═══════════════════════════════════════════
   STYLE 06 — Framed Plate
   Was a hover blur over the same overlay. The picture now sits inset inside a
   generous mat with the caption engraved underneath, the way a print is
   mounted — the caption is always readable.
═══════════════════════════════════════════ */

.stkg-caption-blur .stkg-item {
	background: #fbfbfd;
	border: 1px solid #e4e5ee;
	border-radius: 4px;
	padding: 14px 14px 0;
}
.stkg-caption-blur .stkg-img-wrap {
	overflow: hidden;
	box-shadow: inset 0 0 0 1px rgba(16,24,40,.10);
}
.stkg-caption-blur .stkg-caption {
	padding: 14px 2px 16px;
	text-align: center;
	border-top: 1px solid #e9eaf2;
	margin-top: 14px;
}
.stkg-caption-blur .stkg-caption-title {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #2a2a38;
}
.stkg-caption-blur .stkg-caption-desc {
	font-size: 12px;
	font-style: italic;
	color: #7c7c8f;
}
.stkg-caption-blur .stkg-badge {
	top: 22px;
	left: 22px;
}
.stkg-caption-blur .stkg-item:hover .stkg-img {
	transform: scale(1.03);
}

/* ═══════════════════════════════════════════
   STYLE 07 — Editorial Rows
   Was a third hover-caption transition. Each picture now runs as an editorial
   row with its caption set beside it, and the sides alternate down the page.
═══════════════════════════════════════════ */

.stkg-caption-slide {
	grid-template-columns: 1fr;
	gap: 0;
}
.stkg-caption-slide .stkg-item {
	display: flex;
	align-items: center;
	gap: 28px;
	padding: 22px 0;
	border-bottom: 1px solid var(--stkg-line);
	overflow: visible;
}
.stkg-caption-slide .stkg-item:nth-child(even) {
	flex-direction: row-reverse;
}
.stkg-caption-slide .stkg-img-wrap {
	flex: 0 0 44%;
	border-radius: 12px;
	overflow: hidden;
}
.stkg-caption-slide .stkg-caption {
	flex: 1 1 auto;
	padding: 0;
}
.stkg-caption-slide .stkg-caption-title {
	font-size: 20px;
	line-height: 1.3;
	margin-bottom: 8px;
}
.stkg-caption-slide .stkg-caption-desc {
	font-size: 15px;
	line-height: 1.65;
	max-width: 46ch;
}
.stkg-caption-slide .stkg-badge {
	top: 36px;
	left: 14px;
}
.stkg-caption-slide .stkg-item:nth-child(even) .stkg-badge {
	left: auto;
	right: 14px;
}
.stkg-caption-slide .stkg-item:hover .stkg-img {
	transform: scale(1.03);
}

/* ═══════════════════════════════════════════
   STYLE 08 — Polaroid
═══════════════════════════════════════════ */

.stkg-polaroid .stkg-item {
	background: #fff;
	padding: 10px 10px 30px;
	box-shadow: 0 4px 16px rgba(0,0,0,0.15);
	transform: rotate(-1.5deg);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.stkg-polaroid .stkg-item:nth-child(even) {
	transform: rotate(1.2deg);
}
.stkg-polaroid .stkg-item:hover {
	transform: rotate(0deg) scale(1.03);
	box-shadow: 0 8px 28px rgba(0,0,0,0.22);
	z-index: 2;
}
.stkg-polaroid .stkg-img-wrap {
	aspect-ratio: 1 / 1;
}
.stkg-polaroid .stkg-caption {
	padding: 8px 4px 0;
	text-align: center;
}
.stkg-polaroid .stkg-caption-title {
	font-size: 13px;
	font-family: Georgia, serif;
	color: #444;
}
.stkg-polaroid .stkg-caption-desc {
	font-size: 11px;
	color: #888;
}

/* ═══════════════════════════════════════════
   STYLE 09 — Justified Rows
   Was one more caption-under-picture card. The pictures now set themselves
   into justified rows of uneven widths and a common height, as a print
   picture desk would lay them out.
═══════════════════════════════════════════ */

.stkg-rounded {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.stkg-rounded .stkg-item {
	flex: 1 1 200px;
	display: flex;
	flex-direction: column;
	border-radius: 10px;
	overflow: hidden;
	background: #fff;
}
.stkg-rounded .stkg-item:nth-child(3n+1) { flex-grow: 2.2; }
.stkg-rounded .stkg-item:nth-child(4n+3) { flex-grow: 1.6; }
.stkg-rounded .stkg-img-wrap {
	flex: 1 1 auto;
	min-height: 190px;
	aspect-ratio: auto;
}
.stkg-rounded .stkg-img {
	height: 100%;
}
.stkg-rounded .stkg-caption {
	padding: 10px 2px 2px;
}
.stkg-rounded .stkg-item:hover .stkg-img {
	transform: scale(1.04);
}

/* ═══════════════════════════════════════════
   STYLE 10 — Circle
═══════════════════════════════════════════ */

.stkg-circle .stkg-item {
	text-align: center;
}
.stkg-circle .stkg-img-wrap {
	width: 80%;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	margin: 0 auto;
	overflow: hidden;
}
.stkg-circle .stkg-badge {
	left: 50%;
	transform: translateX(-50%);
	top: 4px;
}
.stkg-circle .stkg-caption {
	padding: 10px 8px 4px;
	text-align: center;
}
.stkg-circle .stkg-item:hover .stkg-img-wrap {
	box-shadow: 0 0 0 4px #4f46e5;
}

/* ═══════════════════════════════════════════
   STYLE 11 — Overlap Caption
   Was a border on the same card. The caption now sits in its own panel that
   overlaps the foot of the picture, inset from both edges.
═══════════════════════════════════════════ */

.stkg-bordered {
	gap: 24px 16px;
}
.stkg-bordered .stkg-item {
	overflow: visible;
	padding-bottom: 26px;
}
.stkg-bordered .stkg-img-wrap {
	border-radius: 12px;
	overflow: hidden;
}
.stkg-bordered .stkg-caption {
	position: relative;
	z-index: 2;
	width: calc(100% - 32px);
	margin: -34px auto 0;
	padding: 14px 16px;
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 1px 2px rgba(16,24,40,.06), 0 8px 24px -8px rgba(16,24,40,.18);
}
.stkg-bordered .stkg-item:hover .stkg-img {
	transform: scale(1.04);
}

/* ═══════════════════════════════════════════
   STYLE 12 — Index List
   Was a shadow depth on the same card. The gallery now reads as a numbered
   index: a thumbnail on the left, the entry text beside it, one to a line.
═══════════════════════════════════════════ */

.stkg-shadow-lift {
	grid-template-columns: 1fr;
	gap: 0;
	counter-reset: stkg-index;
}
.stkg-shadow-lift .stkg-item {
	counter-increment: stkg-index;
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 16px 0 16px 52px;
	border-bottom: 1px solid var(--stkg-line);
	overflow: visible;
}
.stkg-shadow-lift .stkg-item::before {
	content: counter(stkg-index, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: #98a2b3;
}
.stkg-shadow-lift .stkg-img-wrap {
	flex: 0 0 116px;
	aspect-ratio: 1 / 1;
	border-radius: 8px;
	overflow: hidden;
}
.stkg-shadow-lift .stkg-caption {
	flex: 1 1 auto;
	padding: 0;
}
.stkg-shadow-lift .stkg-caption-title {
	font-size: 16px;
}
.stkg-shadow-lift .stkg-badge {
	position: static;
	display: inline-block;
	order: 3;
	margin-left: auto;
	flex: 0 0 auto;
}
.stkg-shadow-lift .stkg-item:hover .stkg-caption-title {
	color: var(--stkg-accent);
}

/* ═══════════════════════════════════════════
   STYLE 13 — Offset Columns
   Was the same card with its chrome removed. Alternate columns now drop by
   half a frame, so the wall reads as two interleaved runs of pictures.
═══════════════════════════════════════════ */

.stkg-minimal {
	gap: 20px;
	align-items: start;
}
.stkg-minimal .stkg-item:nth-child(even) {
	margin-top: 44px;
}
.stkg-minimal .stkg-img-wrap {
	border-radius: 4px;
	overflow: hidden;
}
.stkg-minimal .stkg-caption {
	padding: 12px 2px 0;
	border-top: 1px solid var(--stkg-line);
	margin-top: 12px;
}
.stkg-minimal .stkg-caption-title {
	font-size: 15px;
}
.stkg-minimal .stkg-item:hover .stkg-img {
	transform: scale(1.04);
}

/* ═══════════════════════════════════════════
   STYLE 14 — Dark Card
═══════════════════════════════════════════ */

.stkg-dark .stkg-item {
	background: #1a1a1a;
}
.stkg-dark .stkg-caption {
	background: #1a1a1a;
	padding: 12px;
}
.stkg-dark .stkg-caption-title {
	color: #f0f0f0;
}
.stkg-dark .stkg-caption-desc {
	color: #999;
}
.stkg-dark .stkg-item:hover .stkg-img {
	transform: scale(1.04);
}

/* ═══════════════════════════════════════════
   STYLE 15 — Neon Glow
═══════════════════════════════════════════ */

.stkg-neon {
	background: #0a0a0a;
	padding: 16px;
}
.stkg-neon .stkg-item {
	border: 1px solid rgba(108,99,255,0.25);
	background: #111;
	transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.stkg-neon .stkg-item:hover {
	border-color: #6c63ff;
	box-shadow: 0 0 18px rgba(108,99,255,0.5), inset 0 0 18px rgba(108,99,255,0.08);
}
.stkg-neon .stkg-caption {
	background: #111;
	padding: 10px 12px;
}
.stkg-neon .stkg-caption-title {
	color: #e0e0e0;
}
.stkg-neon .stkg-caption-desc {
	color: rgba(255,255,255,0.5);
}
.stkg-neon .stkg-item:hover .stkg-img {
	filter: brightness(1.1);
}

/* ═══════════════════════════════════════════
   STYLE 16 — Paired Frames
   Was a fourth hover-caption transition. The pictures now sit in butted pairs
   divided by a hairline, the way a before-and-after spread is set.
═══════════════════════════════════════════ */

.stkg-glass {
	grid-template-columns: repeat(2, 1fr);
	column-gap: 0;
	row-gap: 28px;
}
.stkg-glass .stkg-item {
	background: #fff;
}
.stkg-glass .stkg-item:nth-child(odd) {
	border-right: 1px solid var(--stkg-line);
}
.stkg-glass .stkg-img-wrap {
	aspect-ratio: 4 / 3;
}
.stkg-glass .stkg-item:nth-child(odd) .stkg-img-wrap {
	border-radius: 10px 0 0 10px;
	overflow: hidden;
}
.stkg-glass .stkg-item:nth-child(even) .stkg-img-wrap {
	border-radius: 0 10px 10px 0;
	overflow: hidden;
}
.stkg-glass .stkg-caption {
	padding: 12px 14px;
}
.stkg-glass .stkg-item:nth-child(even) .stkg-caption {
	text-align: right;
}
.stkg-glass .stkg-item:hover .stkg-img {
	transform: scale(1.03);
}

/* ═══════════════════════════════════════════
   STYLE 17 — Gradient Overlay
═══════════════════════════════════════════ */

.stkg-gradient .stkg-img-wrap {
	overflow: hidden;
}
.stkg-gradient .stkg-caption {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 40px 16px 16px;
	background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, transparent 100%);
	transition: padding 0.3s ease;
}
/* The badge and the caption title were both anchored to the top of the tile
   and overlapped. The caption is bottom-anchored here, so only the badge needs
   moving out of the way of the corner it shares with nothing else. */
.stkg-gradient .stkg-badge {
	top: 12px;
	left: 12px;
	bottom: auto;
	right: auto;
	z-index: 3;
}
.stkg-gradient .stkg-caption-title {
	margin-top: 0;
}
.stkg-gradient .stkg-caption-title,
.stkg-gradient .stkg-caption-desc {
	color: #fff;
}
.stkg-gradient .stkg-item:hover .stkg-caption {
	padding-bottom: 20px;
}
.stkg-gradient .stkg-item:hover .stkg-img {
	transform: scale(1.04);
}

/* ═══════════════════════════════════════════
   STYLE 18 — Magazine
═══════════════════════════════════════════ */

.stkg-magazine .stkg-item {
	border-left: 4px solid #4f46e5;
	background: #fff;
	box-shadow: 0 2px 8px rgba(0,0,0,0.06);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.stkg-magazine .stkg-item:hover {
	border-color: #3730a3;
	box-shadow: 0 6px 20px rgba(0,0,0,0.12);
}
.stkg-magazine .stkg-caption {
	padding: 12px 14px;
}
.stkg-magazine .stkg-caption-title {
	color: #111;
}
.stkg-magazine .stkg-caption-desc {
	color: #666;
}

/* ═══════════════════════════════════════════
   STYLE 19 — Metro Mosaic
   First item spans 2 columns + 2 rows
═══════════════════════════════════════════ */

.stkg-metro .stkg-item:first-child {
	grid-column: span 2;
	grid-row: span 2;
}
.stkg-metro .stkg-item {
	overflow: hidden;
}
.stkg-metro .stkg-img-wrap {
	height: 100%;
	min-height: 140px;
}
.stkg-metro .stkg-img {
	height: 100%;
}
.stkg-metro .stkg-caption {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 14px;
	background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
}
.stkg-metro .stkg-caption-title,
.stkg-metro .stkg-caption-desc {
	color: #fff;
}
.stkg-metro .stkg-item:hover .stkg-img {
	transform: scale(1.05);
}

/* ═══════════════════════════════════════════
   STYLE 20 — Rhythm Mosaic
   Was a hover tilt on the plain grid. Every third frame now runs at double
   width, so the wall keeps a repeating wide-narrow beat rather than a
   single feature tile.
═══════════════════════════════════════════ */

.stkg-tilt {
	gap: 12px;
	grid-auto-flow: dense;
}
.stkg-tilt .stkg-item {
	border-radius: 10px;
	overflow: hidden;
	background: #fff;
}
.stkg-tilt .stkg-item:nth-child(3n+1) {
	grid-column: span 2;
}
.stkg-tilt .stkg-item:nth-child(3n+1) .stkg-img-wrap {
	aspect-ratio: 16 / 9;
}
.stkg-tilt .stkg-caption {
	padding: 12px 14px 14px;
}
.stkg-tilt .stkg-item:hover .stkg-img {
	transform: scale(1.04);
}

/* ═══════════════════════════════════════════
   STYLE 21 — Retro
═══════════════════════════════════════════ */

.stkg-retro .stkg-item {
	background: #fff;
	border: 2px solid #222;
	box-shadow: 5px 5px 0 #222;
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.stkg-retro .stkg-item:hover {
	box-shadow: 3px 3px 0 #222;
	transform: translate(2px, 2px);
}
.stkg-retro .stkg-caption {
	padding: 10px 12px;
	border-top: 2px solid #222;
}
.stkg-retro .stkg-caption-title {
	font-family: monospace;
	color: #111;
	font-weight: 700;
}

/* ═══════════════════════════════════════════
   STYLE 22 — Spotlight (dark bg, radial on hover)
═══════════════════════════════════════════ */

.stkg-spotlight {
	background: #111;
	padding: 16px;
}
.stkg-spotlight .stkg-img-wrap {
	overflow: hidden;
}
/* The resting state used to sit under a flat 50% black scrim, which read as a
   broken gallery rather than a dramatic one. The rest state is now a gentle
   vignette and the hover deepens it. */
.stkg-spotlight .stkg-overlay {
	background: radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(0,0,0,0.45) 100%);
	transition: background 0.3s ease;
}
.stkg-spotlight .stkg-item:hover .stkg-overlay,
.stkg-spotlight .stkg-item:focus-within .stkg-overlay {
	background: radial-gradient(ellipse at 50% 45%, transparent 30%, rgba(0,0,0,0.72) 100%);
}
.stkg-spotlight .stkg-item:hover .stkg-img {
	transform: scale(1.06);
}
.stkg-spotlight .stkg-caption {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 14px;
	opacity: 0;
	transform: translateY(6px);
	transition: opacity 0.3s ease, transform 0.3s ease;
}
.stkg-spotlight .stkg-caption-title,
.stkg-spotlight .stkg-caption-desc {
	color: #fff;
}
.stkg-spotlight .stkg-item:hover .stkg-caption {
	opacity: 1;
	transform: translateY(0);
}

/* ═══════════════════════════════════════════
   STYLE 23 — Card (raised, caption below)
═══════════════════════════════════════════ */

.stkg-card .stkg-item {
	background: #fff;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 2px 10px rgba(0,0,0,0.08);
	transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.stkg-card .stkg-item:hover {
	box-shadow: 0 8px 28px rgba(0,0,0,0.15);
	transform: translateY(-4px);
}
.stkg-card .stkg-img-wrap {
	border-radius: 10px 10px 0 0;
	overflow: hidden;
}
.stkg-card .stkg-caption {
	padding: 14px 16px 16px;
}
.stkg-card .stkg-caption-title {
	color: #111;
	font-size: 14px;
}
.stkg-card .stkg-caption-desc {
	color: #666;
	font-size: 13px;
}
.stkg-card .stkg-item:hover .stkg-img {
	transform: scale(1.04);
}

/* ═══════════════════════════════════════════
   STYLE 24 — Mosaic First (first = 2-col span)
═══════════════════════════════════════════ */

.stkg-mosaic-first .stkg-item:first-child {
	grid-column: span 2;
}
.stkg-mosaic-first .stkg-item:hover .stkg-img {
	transform: scale(1.04);
}
.stkg-mosaic-first .stkg-caption {
	padding: 10px 12px;
}

/* ═══════════════════════════════════════════
   STYLE 25 — Filmstrip (horizontal scroll)
═══════════════════════════════════════════ */

.stkg-filmstrip {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	overflow-x: auto;
	gap: 10px;
	scrollbar-width: thin;
	scrollbar-color: #ccc transparent;
	padding-bottom: 8px;
}
.stkg-filmstrip::-webkit-scrollbar { height: 6px; }
.stkg-filmstrip::-webkit-scrollbar-track { background: transparent; }
.stkg-filmstrip::-webkit-scrollbar-thumb { background: #ccc; border-radius: 3px; }
.stkg-filmstrip .stkg-item {
	flex: 0 0 220px;
}
.stkg-filmstrip .stkg-img-wrap {
	width: 220px;
	height: 150px;
	aspect-ratio: auto;
}
.stkg-filmstrip .stkg-img {
	height: 150px;
}
.stkg-filmstrip .stkg-item:hover .stkg-img {
	transform: scale(1.05);
}
.stkg-filmstrip .stkg-caption {
	padding: 8px 6px;
}
.stkg-filmstrip .stkg-caption-title {
	font-size: 12px;
}

/* ═══════════════════════════════════════════
   STYLE 26 — Stack Rotation
═══════════════════════════════════════════ */

.stkg-stack-rotate .stkg-item {
	background: #fff;
	box-shadow: 0 4px 16px rgba(0,0,0,0.12);
	padding: 8px;
	transform: rotate(0deg);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.stkg-stack-rotate .stkg-item:nth-child(3n+1) { transform: rotate(-2deg); }
.stkg-stack-rotate .stkg-item:nth-child(3n+2) { transform: rotate(1.5deg); }
.stkg-stack-rotate .stkg-item:nth-child(3n+3) { transform: rotate(-1deg); }
.stkg-stack-rotate .stkg-item:hover {
	transform: rotate(0deg) scale(1.04) !important;
	box-shadow: 0 10px 30px rgba(0,0,0,0.2);
	z-index: 2;
}
.stkg-stack-rotate .stkg-img-wrap {
	aspect-ratio: 1 / 1;
}
.stkg-stack-rotate .stkg-caption {
	padding: 8px 4px 0;
	text-align: center;
}
.stkg-stack-rotate .stkg-caption-title {
	font-size: 12px;
	color: #444;
}

/* ═══════════════════════════════════════════
   STYLE 27 — Neumorphic
═══════════════════════════════════════════ */

.stkg-neumorphic {
	background: #e8e8e8;
	padding: 24px;
	border-radius: 16px;
}
.stkg-neumorphic .stkg-item {
	background: #e8e8e8;
	border-radius: 12px;
	box-shadow: 6px 6px 12px #c5c5c5, -6px -6px 12px #ffffff;
	overflow: visible;
	padding: 10px;
	transition: box-shadow 0.25s ease;
}
.stkg-neumorphic .stkg-item:hover {
	box-shadow: inset 4px 4px 8px #c5c5c5, inset -4px -4px 8px #ffffff;
}
.stkg-neumorphic .stkg-img-wrap {
	border-radius: 8px;
	overflow: hidden;
}
.stkg-neumorphic .stkg-caption {
	padding: 10px 4px 4px;
}
.stkg-neumorphic .stkg-caption-title { color: #555; }
.stkg-neumorphic .stkg-caption-desc  { color: #888; }

/* ═══════════════════════════════════════════
   STYLE 28 — Wide Strips
   Was a frosted panel that rendered as the plain grid. Each picture now runs
   full width as a wide strip with its title and note set in two columns
   underneath.
═══════════════════════════════════════════ */

.stkg-frosted {
	grid-template-columns: 1fr;
	gap: 34px;
}
.stkg-frosted .stkg-item {
	overflow: visible;
}
.stkg-frosted .stkg-img-wrap {
	aspect-ratio: 21 / 9;
	border-radius: 14px;
	overflow: hidden;
}
.stkg-frosted .stkg-caption {
	display: flex;
	align-items: baseline;
	gap: 28px;
	padding: 14px 2px 0;
	border-top: 1px solid var(--stkg-line);
	margin-top: 14px;
}
.stkg-frosted .stkg-caption-title {
	flex: 0 0 34%;
	font-size: 18px;
	margin: 0;
}
.stkg-frosted .stkg-caption-desc {
	flex: 1 1 auto;
	font-size: 15px;
	line-height: 1.65;
}
.stkg-frosted .stkg-item:hover .stkg-img {
	transform: scale(1.02);
}

/* ═══════════════════════════════════════════
   STYLE 29 — Contact Sheet
   Was "Portrait", which only forced a 3:4 aspect ratio — already exposed as
   the Aspect Ratio control. It is now a dense contact sheet: many small square
   frames on a dark board with hairline gutters and a numbered corner.
═══════════════════════════════════════════ */

.stkg-portrait {
	background: #17171f;
	padding: 14px;
	border-radius: 10px;
	gap: 6px;
	counter-reset: stkg-sheet;
}
.stkg-portrait .stkg-item {
	counter-increment: stkg-sheet;
	background: #17171f;
	outline: 1px solid rgba(255,255,255,0.10);
}
.stkg-portrait .stkg-img-wrap {
	aspect-ratio: 1 / 1 !important;
}
.stkg-portrait .stkg-item::after {
	content: counter(stkg-sheet, decimal-leading-zero);
	position: absolute;
	right: 6px;
	bottom: 4px;
	z-index: 3;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 10px;
	letter-spacing: 0.06em;
	color: rgba(255,255,255,0.75);
	text-shadow: 0 1px 2px rgba(0,0,0,.7);
}
.stkg-portrait .stkg-caption {
	padding: 6px 8px 8px;
}
.stkg-portrait .stkg-caption-title {
	font-size: 11px;
	font-weight: 600;
	color: rgba(255,255,255,0.82);
	margin: 0;
}
.stkg-portrait .stkg-caption-desc {
	display: none;
}
.stkg-portrait .stkg-item:hover .stkg-img {
	filter: brightness(1.12);
}

/* ═══════════════════════════════════════════
   STYLE 30 — Editorial Pair
   Was "Landscape", which only forced 16:9 — already the Aspect Ratio control.
   Items now alternate between a wide lead frame and a narrow one, so the grid
   reads as a laid-out spread rather than a uniform wall.
═══════════════════════════════════════════ */

.stkg-landscape {
	grid-auto-flow: dense;
	gap: 20px;
}
.stkg-landscape .stkg-item {
	background: #fff;
}
.stkg-landscape .stkg-item:nth-child(3n + 1) {
	grid-column: span 2;
}
.stkg-landscape .stkg-item:nth-child(3n + 1) .stkg-img-wrap {
	aspect-ratio: 16 / 9 !important;
}
.stkg-landscape .stkg-item .stkg-img-wrap {
	aspect-ratio: 3 / 4 !important;
}
.stkg-landscape .stkg-caption {
	padding: 12px 2px 0;
	border-top: 2px solid #17171f;
	margin-top: 12px;
}
.stkg-landscape .stkg-caption-title {
	font-size: 15px;
	letter-spacing: -0.01em;
}
.stkg-landscape .stkg-item:nth-child(3n + 1) .stkg-caption-title {
	font-size: 19px;
}
.stkg-landscape .stkg-item:hover .stkg-img {
	transform: scale(1.03);
}
@media (max-width: 767px) {
	.stkg-landscape .stkg-item:nth-child(3n + 1) {
		grid-column: span 1;
	}
}

/* ═══════════════════════════════════════════
   STYLE 31 — Overlap Duo
   Was "Square", which only forced 1:1 — already the Aspect Ratio control. Each
   pair of frames now overlaps, the second lifted and inset over the first, so
   the grid has depth instead of being a flat lattice.
═══════════════════════════════════════════ */

.stkg-square {
	gap: 34px 26px;
}
.stkg-square .stkg-item {
	overflow: visible;
	border-radius: 12px;
}
.stkg-square .stkg-img-wrap {
	border-radius: 12px;
	aspect-ratio: 4 / 5 !important;
	box-shadow: 0 1px 2px rgba(16,24,40,.06), 0 8px 24px -8px rgba(16,24,40,.12);
}
.stkg-square .stkg-item:nth-child(even) {
	margin-top: 34px;
}
.stkg-square .stkg-item:nth-child(even) .stkg-img-wrap {
	margin-left: -26px;
	box-shadow: 0 2px 4px rgba(16,24,40,.10), 0 18px 40px -12px rgba(16,24,40,.22);
}
.stkg-square .stkg-caption {
	padding: 10px 2px 0;
}
.stkg-square .stkg-item:hover .stkg-img-wrap {
	transform: translateY(-4px);
	transition: transform 0.25s ease;
}
@media (max-width: 767px) {
	.stkg-square .stkg-item:nth-child(even) {
		margin-top: 0;
	}
	.stkg-square .stkg-item:nth-child(even) .stkg-img-wrap {
		margin-left: 0;
	}
}

/* ═══════════════════════════════════════════
   STYLE 32 — No Gap
═══════════════════════════════════════════ */

.stkg-no-gap {
	gap: 0 !important;
}
.stkg-no-gap .stkg-item {
	border: none;
}
.stkg-no-gap .stkg-item:hover .stkg-img {
	transform: scale(1.06);
}
.stkg-no-gap .stkg-item:hover .stkg-overlay {
	background: rgba(0,0,0,0.2);
}

/* ═══════════════════════════════════════════
   STYLE 33 — Numbered Plates
   Was one more outlined card. Each frame now carries its plate number in the
   corner and its caption on a ruled line beneath, as a catalogue would.
═══════════════════════════════════════════ */

.stkg-outlined {
	gap: 22px 18px;
	counter-reset: stkg-plate;
}
.stkg-outlined .stkg-item {
	counter-increment: stkg-plate;
	overflow: visible;
}
.stkg-outlined .stkg-img-wrap {
	border-radius: 2px;
	overflow: hidden;
}
.stkg-outlined .stkg-item::after {
	content: 'Plate ' counter(stkg-plate, decimal-leading-zero);
	position: absolute;
	right: 0;
	bottom: 0;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #98a2b3;
}
.stkg-outlined .stkg-caption {
	padding: 10px 62px 0 0;
	border-top: 2px solid #101828;
	margin-top: 10px;
}
.stkg-outlined .stkg-caption-title {
	font-size: 15px;
}
.stkg-outlined .stkg-item:hover .stkg-img {
	transform: scale(1.04);
}

/* ═══════════════════════════════════════════
   STYLE 34 — Caption Left
═══════════════════════════════════════════ */

.stkg-caption-left .stkg-img-wrap {
	overflow: hidden;
}
.stkg-caption-left .stkg-caption {
	position: absolute;
	top: 0;
	left: -100%;
	bottom: 0;
	width: 55%;
	padding: 20px 16px;
	background: rgba(20,20,30,0.88);
	display: flex;
	flex-direction: column;
	justify-content: center;
	transition: left 0.35s ease;
}
.stkg-caption-left .stkg-caption-title,
.stkg-caption-left .stkg-caption-desc {
	color: #fff;
}
.stkg-caption-left .stkg-item:hover .stkg-caption {
	left: 0;
}
.stkg-caption-left .stkg-item:hover .stkg-img {
	transform: scale(1.06) translateX(8px);
}

/* ═══════════════════════════════════════════
   STYLE 35 — Bold Frame
═══════════════════════════════════════════ */

.stkg-bold-frame .stkg-item {
	background: #fff;
	border: 4px solid #222;
	box-shadow: 6px 6px 0 #222;
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.stkg-bold-frame .stkg-item:hover {
	box-shadow: 4px 4px 0 #4f46e5;
	border-color: #4f46e5;
}
.stkg-bold-frame .stkg-caption {
	padding: 10px 12px;
	border-top: 3px solid #222;
}
.stkg-bold-frame .stkg-caption-title {
	font-weight: 900;
	font-size: 14px;
	color: #111;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}
.stkg-bold-frame .stkg-caption-desc {
	color: #555;
}

/* ═══════════════════════════════════════════
   STYLE 36 — Skew Card
═══════════════════════════════════════════ */

.stkg-skew .stkg-item {
	transform: skewY(-3deg);
	background: #0b0f19;
	border-radius: 10px;
}
.stkg-skew .stkg-img-wrap { border-radius: 10px; }
.stkg-skew .stkg-item::before {
	content: '';
	position: absolute;
	inset: -20px -20px -10px -20px;
	background: linear-gradient(135deg, rgba(79,70,229,.35), rgba(236,72,153,.25));
	filter: blur(22px);
	z-index: 0;
}
.stkg-skew .stkg-item:hover { transform: skewY(-3deg) translateY(-4px); }
.stkg-skew .stkg-overlay { background: linear-gradient(to top, rgba(0,0,0,.45), rgba(0,0,0,0)); }
.stkg-skew .stkg-caption { position: relative; z-index: 1; color: #e5e7eb; }
.stkg-skew .stkg-caption-title { color: #fff; }
.stkg-skew .stkg-caption-desc { color: #cbd5e1; }

/* ═══════════════════════════════════════════
   STYLE 37 — Soft Glow
═══════════════════════════════════════════ */

.stkg-soft-glow .stkg-item {
	background: #0a0a0a;
	border-radius: 14px;
	box-shadow: 0 0 0 rgba(99,102,241,0);
}
.stkg-soft-glow .stkg-img-wrap { border-radius: 14px; }
.stkg-soft-glow .stkg-item:hover {
	box-shadow: 0 0 0 2px rgba(99,102,241,.35), 0 20px 50px -20px rgba(99,102,241,.45);
}
.stkg-soft-glow .stkg-overlay { background: radial-gradient(60% 60% at 50% 40%, rgba(99,102,241,.25), rgba(0,0,0,0) 70%); }
.stkg-soft-glow .stkg-img { transform: scale(1.02); }
.stkg-soft-glow .stkg-item:hover .stkg-img { transform: scale(1.06); }
.stkg-soft-glow .stkg-caption-title { color: #f8fafc; font-weight: 800; }
.stkg-soft-glow .stkg-caption-desc { color: #cbd5e1; }

/* ═══════════════════════════════════════════
   STYLE 38 — Monochrome
═══════════════════════════════════════════ */

.stkg-mono .stkg-img { filter: grayscale(100%) contrast(1.05); }
.stkg-mono .stkg-item:hover .stkg-img { filter: grayscale(0%) contrast(1.05) saturate(1.1); transform: scale(1.04); }
.stkg-mono .stkg-caption-title { color: #111827; }
.stkg-mono .stkg-caption-desc { color: #4b5563; }

/* ═══════════════════════════════════════════
   STYLE 39 — Lead and Thumbs
   Was a hover lift on the plain grid. The first picture now leads at full
   width and the rest follow as a tight strip of thumbnails beneath it.
═══════════════════════════════════════════ */

.stkg-hover-lift {
	gap: 10px;
}
.stkg-hover-lift .stkg-item {
	border-radius: 10px;
	overflow: hidden;
	background: #fff;
}
.stkg-hover-lift .stkg-item:first-child {
	grid-column: 1 / -1;
}
.stkg-hover-lift .stkg-item:first-child .stkg-img-wrap {
	aspect-ratio: 21 / 9;
}
.stkg-hover-lift .stkg-item:first-child .stkg-caption {
	padding: 14px 4px 6px;
}
.stkg-hover-lift .stkg-item:first-child .stkg-caption-title {
	font-size: 20px;
}
.stkg-hover-lift .stkg-item:not(:first-child) .stkg-img-wrap {
	aspect-ratio: 1 / 1;
}
.stkg-hover-lift .stkg-item:not(:first-child) .stkg-caption {
	padding: 8px 4px 4px;
}
.stkg-hover-lift .stkg-item:not(:first-child) .stkg-caption-title {
	font-size: 13px;
	margin-bottom: 2px;
}
.stkg-hover-lift .stkg-item:not(:first-child) .stkg-caption-desc {
	display: none;
}
.stkg-hover-lift .stkg-item:hover .stkg-img {
	transform: scale(1.04);
}

/* ═══════════════════════════════════════════
   STYLE 40 — Film Grain
═══════════════════════════════════════════ */

.stkg-film-grain .stkg-item { position: relative; background: #111; border-radius: 8px; }
.stkg-film-grain .stkg-img-wrap { border-radius: 8px; }
.stkg-film-grain .stkg-item::after {
	content: '';
	position: absolute; inset: 0; pointer-events: none;
	background-image:
		radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
		radial-gradient(rgba(0,0,0,.05) 1px, transparent 1px);
	background-size: 3px 3px, 4px 4px; mix-blend-mode: overlay; opacity: .9;
}
.stkg-film-grain .stkg-overlay { background: linear-gradient(to bottom, rgba(0,0,0,0) 30%, rgba(0,0,0,.55)); }
.stkg-film-grain .stkg-caption-title { color: #fafafa; }
.stkg-film-grain .stkg-caption-desc { color: #e5e5e5; opacity: .85; }

/* ═══════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════ */

@media (max-width: 1024px) {
	.stkg-masonry-cols-4,
	.stkg-masonry-cols-5 { --stkg-cols: 3; }
}

@media (max-width: 767px) {
	.stkg-masonry-cols-1 { --stkg-cols: 1; }
	.stkg-masonry-cols-2 { --stkg-cols: 2; }
	.stkg-masonry-cols-3,
	.stkg-masonry-cols-4,
	.stkg-masonry-cols-5 { --stkg-cols: 2; }

	.stkg-metro .stkg-item:first-child {
		grid-column: span 1;
		grid-row: span 1;
	}

	.stkg-mosaic-first .stkg-item:first-child {
		grid-column: span 1;
	}

	.stkg-sidebar-nav {
		flex-direction: column;
	}

	.stkg-filmstrip .stkg-item {
		flex: 0 0 160px;
	}
	.stkg-filmstrip .stkg-img-wrap,
	.stkg-filmstrip .stkg-img {
		width: 160px;
		height: 110px;
	}

	.stkg-caption-left .stkg-caption {
		position: static;
		width: 100%;
		background: rgba(20,20,30,0.88);
	}
	.stkg-caption-left .stkg-item:hover .stkg-img {
		transform: none;
	}
}


/* ═══════════════════════════════════════════
   FILTER BAR
═══════════════════════════════════════════ */

.stkg-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 18px;
}
.stkg-filter {
	min-height: 40px;
	padding: 9px 18px;
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	color: #4b4b5f;
	background: #f2f3f8;
	border: 1px solid transparent;
	border-radius: 999px;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}
.stkg-filter:hover {
	background: #e6e8f2;
	color: #1d1d2b;
}
.stkg-filter.stkg-filter-active {
	background: #4f46e5;
	color: #ffffff;
}
.stkg-filter:focus-visible {
	outline: 2px solid #4f46e5;
	outline-offset: 2px;
}
.stkg-item[hidden] {
	display: none !important;
}

/* ═══════════════════════════════════════════
   LIGHTBOX BUTTON
   Shown when an item has its own link, so the item keeps both its link and
   its lightbox instead of silently losing one.
═══════════════════════════════════════════ */

.stkg-zoom {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 4;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 999px;
	background: rgba(17, 17, 24, 0.62);
	backdrop-filter: blur(4px);
	transition: background-color 0.2s ease;
}
.stkg-zoom:hover,
.stkg-zoom:focus-visible {
	background: rgba(17, 17, 24, 0.85);
}
.stkg-zoom span {
	display: block;
	width: 13px;
	height: 13px;
	border: 2px solid #fff;
	border-radius: 50%;
	position: relative;
}
.stkg-zoom span::after {
	content: '';
	position: absolute;
	right: -6px;
	bottom: -5px;
	width: 8px;
	height: 2px;
	background: #fff;
	border-radius: 2px;
	transform: rotate(45deg);
}

/* ═══════════════════════════════════════════
   TOUCH FALLBACK
   Six variants put the caption behind :hover, which a touch user can never
   trigger — on a phone those galleries shipped with no captions at all. On any
   pointer that cannot hover, the caption is simply always visible.
═══════════════════════════════════════════ */

@media (hover: none) {
	.stkg-caption-overlay .stkg-caption,
	.stkg-caption-fade .stkg-caption,
	.stkg-caption-zoom .stkg-caption,
	.stkg-caption-blur .stkg-caption,
	.stkg-glass .stkg-caption,
	.stkg-spotlight .stkg-caption {
		opacity: 1;
		transform: none;
	}
	.stkg-caption-slide .stkg-caption {
		transform: translateY(0);
	}
	/* The fade and blur variants cover the whole tile when open, so on touch
	   they anchor to the bottom instead of hiding the picture. */
	.stkg-caption-fade .stkg-caption,
	.stkg-caption-blur .stkg-caption {
		inset: auto 0 0 0;
		justify-content: flex-end;
		align-items: flex-start;
		text-align: left;
		padding: 28px 14px 14px;
		background: linear-gradient(to top, rgba(0,0,0,0.78) 0%, transparent 100%);
	}
	.stkg-caption-blur .stkg-img {
		filter: none;
	}
}

/* ═══════════════════════════════════════════
   REDUCED MOTION
═══════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
	.stkg-wrap *,
	.stkg-wrap *::before,
	.stkg-wrap *::after {
		animation: none !important;
		transition: none !important;
	}
}