.ssmo-social-feed {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(var(--ssmo-columns, 3), minmax(0, 1fr));
}

.ssmo-social-feed--row {
	grid-auto-flow: column;
	grid-auto-columns: minmax(min(70vw, 18rem), 1fr);
	grid-template-columns: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding-bottom: 0.5rem;
}

.ssmo-social-feed--row > * {
	scroll-snap-align: start;
}

.ssmo-social-feed--list {
	grid-template-columns: minmax(0, 1fr);
}

/* Narrower screens show fewer across, never more than the shortcode asked for. Two on
   phones by default, since square photos sit well in pairs; a site can set
   --ssmo-columns-phone or --ssmo-columns-tablet to change that. */
@media (max-width: 782px) {
	.ssmo-social-feed--grid {
		grid-template-columns: repeat(min(var(--ssmo-columns, 3), var(--ssmo-columns-tablet, 2)), minmax(0, 1fr));
	}
}

@media (max-width: 480px) {
	.ssmo-social-feed--grid {
		grid-template-columns: repeat(min(var(--ssmo-columns, 3), var(--ssmo-columns-phone, 2)), minmax(0, 1fr));
		gap: var(--ssmo-gap-phone, 0.625rem);
	}
}

/* Tiles. Panel styling comes from custom properties with quiet defaults; a site sets its
   own accent, border and radius once on .ssmo-social and every piece follows. */
.ssmo-social-item {
	display: flex;
	flex-direction: column;
	position: relative;
	margin: 0;
	padding: 0;
	font: inherit;
	text-align: left;
	color: inherit;
	text-decoration: none;
	cursor: pointer;
	background: var(--ssmo-panel-bg, #fff);
	border: 1px solid var(--ssmo-panel-border, #eee);
	border-radius: var(--ssmo-panel-radius, 8px);
	box-shadow: var(--ssmo-panel-shadow, 0 4px 6px rgba(0, 0, 0, 0.02));
	overflow: hidden;
	-webkit-appearance: none;
	appearance: none;
}

div.ssmo-social-item {
	cursor: default;
}

.ssmo-social-item__media {
	margin: 0;
	position: relative;
	overflow: hidden;
	aspect-ratio: 1 / 1;
	background: var(--ssmo-media-bg, rgba(0, 0, 0, 0.05));
}

.ssmo-social-item__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.35s ease;
}

.ssmo-social-item:hover .ssmo-social-item__image,
.ssmo-social-item:focus-visible .ssmo-social-item__image {
	transform: scale(1.04);
}

.ssmo-social-item:focus-visible {
	outline: 2px solid var(--ssmo-accent, currentColor);
	outline-offset: 2px;
}

.ssmo-social-item__badge {
	position: absolute;
	top: 0.6rem;
	right: 0.6rem;
	width: 1.75rem;
	height: 1.75rem;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.55);
	color: #fff;
	z-index: 2;
}

/* The hover overlay: caption, date and counts on a tinted wash. Always visible to touch
   and keyboard users, who have no hover. */
.ssmo-social-item__overlay {
	position: absolute;
	inset: 0;
	margin: 0;
	padding: var(--ssmo-overlay-padding, 0.9rem);
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 0.5rem;
	color: var(--ssmo-overlay-fg, #fff);
	background: var(--ssmo-overlay-bg, rgba(0, 0, 0, 0.6));
	opacity: 0;
	transition: opacity 0.25s ease;
	z-index: 1;
}

.ssmo-social-item:hover .ssmo-social-item__overlay,
.ssmo-social-item:focus-visible .ssmo-social-item__overlay {
	opacity: 1;
}

/* Without hover (phones and tablets, or any narrow screen) the overlay would sit over the
   photo for good and cover the artwork, so the same caption moves under the picture
   instead: the square image, then the date and counts, then two lines of caption. */
@media (hover: none), (max-width: 782px) {
	.ssmo-social-item--captions-hover .ssmo-social-item__media {
		aspect-ratio: auto;
		display: flex;
		flex-direction: column;
	}

	.ssmo-social-item--captions-hover .ssmo-social-item__image {
		aspect-ratio: 1 / 1;
		height: auto;
	}

	.ssmo-social-item--captions-hover .ssmo-social-item__overlay {
		position: static;
		opacity: 1;
		background: none;
		color: inherit;
		padding: var(--ssmo-overlay-padding-touch, 0.6rem 0.75rem 0.8rem);
		gap: 0.3rem;
		justify-content: flex-start;
	}

	.ssmo-social-item--captions-hover .ssmo-social-item__overlay-meta {
		order: -1;
		opacity: 1;
		gap: 0.6rem;
	}

	.ssmo-social-item--captions-hover .ssmo-social-item__overlay-meta time {
		color: var(--ssmo-accent, #222);
		font-weight: 700;
		font-size: 0.68rem;
		letter-spacing: 0.06em;
		text-transform: uppercase;
	}

	.ssmo-social-item--captions-hover .ssmo-social-item__count {
		opacity: 0.7;
	}

	.ssmo-social-item--captions-hover .ssmo-social-item__overlay-caption {
		-webkit-line-clamp: 2;
	}
}

.ssmo-social-item__overlay-caption {
	font-size: var(--ssmo-overlay-font-size, 0.875rem);
	line-height: 1.4;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.ssmo-social-item__overlay-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	font-size: 0.75rem;
	opacity: 0.9;
}

.ssmo-social-item__count {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
}

/* Tiles are small in pairs on a phone, so the caption keeps to a smaller size. */
@media (max-width: 480px) {
	.ssmo-social-item__overlay {
		padding: var(--ssmo-overlay-padding-phone, 0.6rem);
		gap: 0.3rem;
	}

	.ssmo-social-item__overlay-caption {
		font-size: var(--ssmo-overlay-font-size-phone, 0.8rem);
		-webkit-line-clamp: 2;
	}
}

.ssmo-social-item__body {
	padding: 0.7rem 0.8rem 0.8rem;
}

.ssmo-social-item__caption {
	margin: 0;
	font-size: 0.9rem;
	line-height: 1.45;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.ssmo-social-item__meta {
	margin: 0.35rem 0 0;
	font-size: 0.75rem;
	opacity: 0.7;
	display: flex;
	gap: 0.5rem;
}

.ssmo-social .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Header strip: the account the feed belongs to and a follow link, in the same bar style
   as the rest of the site's panels. */
.ssmo-social-header {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: 0 0 1rem;
}

.ssmo-social-header__account {
	flex: 1 1 18rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.9rem;
	padding: var(--ssmo-header-padding, 12px 15px);
	border-radius: var(--ssmo-panel-radius, 8px);
	background: var(--ssmo-accent, #222);
	color: var(--ssmo-accent-fg, #fff);
}

.ssmo-social-header__name {
	font-weight: 700;
	font-size: var(--ssmo-header-font-size, 15px);
	letter-spacing: 0.5px;
	text-transform: uppercase;
}

.ssmo-social-header__platform {
	font-size: 0.8rem;
	opacity: 0.8;
}

.ssmo-social-header__follow {
	margin-left: auto;
	font-size: var(--ssmo-pages-font-size, 14px);
	font-weight: var(--ssmo-pages-font-weight, 600);
	padding: var(--ssmo-pages-padding, 8px 12px);
	border-radius: var(--ssmo-pages-radius, 10px);
	background: var(--ssmo-accent-fg, #fff);
	color: var(--ssmo-accent, #222);
	text-decoration: none;
	white-space: nowrap;
}

.ssmo-social-header__follow:hover,
.ssmo-social-header__follow:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* Pagination. The colours, font and shape come from custom properties so a site can match
   its own buttons in a few lines of CSS without touching the plugin. The defaults inherit
   the surrounding text and stay out of the way. */
.ssmo-social-more {
	margin: var(--ssmo-pages-margin, 1.25rem 0 0);
	text-align: center;
}

.ssmo-social-more__button,
.ssmo-social-pages .page-numbers {
	display: inline-block;
	box-sizing: border-box;
	font-family: var(--ssmo-pages-font-family, inherit);
	font-size: var(--ssmo-pages-font-size, inherit);
	font-weight: var(--ssmo-pages-font-weight, inherit);
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	padding: var(--ssmo-pages-padding, 0.45em 0.9em);
	border: var(--ssmo-pages-border-width, 1px) solid var(--ssmo-pages-border, currentColor);
	border-radius: var(--ssmo-pages-radius, 0.4em);
	background: var(--ssmo-pages-bg, transparent);
	color: var(--ssmo-pages-fg, inherit);
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.ssmo-social-more__button {
	cursor: pointer;
}

.ssmo-social-more__button:hover,
.ssmo-social-more__button:focus-visible,
.ssmo-social-pages a.page-numbers:hover,
.ssmo-social-pages a.page-numbers:focus-visible {
	background: var(--ssmo-pages-active-bg, var(--ssmo-pages-bg, transparent));
	color: var(--ssmo-pages-active-fg, var(--ssmo-pages-fg, inherit));
	border-color: var(--ssmo-pages-active-border, var(--ssmo-pages-border, currentColor));
	text-decoration: var(--ssmo-pages-hover-decoration, underline);
	text-underline-offset: 0.2em;
}

.ssmo-social-more__button:disabled {
	opacity: 0.5;
	cursor: wait;
}

.ssmo-social-pages {
	margin: var(--ssmo-pages-margin, 1.25rem 0 0);
	display: flex;
	flex-wrap: wrap;
	gap: var(--ssmo-pages-gap, 0.4rem);
	justify-content: var(--ssmo-pages-align, center);
}

.ssmo-social-pages .page-numbers {
	min-width: var(--ssmo-pages-min-width, 2.4em);
}

.ssmo-social-pages .page-numbers.current {
	background: var(--ssmo-pages-active-bg, var(--ssmo-pages-bg, transparent));
	color: var(--ssmo-pages-active-fg, var(--ssmo-pages-fg, inherit));
	border-color: var(--ssmo-pages-active-border, var(--ssmo-pages-border, currentColor));
	font-weight: var(--ssmo-pages-current-weight, 700);
	text-decoration: var(--ssmo-pages-current-decoration, underline);
	text-underline-offset: 0.2em;
}

.ssmo-social-pages .page-numbers.dots {
	border-color: transparent;
	background: transparent;
	min-width: 0;
	padding-inline: 0.2em;
}

/* Lightbox. A native dialog, so focus, Escape and scroll locking come for free. */
.ssmo-social-lightbox {
	padding: 0;
	border: 0;
	background: transparent;
	max-width: none;
	max-height: none;
	width: 100vw;
	height: 100dvh;
	color: var(--ssmo-lightbox-fg, #111);
}

.ssmo-social-lightbox::backdrop {
	background: var(--ssmo-lightbox-backdrop, rgba(0, 0, 0, 0.85));
}

.ssmo-social-lightbox__stage {
	position: relative;
	width: 100%;
	height: 100%;
	display: grid;
	place-items: center;
	padding: clamp(0.5rem, 3vw, 2rem);
	box-sizing: border-box;
}

.ssmo-social-lightbox__panel {
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--ssmo-lightbox-sidebar, 22.5rem);
	/* One row pinned to the panel's height. Left implicit, the row grows to the photo
	   and a tall portrait runs off the bottom of the panel instead of shrinking to fit. */
	grid-template-rows: minmax(0, 1fr);
	width: min(100%, var(--ssmo-lightbox-width, 76rem));
	height: min(100%, var(--ssmo-lightbox-height, 54rem));
	background: var(--ssmo-panel-bg, #fff);
	border-radius: var(--ssmo-panel-radius, 8px);
	overflow: hidden;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
}

.ssmo-social-lightbox__media {
	position: relative;
	background: var(--ssmo-lightbox-media-bg, #0d0d0d);
	display: grid;
	place-items: center;
	min-height: 0;
	overflow: hidden;
}

.ssmo-social-lightbox__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.ssmo-social-lightbox__embed {
	max-width: none;
	max-height: none;
	border: 0;
	display: block;
	background: #000;
}

.ssmo-social-lightbox__side {
	display: flex;
	flex-direction: column;
	min-height: 0;
	min-width: 0;
}

/* The bar names the account, with the network in a quiet pill at the end. */
.ssmo-social-lightbox__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: var(--ssmo-header-padding, 14px 15px);
	background: var(--ssmo-accent, #222);
	color: var(--ssmo-accent-fg, #fff);
	font-weight: 700;
	font-size: var(--ssmo-header-font-size, 15px);
	line-height: 1.3;
	letter-spacing: 0.5px;
	text-transform: uppercase;
}

.ssmo-social-lightbox__bar-name {
	min-width: 0;
	overflow-wrap: anywhere;
}

.ssmo-social-lightbox__bar-platform {
	flex: 0 0 auto;
	padding: 0.25rem 0.6rem;
	border-radius: 999px;
	background: var(--ssmo-lightbox-pill-bg, rgba(255, 255, 255, 0.16));
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.4px;
}

.ssmo-social-lightbox__bar-platform:empty {
	display: none;
}

.ssmo-social-lightbox__body {
	padding: 1.1rem 1.15rem 1.25rem;
	overflow: auto;
	flex: 1 1 auto;
	min-height: 0;
	font-size: 0.95rem;
	line-height: 1.6;
}

.ssmo-social-lightbox__date {
	display: block;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0.55;
	margin: 0 0 0.75rem;
}

.ssmo-social-lightbox__caption {
	margin: 0;
	white-space: pre-line;
	overflow-wrap: anywhere;
}

.ssmo-social-lightbox__caption:empty {
	display: none;
}

/* An album's photos, small, under the caption. The one showing wears the accent. */
.ssmo-social-lightbox__thumbs {
	display: grid;
	grid-template-columns: repeat(var(--ssmo-lightbox-thumbs, 4), minmax(0, 1fr));
	gap: 0.4rem;
	margin: 1.1rem 0 0;
}

.ssmo-social-lightbox__thumbs[hidden] {
	display: none;
}

.ssmo-social-lightbox__thumb {
	position: relative;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: calc(var(--ssmo-panel-radius, 8px) * 0.75);
	background: var(--ssmo-soft-bg, #fafafa);
	aspect-ratio: 1;
	overflow: hidden;
	cursor: pointer;
	box-shadow: inset 0 0 0 2px transparent;
	transition: box-shadow 0.15s ease, opacity 0.15s ease;
	-webkit-appearance: none;
	appearance: none;
}

.ssmo-social-lightbox__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.75;
	transition: opacity 0.15s ease;
}

.ssmo-social-lightbox__thumb:hover img,
.ssmo-social-lightbox__thumb:focus-visible img,
.ssmo-social-lightbox__thumb[aria-current="true"] img {
	opacity: 1;
}

.ssmo-social-lightbox__thumb[aria-current="true"] {
	box-shadow: inset 0 0 0 2px var(--ssmo-accent, #222);
}

.ssmo-social-lightbox__thumb:focus-visible {
	outline: 2px solid var(--ssmo-accent, #222);
	outline-offset: 1px;
}

/* The foot carries the counts and the way through to the network. */
.ssmo-social-lightbox__foot {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	padding: 0.9rem 1.15rem 1rem;
	border-top: 1px solid var(--ssmo-panel-border, #eee);
	background: var(--ssmo-soft-bg, #fafafa);
}

.ssmo-social-lightbox__foot[hidden] {
	display: none;
}

.ssmo-social-lightbox__counts {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	font-size: 0.8rem;
	font-weight: 600;
}

.ssmo-social-lightbox__counts[hidden] {
	display: none;
}

.ssmo-social-lightbox__counts span {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.3rem 0.7rem;
	border-radius: 999px;
	background: var(--ssmo-panel-bg, #fff);
	border: 1px solid var(--ssmo-panel-border, #eee);
}

.ssmo-social-lightbox__counts svg {
	color: var(--ssmo-accent, #222);
}

.ssmo-social-lightbox__view {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.45rem;
	width: 100%;
	box-sizing: border-box;
	font-size: var(--ssmo-pages-font-size, 14px);
	font-weight: var(--ssmo-pages-font-weight, 600);
	padding: var(--ssmo-pages-padding, 10px 12px);
	border-radius: var(--ssmo-pages-radius, 10px);
	border: 1px solid var(--ssmo-accent, #222);
	background: var(--ssmo-accent, #222);
	color: var(--ssmo-accent-fg, #fff);
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.ssmo-social-lightbox__view[hidden] {
	display: none;
}

/* Previous and next post as a row of buttons under the foot. Phones only: wider screens
   have the round arrows beside the panel. */
.ssmo-social-lightbox__nav {
	display: none;
	grid-template-columns: 1fr 1fr;
	gap: 0.5rem;
	padding: 0.75rem 1rem calc(0.9rem + env(safe-area-inset-bottom));
	background: var(--ssmo-soft-bg, #fafafa);
	border-top: 1px solid var(--ssmo-panel-border, #eee);
}

.ssmo-social-lightbox__nav-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.35rem;
	min-height: 2.75rem;
	padding: 0.5rem 0.75rem;
	font: inherit;
	font-size: var(--ssmo-pages-font-size, 14px);
	font-weight: var(--ssmo-pages-font-weight, 600);
	border-radius: var(--ssmo-pages-radius, 10px);
	border: 1px solid var(--ssmo-accent, #222);
	background: var(--ssmo-panel-bg, #fff);
	color: var(--ssmo-accent, #222);
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.ssmo-social-lightbox__nav-button svg {
	width: 16px;
	height: 16px;
	flex: 0 0 auto;
}

.ssmo-social-lightbox__nav-button:disabled {
	opacity: 0.35;
	cursor: default;
}

.ssmo-social-lightbox__nav-button:focus-visible {
	outline: 2px solid var(--ssmo-accent, #222);
	outline-offset: 2px;
}

.ssmo-social-lightbox__view svg {
	width: 15px;
	height: 15px;
	flex: 0 0 auto;
}

.ssmo-social-lightbox__view:hover,
.ssmo-social-lightbox__view:focus-visible {
	background: var(--ssmo-panel-bg, #fff);
	color: var(--ssmo-lightbox-fg, #111);
}

.ssmo-social-lightbox__control {
	position: absolute;
	width: 2.75rem;
	height: 2.75rem;
	display: grid;
	place-items: center;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92);
	color: #111;
	cursor: pointer;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
	transition: transform 0.15s ease, background-color 0.15s ease;
	z-index: 3;
}

.ssmo-social-lightbox__control:hover,
.ssmo-social-lightbox__control:focus-visible {
	background: #fff;
	transform: scale(1.06);
}

.ssmo-social-lightbox__control:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.ssmo-social-lightbox__control[hidden] {
	display: none;
}

.ssmo-social-lightbox__close {
	top: 0.6rem;
	right: 0.6rem;
	background: rgba(255, 255, 255, 0.18);
	color: #fff;
	box-shadow: none;
}

.ssmo-social-lightbox__close:hover,
.ssmo-social-lightbox__close:focus-visible {
	background: rgba(255, 255, 255, 0.3);
}

.ssmo-social-lightbox__prev,
.ssmo-social-lightbox__next {
	top: 50%;
	transform: translateY(-50%);
}

.ssmo-social-lightbox__prev:hover,
.ssmo-social-lightbox__next:hover,
.ssmo-social-lightbox__prev:focus-visible,
.ssmo-social-lightbox__next:focus-visible {
	transform: translateY(-50%) scale(1.06);
}

.ssmo-social-lightbox__prev {
	left: 0.75rem;
}

.ssmo-social-lightbox__next {
	right: 0.75rem;
}

/* Album controls sit inside the media area. */
.ssmo-social-lightbox__album-prev,
.ssmo-social-lightbox__album-next {
	width: 2.25rem;
	height: 2.25rem;
	top: 50%;
	transform: translateY(-50%);
	background: rgba(255, 255, 255, 0.85);
}

.ssmo-social-lightbox__album-prev {
	left: 0.6rem;
}

.ssmo-social-lightbox__album-next {
	right: 0.6rem;
}

.ssmo-social-lightbox__album-count {
	position: absolute;
	top: 0.6rem;
	left: 0.6rem;
	padding: 0.25rem 0.55rem;
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.6);
	color: #fff;
	font-size: 0.75rem;
	z-index: 2;
}

.ssmo-social-lightbox__album-count[hidden] {
	display: none;
}

/* On a phone the post is one page that scrolls: the account bar stays at the top with the
   close in it, the whole photo shows under it (no cropping, nothing over it but the album
   arrows), then the date, caption, counts, the link out and the previous/next buttons. */
@media (max-width: 782px) {
	.ssmo-social-lightbox__stage {
		padding: 0;
	}

	.ssmo-social-lightbox__panel {
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 100%;
		border-radius: 0;
		overflow: auto;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;
	}

	.ssmo-social-lightbox__side {
		display: contents;
	}

	.ssmo-social-lightbox__bar {
		order: -1;
		position: sticky;
		top: 0;
		z-index: 4;
		flex: 0 0 auto;
		padding: 0.7rem 3.4rem 0.7rem 1rem;
		font-size: 0.95rem;
		letter-spacing: 0;
		text-transform: none;
	}

	.ssmo-social-lightbox__bar-name {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.ssmo-social-lightbox__close {
		top: 0.4rem;
		right: 0.6rem;
		width: 2.4rem;
		height: 2.4rem;
		z-index: 5;
	}

	.ssmo-social-lightbox__media {
		flex: 0 0 auto;
		display: block;
		min-height: 6rem;
	}

	.ssmo-social-lightbox__image {
		position: static;
		width: 100%;
		height: auto;
		max-height: 72dvh;
		object-fit: contain;
	}

	.ssmo-social-lightbox__embed {
		width: 100% !important;
		height: auto !important;
		margin: 0 !important;
		aspect-ratio: 16 / 9;
	}

	.ssmo-social-lightbox__embed--instagram {
		aspect-ratio: auto;
		height: 80dvh !important;
	}

	.ssmo-social-lightbox__body {
		flex: 0 0 auto;
		overflow: visible;
		padding: 1rem 1rem 1.1rem;
	}

	.ssmo-social-lightbox__thumbs {
		grid-template-columns: repeat(var(--ssmo-lightbox-thumbs-phone, 5), minmax(0, 1fr));
	}

	.ssmo-social-lightbox__foot {
		flex: 0 0 auto;
		padding: 0.9rem 1rem;
	}

	.ssmo-social-lightbox__prev,
	.ssmo-social-lightbox__next {
		display: none;
	}

	.ssmo-social-lightbox__nav {
		display: grid;
		flex: 0 0 auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ssmo-social-item__image,
	.ssmo-social-item__overlay,
	.ssmo-social-lightbox__control {
		transition: none;
	}
}