/*
 * Involved Holidays - Blog Builder, front end.
 *
 * Everything is namespaced .ihbb- and scoped inside .ihbb-blog, so it cannot
 * touch the theme and the theme's global styles have little to say about it.
 * Fonts are deliberately inherited so the page matches the rest of the site;
 * change the two colours below and the whole template follows.
 */

.ihbb-blog {
	/* Sampled from involvedholidays.com: the footer navy, the "Find your
	   holiday" gold, and the blue the theme already gives its headings. */
	--ihbb-navy: #0a2f5c;
	--ihbb-navy-dark: #06203f;
	--ihbb-blue: #0d478a;
	--ihbb-gold: #c69a3f;
	--ihbb-gold-soft: #f5efe2;
	--ihbb-ink: #1f2733;
	--ihbb-muted: #5c6672;
	--ihbb-line: #e1e5ea;
	--ihbb-bg-soft: #f6f8fa;
	--ihbb-radius: 4px;
	--ihbb-shell: 1240px;
	--ihbb-gap: clamp(2rem, 4vw, 3.5rem);

	color: var(--ihbb-ink);
}

.ihbb-blog *,
.ihbb-blog *::before,
.ihbb-blog *::after {
	box-sizing: border-box;
}

/* ------------------------------------------------------------------ Banner */

.ihbb-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: clamp(260px, 32vw, 420px);
	padding: clamp(1.75rem, 3.2vw, 2.75rem) 1.25rem;
	overflow: hidden;
	background-color: var(--ihbb-navy);
}

.ihbb-hero__media,
.ihbb-hero__scrim {
	position: absolute;
	inset: 0;
}

.ihbb-hero__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

.ihbb-hero__scrim {
	background:
		linear-gradient(to top, rgba(6, 32, 63, 0.92) 0%, rgba(6, 32, 63, 0.7) 40%, rgba(6, 32, 63, 0.3) 100%);
}

.ihbb-hero--plain .ihbb-hero__scrim {
	background: linear-gradient(135deg, var(--ihbb-navy) 0%, var(--ihbb-navy-dark) 100%);
}

.ihbb-hero__inner {
	position: relative;
	width: 100%;
	max-width: var(--ihbb-shell);
	margin: 0 auto;
	color: #fff;
}

/* The theme colours its headings blue with a rule this cannot outrank on
   specificity alone, so the banner text is forced. Same for the standfirst,
   in case a global paragraph colour lands on it. */
.ihbb-blog .ihbb-hero__title {
	margin: 0 !important;
	max-width: 24ch;
	font-size: clamp(2rem, 4.4vw, 3.4rem) !important;
	line-height: 1.1 !important;
	letter-spacing: -0.01em;
	color: #fff !important;
	text-shadow: 0 1px 24px rgba(6, 32, 63, 0.45);
}

.ihbb-blog .ihbb-hero__eyebrow {
	display: inline-block;
	margin: 0 0 0.9rem;
	padding-bottom: 0.45rem;
	border-bottom: 2px solid var(--ihbb-gold);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ihbb-gold) !important;
}

.ihbb-blog .ihbb-hero__standfirst {
	margin: 1rem 0 0 !important;
	max-width: 58ch;
	font-size: clamp(1.05rem, 1.6vw, 1.3rem);
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.92) !important;
}

.ihbb-blog .ihbb-hero__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.6rem;
	margin: 1.4rem 0 0 !important;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ihbb-gold) !important;
}

.ihbb-hero__dot {
	color: rgba(255, 255, 255, 0.55);
}

/* ------------------------------------------------------------- Shell + grid */

.ihbb-shell {
	max-width: var(--ihbb-shell);
	margin: 0 auto;
	padding: 0 1.25rem;
}

.ihbb-crumbs {
	padding: 1.5rem 0 0;
}

.ihbb-crumbs__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.45rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.85rem;
	color: var(--ihbb-muted);
}

.ihbb-crumbs__item {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	margin: 0;
}

.ihbb-crumbs__item a {
	color: var(--ihbb-muted);
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

.ihbb-crumbs__item a:hover,
.ihbb-crumbs__item a:focus {
	color: var(--ihbb-blue);
	border-bottom-color: var(--ihbb-gold);
}

.ihbb-crumbs__item.is-current span {
	color: var(--ihbb-ink);
	font-weight: 600;
}

.ihbb-crumbs__sep {
	color: var(--ihbb-line);
}

.ihbb-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: var(--ihbb-gap);
	padding: clamp(2rem, 4vw, 3.5rem) 0 clamp(3rem, 6vw, 5rem);
	align-items: start;
}

.ihbb-main {
	min-width: 0;
}

.ihbb-side {
	position: sticky;
	top: 2rem;
	min-width: 0;
}

/* ------------------------------------------------------------------- Blocks */

.ihbb-block + .ihbb-block {
	margin-top: clamp(1.75rem, 3vw, 2.75rem);
}

.ihbb-blog .ihbb-heading,
.ihbb-blog .ihbb-hero__title,
.ihbb-blog .ihbb-card__title,
.ihbb-blog .ihbb-related__title,
.ihbb-blog .ihbb-accordion__title {
	/* The theme uppercases headings site-wide. Sentence case here, as typed. */
	text-transform: none !important;
}

.ihbb-heading {
	margin: 0;
	color: var(--ihbb-blue);
	line-height: 1.2;
}

.ihbb-heading--h2 {
	font-size: clamp(1.6rem, 2.6vw, 2.25rem);
}

.ihbb-heading--h3 {
	font-size: clamp(1.3rem, 2vw, 1.6rem);
}

.ihbb-heading--h4 {
	font-size: clamp(1.1rem, 1.6vw, 1.25rem);
	letter-spacing: 0.02em;
}

.ihbb-heading.is-center {
	text-align: center;
}

.ihbb-rule {
	display: block;
	width: 56px;
	height: 3px;
	margin-bottom: 1rem;
	background: var(--ihbb-gold);
}

.ihbb-rule--center {
	margin-left: auto;
	margin-right: auto;
}

/* Editor copy */

.ihbb-prose {
	font-size: 1.0625rem;
	line-height: 1.75;
	color: var(--ihbb-ink);
}

.ihbb-prose > *:first-child {
	margin-top: 0;
}

.ihbb-prose > *:last-child {
	margin-bottom: 0;
}

.ihbb-prose p {
	margin: 0 0 1.15em;
}

.ihbb-prose--lead {
	font-size: 1.2rem;
	line-height: 1.65;
	color: #2b3541;
}

.ihbb-prose a {
	color: var(--ihbb-blue);
	text-decoration: underline;
	text-decoration-color: var(--ihbb-gold);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

.ihbb-prose a:hover,
.ihbb-prose a:focus {
	color: var(--ihbb-gold);
}

.ihbb-prose ul,
.ihbb-prose ol {
	margin: 0 0 1.15em;
	padding-left: 1.35em;
}

.ihbb-prose li {
	margin-bottom: 0.4em;
}

.ihbb-prose strong {
	color: var(--ihbb-blue);
}

.ihbb-prose img {
	max-width: 100%;
	height: auto;
}

/* Figures */

.ihbb-figure {
	margin: 0;
}

.ihbb-figure__img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--ihbb-radius);
}

.ihbb-figure__caption {
	margin-top: 0.6rem;
	font-size: 0.85rem;
	line-height: 1.5;
	color: var(--ihbb-muted);
}

/* Linked images. The link wraps the image only, never the caption, so the
   caption stays selectable text. */
.ihbb-figure__link,
.ihbb-gallery__link {
	display: block;
	overflow: hidden;
	border-radius: var(--ihbb-radius);
	line-height: 0;
}

.ihbb-figure__link img,
.ihbb-gallery__link img {
	transition: transform 0.45s ease;
}

.ihbb-figure__link:hover img,
.ihbb-figure__link:focus-visible img,
.ihbb-gallery__link:hover img,
.ihbb-gallery__link:focus-visible img {
	transform: scale(1.03);
}

.ihbb-figure__link:focus-visible,
.ihbb-gallery__link:focus-visible {
	outline: 3px solid var(--ihbb-gold);
	outline-offset: 2px;
}

/* The split row stretches its image to the full height of the card, so the
   link has to stretch too. */
.ihbb-split__media .ihbb-figure__link {
	height: 100%;
}

/* Two images side by side */

.ihbb-duo {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.25rem;
}

.ihbb-duo.is-4-3 .ihbb-figure__img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.ihbb-duo.is-1-1 .ihbb-figure__img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

.ihbb-duo.is-3-4 .ihbb-figure__img {
	aspect-ratio: 3 / 4;
	object-fit: cover;
}

/* Single image */

.ihbb-single.is-wide {
	margin-left: clamp(-2.5rem, -3vw, 0rem);
	margin-right: clamp(-2.5rem, -3vw, 0rem);
}

/* Image and text */

.ihbb-split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 0;
	align-items: stretch;
	overflow: hidden;
	border: 1px solid var(--ihbb-line);
	border-radius: var(--ihbb-radius);
	background: var(--ihbb-bg-soft);
}

.ihbb-split.is-flipped .ihbb-split__media {
	order: 2;
}

.ihbb-split__media,
.ihbb-split__media .ihbb-figure {
	height: 100%;
}

.ihbb-split__media .ihbb-figure__img {
	height: 100%;
	min-height: 280px;
	object-fit: cover;
	border-radius: 0;
}

.ihbb-split__text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(1.5rem, 3vw, 2.5rem);
}

.ihbb-split__text::before {
	content: "";
	display: block;
	width: 44px;
	height: 3px;
	margin-bottom: 1rem;
	background: var(--ihbb-gold);
}

.ihbb-split__text .ihbb-heading {
	margin-bottom: 0.85rem;
}

/* Buttons */

.ihbb-cta {
	margin: 0;
}

.ihbb-cta.is-center {
	text-align: center;
}

/* Pill shaped, and both solid fills carry white text to match the site's own
   gold "Find your holiday" button. */
.ihbb-blog .ihbb-button {
	display: inline-block;
	padding: 0.95rem 2.35rem;
	border: 2px solid transparent;
	border-radius: 999px !important;
	font-size: 0.88rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none !important;
	transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.ihbb-blog .ihbb-button--primary {
	background: var(--ihbb-gold);
	border-color: var(--ihbb-gold);
	color: #fff !important;
}

.ihbb-blog .ihbb-button--primary:hover,
.ihbb-blog .ihbb-button--primary:focus {
	background: var(--ihbb-navy);
	border-color: var(--ihbb-navy);
	color: #fff !important;
}

.ihbb-blog .ihbb-button--secondary {
	background: var(--ihbb-navy);
	border-color: var(--ihbb-navy);
	color: #fff !important;
}

.ihbb-blog .ihbb-button--secondary:hover,
.ihbb-blog .ihbb-button--secondary:focus {
	background: var(--ihbb-gold);
	border-color: var(--ihbb-gold);
	color: #fff !important;
}

.ihbb-blog .ihbb-button--outline {
	background: transparent;
	border-color: var(--ihbb-blue);
	color: var(--ihbb-blue) !important;
}

.ihbb-blog .ihbb-button--outline:hover,
.ihbb-blog .ihbb-button--outline:focus {
	background: var(--ihbb-blue);
	border-color: var(--ihbb-blue);
	color: #fff !important;
}

.ihbb-cta.is-full .ihbb-button {
	display: block;
	text-align: center;
}

/* Accordion */

.ihbb-accordion {
	border-top: 1px solid var(--ihbb-line);
	margin-top: 1.25rem;
}

.ihbb-accordion__item {
	border-bottom: 1px solid var(--ihbb-line);
}

.ihbb-accordion__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.1rem 0;
	cursor: pointer;
	list-style: none;
	font-weight: 600;
	color: var(--ihbb-blue);
}

.ihbb-accordion__summary::-webkit-details-marker {
	display: none;
}

.ihbb-accordion__summary:hover .ihbb-accordion__title {
	color: var(--ihbb-gold);
}

.ihbb-accordion__summary:focus-visible {
	outline: 2px solid var(--ihbb-gold);
	outline-offset: 3px;
}

.ihbb-accordion__icon {
	position: relative;
	flex: 0 0 22px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--ihbb-bg-soft);
}

.ihbb-accordion__icon::before,
.ihbb-accordion__icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 10px;
	height: 2px;
	background: var(--ihbb-blue);
	transform: translate(-50%, -50%);
	transition: transform 0.2s ease;
}

.ihbb-accordion__icon::after {
	transform: translate(-50%, -50%) rotate(90deg);
}

.ihbb-accordion__item[open] .ihbb-accordion__icon::after {
	transform: translate(-50%, -50%) rotate(0deg);
}

.ihbb-accordion__panel {
	padding: 0 0 1.3rem;
}

/* Quote */

/* Themes like to put their own padding, background and borders on blockquote,
   footer and cite, which is what made the attribution look bolted on. Reset
   the parts that matter and rebuild it. */
.ihbb-blog .ihbb-quote {
	position: relative;
	margin: 0 !important;
	padding: clamp(1.75rem, 3vw, 2.25rem) clamp(1.5rem, 3vw, 2.25rem) clamp(1.5rem, 2.5vw, 1.85rem) clamp(3rem, 5vw, 4rem) !important;
	border: 1px solid var(--ihbb-line) !important;
	border-left: 4px solid var(--ihbb-gold) !important;
	border-radius: var(--ihbb-radius);
	background: var(--ihbb-bg-soft) !important;
	quotes: none;
}

.ihbb-quote::before {
	content: "\201C";
	position: absolute;
	top: 0.5rem;
	left: clamp(0.9rem, 2vw, 1.4rem);
	font-family: Georgia, "Times New Roman", serif;
	font-size: 4.5rem;
	line-height: 1;
	color: var(--ihbb-gold);
	opacity: 0.45;
	pointer-events: none;
}

.ihbb-blog .ihbb-quote__text {
	margin: 0 !important;
	padding: 0 !important;
	font-size: clamp(1.1rem, 1.8vw, 1.4rem);
	line-height: 1.55;
	font-style: italic;
	color: var(--ihbb-blue) !important;
	background: none !important;
}

.ihbb-blog .ihbb-quote__by {
	display: block;
	margin: 1.1rem 0 0 !important;
	padding: 0.9rem 0 0 !important;
	border-top: 1px solid var(--ihbb-line);
	background: none !important;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ihbb-gold) !important;
}

.ihbb-blog .ihbb-quote__by cite {
	font-style: normal;
	background: none !important;
	color: inherit !important;
}

.ihbb-blog .ihbb-quote__by cite::before {
	content: "\2014\00a0";
	opacity: 0.7;
}

/* ---------------------------------------------------------- Sliding gallery */

.ihbb-gallery__viewport {
	position: relative;
}

.ihbb-gallery__track {
	display: flex;
	gap: 0.75rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-snap-stop: always;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.ihbb-gallery__track::-webkit-scrollbar {
	display: none;
}

.ihbb-gallery__slide {
	flex: 0 0 100%;
	margin: 0;
	scroll-snap-align: start;
}

.ihbb-gallery__img {
	display: block;
	width: 100%;
	object-fit: cover;
	border-radius: var(--ihbb-radius);
	background: var(--ihbb-bg-soft);
}

.ihbb-gallery.is-16-9 .ihbb-gallery__img {
	aspect-ratio: 16 / 9;
}

.ihbb-gallery.is-4-3 .ihbb-gallery__img {
	aspect-ratio: 4 / 3;
}

.ihbb-gallery.is-1-1 .ihbb-gallery__img {
	aspect-ratio: 1 / 1;
}

.ihbb-gallery.is-3-4 .ihbb-gallery__img {
	aspect-ratio: 3 / 4;
}

.ihbb-gallery__caption {
	min-height: 1.4em;
	margin-top: 0.6rem;
	font-size: 0.85rem;
	line-height: 1.5;
	color: var(--ihbb-muted);
}

.ihbb-gallery__nav {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.94);
	box-shadow: 0 2px 10px rgba(6, 32, 63, 0.22);
	cursor: pointer;
	transform: translateY(-50%);
	transition: background-color 0.18s ease, opacity 0.18s ease;
}

.ihbb-gallery__nav::before {
	content: "";
	width: 10px;
	height: 10px;
	border-right: 2px solid var(--ihbb-navy);
	border-bottom: 2px solid var(--ihbb-navy);
}

.ihbb-gallery__nav.is-prev {
	left: 0.75rem;
}

.ihbb-gallery__nav.is-prev::before {
	transform: rotate(135deg) translate(-2px, -2px);
}

.ihbb-gallery__nav.is-next {
	right: 0.75rem;
}

.ihbb-gallery__nav.is-next::before {
	transform: rotate(-45deg) translate(-2px, -2px);
}

.ihbb-gallery__nav:hover {
	background: var(--ihbb-gold);
}

.ihbb-gallery__nav:hover::before {
	border-color: #fff;
}

.ihbb-gallery__nav[disabled] {
	opacity: 0.3;
	cursor: default;
	background: rgba(255, 255, 255, 0.94);
}

.ihbb-gallery__nav[disabled]::before {
	border-color: var(--ihbb-navy);
}

.ihbb-gallery__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-top: 0.85rem;
}

.ihbb-gallery__dots {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

.ihbb-gallery__dots button {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--ihbb-line);
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.ihbb-gallery__dots button.is-active {
	background: var(--ihbb-gold);
	transform: scale(1.35);
}

.ihbb-gallery__count {
	flex: 0 0 auto;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	color: var(--ihbb-muted);
}

.ihbb-gallery.is-wide,
.ihbb-video.is-wide {
	margin-left: clamp(-2.5rem, -3vw, 0rem);
	margin-right: clamp(-2.5rem, -3vw, 0rem);
}

/* ------------------------------------------------------------ YouTube video */

/*
 * The sizing is duplicated inline on the element itself. That is deliberate:
 * if this stylesheet is ever stale or missing, the embed still renders at the
 * right size instead of collapsing to the browser's default iframe box.
 */
.ihbb-video__frame {
	position: relative;
	width: 100%;
	padding-top: 56.25%;
	overflow: hidden;
	border-radius: var(--ihbb-radius);
	background: var(--ihbb-navy-dark);
}

.ihbb-video__iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* ----------------------------------------------------------- Related posts */

.ihbb-related {
	border-radius: var(--ihbb-radius);
}

.ihbb-related__title {
	margin: 0 0 1rem;
	padding-bottom: 0.7rem;
	border-bottom: 2px solid var(--ihbb-gold);
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: 0;
	color: var(--ihbb-blue);
}

.ihbb-related__track {
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
}

.ihbb-card {
	background: transparent;
}

.ihbb-card + .ihbb-card {
	padding-top: 0.9rem;
	border-top: 1px solid var(--ihbb-line);
}

/* Thumbnail left, wording right: the same four posts in roughly half the
   height the stacked version needed. */
.ihbb-card__link {
	display: grid;
	grid-template-columns: 88px minmax(0, 1fr);
	gap: 0.8rem;
	align-items: start;
	text-decoration: none !important;
	color: inherit;
}

.ihbb-card__media {
	position: relative;
	overflow: hidden;
	border-radius: var(--ihbb-radius);
	background: var(--ihbb-bg-soft);
	aspect-ratio: 1 / 1;
}

.ihbb-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease;
}

.ihbb-card__link:hover .ihbb-card__media img,
.ihbb-card__link:focus .ihbb-card__media img {
	transform: scale(1.04);
}

.ihbb-card__body {
	padding-top: 0;
}

.ihbb-card__tag {
	display: block;
	margin-bottom: 0.2rem;
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ihbb-gold);
}

.ihbb-card__title {
	/* Clamped so four cards keep an even rhythm however long the titles are. */
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 0 0 0.3rem;
	font-size: 0.93rem;
	line-height: 1.35;
	color: var(--ihbb-blue);
}

.ihbb-card__link:hover .ihbb-card__title,
.ihbb-card__link:focus .ihbb-card__title {
	color: var(--ihbb-gold);
}

.ihbb-card__date {
	font-size: 0.75rem;
	color: var(--ihbb-muted);
}

.ihbb-related__dots {
	display: none;
}

/* ------------------------------------------------------------------- Mobile */

@media (max-width: 991px) {

	.ihbb-layout {
		grid-template-columns: minmax(0, 1fr);
	}

	.ihbb-side {
		position: static;
	}

	.ihbb-related {
		padding-top: 1.5rem;
		border-top: 1px solid var(--ihbb-line);
	}

	/* Full width to play with, so the thumbnail goes back on top. */
	.ihbb-card__link {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}

	.ihbb-card__media {
		aspect-ratio: 16 / 10;
	}

	.ihbb-card__body {
		padding-top: 0.7rem;
	}

	.ihbb-card + .ihbb-card {
		padding-top: 0;
		border-top: 0;
	}

	.ihbb-card__title {
		font-size: 1rem;
	}

	.ihbb-card__tag {
		font-size: 0.68rem;
	}

	.ihbb-gallery__nav {
		width: 38px;
		height: 38px;
	}

	.ihbb-gallery.is-wide,
	.ihbb-video.is-wide {
		margin-left: 0;
		margin-right: 0;
	}

	/* The sidebar becomes a swipeable carousel. Scroll snapping does the
	   work; the JS only adds the dots. */
	.ihbb-related__track {
		flex-direction: row;
		gap: 1rem;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		gap: 0.9rem;
		padding: 0 0 0.25rem;
		margin: 0;
		scroll-padding: 0;
		scroll-snap-stop: always;
	}

	.ihbb-related__track::-webkit-scrollbar {
		display: none;
	}

	.ihbb-card {
		flex: 0 0 78%;
		scroll-snap-align: start;
	}

	.ihbb-related__dots {
		display: flex;
		justify-content: center;
		gap: 0.45rem;
		margin-top: 0.9rem;
	}

	.ihbb-related__dots button {
		width: 8px;
		height: 8px;
		padding: 0;
		border: 0;
		border-radius: 50%;
		background: var(--ihbb-line);
		cursor: pointer;
		transition: background-color 0.2s ease, transform 0.2s ease;
	}

	.ihbb-related__dots button.is-active {
		background: var(--ihbb-gold);
		transform: scale(1.35);
	}
}

@media (max-width: 700px) {

	.ihbb-duo,
	.ihbb-split {
		grid-template-columns: minmax(0, 1fr);
	}

	.ihbb-split.is-flipped .ihbb-split__media {
		order: 0;
	}

	.ihbb-split__media .ihbb-figure__img {
		min-height: 220px;
	}

	.ihbb-single.is-wide {
		margin-left: 0;
		margin-right: 0;
	}

	.ihbb-card {
		flex-basis: 84%;
	}
}

@media (prefers-reduced-motion: reduce) {

	.ihbb-blog * {
		transition: none !important;
	}
}