Add carousel gallery shortcode

themes/lhs/assets/sass/bulma-carousel.sass

@@ -0,0 +1,145 @@
+.slider
+	position: relative
+	width: 100%
+	// overflow: hidden
+.slider-container
+	display: flex
+	flex-wrap: nowrap
+	flex-direction: row
+	overflow: hidden
+	transform: translate3d(0, 0, 0)
+	min-height: 100%
+	&.is-vertical
+		flex-direction: column
+	.slider-item
+		flex: none
+		.image
+			&.is-covered
+				img
+					object-fit: cover
+					object-position: center center
+					height: 100%
+					width: 100%
+		// Responsive embedded objects
+		.video-container
+			height: 0
+			padding-bottom: 0
+			padding-top: 56.25% // ratio 16:9
+			margin: 0
+			position: relative
+			&.is-1by1,
+			&.is-square
+				padding-top: 100%
+			&.is-4by3
+				padding-top: 75%
+			&.is-21by9
+				padding-top: 42.857143%
+			& iframe,
+			& object,
+			& embed
+				position: absolute
+				top: 0
+				left: 0
+				width: 100% !important
+				height: 100% !important
+
+
+.slider-navigation-previous,
+.slider-navigation-next
+	display: flex
+	justify-content: center
+	align-items: center
+	position: absolute
+	width: 42px
+	height: 42px
+	background: white center center no-repeat
+	background-size: 20px 20px
+	border: 1px solid white
+	border-radius: 25091983px
+	box-shadow: 0 2px 5px #3232321a
+	top: 50%
+	margin-top: -20px
+	left: 0px
+	cursor: pointer
+	transition: transform .3s, opacity .3s
+	&:hover
+		transform: scale(1.2)
+	&.is-hidden
+		display: none
+		opacity: 0
+	svg
+		width: 25%
+.slider-navigation-next
+	left: auto
+	right: 0px
+	background: white center center no-repeat
+	background-size: 20px 20px
+
+.slider-pagination
+	display: none
+	justify-content: center
+	align-items: center
+	position: absolute
+	bottom: 0
+	left: 0
+	right: 0
+	padding: .5rem 1rem
+	text-align: center
+	.slider-page
+		background: white
+		width: 10px
+		height: 10px
+		border-radius: 25091983px
+		display: inline-block
+		margin: 0 3px
+		box-shadow: 0 2px 5px #3232321a
+		transition: transform .3s
+		cursor: pointer
+		&.is-active,
+		&:hover
+			transform: scale(1.4)
+
+	@media screen and (min-width: 800px)
+		display: flex
+
+
+// Hero Carousel
+=hero-carousel
+	position: absolute
+	top: 0
+	left: 0
+	bottom: 0
+	right: 0
+	height: auto
+	border: none
+	margin: auto
+	padding: 0
+	z-index: 0
+
+.hero
+	&.has-carousel
+		position: relative
+		+ .hero-body,
+		+ .hero-head,
+		+ .hero-footer
+			z-index: 10
+			overflow: hidden
+		.hero-carousel
+			+hero-carousel
+			.slider
+				width: 100%
+				max-width: 100%
+				overflow: hidden
+				height: 100% !important
+				max-height: 100%
+				z-index: 0
+				.has-background
+					max-height: 100%
+					.is-background
+						object-fit: cover
+						object-position: center center
+						height: 100%
+						width: 100%
+		.hero-body
+			margin: 0 3rem
+			z-index: 10

themes/lhs/assets/sass/leighhack.scss

@@ -27,6 +27,9 @@ $body-font-size: 1.25em;
 // Import Bulmas styles
 @import "bulma.sass";
 
+// Add Carousel add-on
+@import "bulma-carousel.sass";
+
 
 // -------------------------------------------------------
 // Custom SCSS overrides