@iamproperty/components 7.7.1--beta4 → 7.7.1--beta6

package/assets/sass/components/carousel.component.scss

@@ -1,631 +1,631 @@
-@use '../_func' as *;
-@use '../elements/buttons' as *;
-
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-}
-
-// #region default carousel
-
-:host {
-  display: block;
-  overflow: visible;
-  container-type: inline-size;
-}
-
-.carousel {
-  margin-inline: calc(var(--carousel-spacing, 1.5rem) * -1);
-  margin-bottom: 2rem;
-  display: block;
-  overflow: visible;
-
-  .carousel__wrapper {
-    position: relative;
-    overflow-x: clip;
-  }
-
-  .carousel__inner {
-    --gutter-x: 1rem;
-    overflow-x: auto;
-    padding-bottom: 1rem;
-    scroll-snap-type: x mandatory;
-  }
-
-  .carousel__content {
-    display: flex;
-    flex-wrap: nowrap !important;
-    margin-inline-end: 0;
-    padding-inline-start: var(--carousel-spacing, 1.5rem);
-    padding-inline-end: var(--carousel-spacing, 1.5rem);
-
-    margin-right: calc(-0.5 * var(--gutter-x));
-    margin-left: calc(-0.5 * var(--gutter-x));
-  }
-
-  .col > *:last-child {
-    margin-bottom: 0;
-    padding-bottom: 0;
-  }
-}
-
-::slotted(div) {
-  scroll-snap-align: start;
-  scroll-margin-left: calc(var(--carousel-spacing, 1.5rem) - 0.5rem);
-
-  flex-shrink: 0;
-  width: calc(100% + var(--last-item-extra, 0px));
-
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-  margin-top: var(--gutter-y);
-}
-
-::slotted(div:last-child) {
-  padding-inline-end: 1.5rem;
-  --last-item-extra: 1rem;
-}
-
-@container (min-width: 36em) {
-  .carousel {
-    margin-inline: calc(var(--carousel-spacing, 2.5rem) * -1);
-
-    .carousel__content {
-      padding-inline-start: var(--carousel-spacing, 2.5rem);
-      padding-inline-end: var(--carousel-spacing, 2.5rem);
-    }
-  }
-
-  :host([data-smcols]) ::slotted(div) {
-    scroll-snap-align: unset;
-    flex: 0 0 auto;
-  }
-
-  :host([data-smcols='2']) ::slotted(div) {
-    width: calc(50% + var(--last-item-extra, 0px));
-  }
-
-  :host([data-smcols='3']) ::slotted(div) {
-    width: calc(33.3333333333% + var(--last-item-extra, 0px));
-  }
-  :host([data-smcols='4']) ::slotted(div) {
-    width: calc(25% + var(--last-item-extra, 0px));
-  }
-
-  :host([data-smcols='2']) ::slotted(div:nth-child(odd)),
-  :host([data-smcols='3']) ::slotted(div:nth-child(3n + 1)),
-  :host([data-smcols='4']) ::slotted(div:nth-child(4n + 1)) {
-    scroll-snap-align: start;
-  }
-
-  ::slotted(div) {
-    scroll-margin-left: calc(var(--carousel-spacing, 2.5rem) - 0.5rem);
-  }
-
-  ::slotted(div:last-child) {
-    padding-inline-end: 2.5rem;
-    --last-item-extra: 2rem;
-  }
-}
-
-@container (min-width: 62em) {
-  .carousel {
-    margin-inline: 0;
-    position: relative;
-  }
-  .carousel__wrapper {
-    overflow: hidden;
-
-    margin-inline: calc(-0.5 * 1rem);
-  }
-  .carousel__inner {
-  }
-  .carousel__content {
-    padding-inline: 0 !important;
-    margin-inline: 0 !important;
-  }
-
-  ::slotted(div) {
-    margin-left: 0;
-    scroll-margin-left: 0;
-  }
-
-  ::slotted(div:last-child) {
-    padding-inline-end: calc(0.5 * 1rem);
-    --last-item-extra: 0px;
-  }
-
-  :host([data-mdcols]) ::slotted(div) {
-    scroll-snap-align: unset;
-    flex: 0 0 auto;
-  }
-
-  :host([data-mdcols='2']) ::slotted(div) {
-    width: calc(50% + var(--last-item-extra, 0px));
-  }
-
-  :host([data-mdcols='3']) ::slotted(div) {
-    width: calc(33.3333333333% + var(--last-item-extra, 0px));
-  }
-  :host([data-mdcols='4']) ::slotted(div) {
-    width: calc(25% + var(--last-item-extra, 0px));
-  }
-  :host([data-mdcols='5']) ::slotted(div) {
-    width: calc(20% + var(--last-item-extra, 0px));
-  }
-  :host([data-mdcols='6']) ::slotted(div) {
-    width: calc(16.6666666667% + var(--last-item-extra, 0px));
-  }
-
-  :host([data-mdcols='2']) ::slotted(div:nth-child(odd)),
-  :host([data-mdcols='3']) ::slotted(div:nth-child(3n + 1)),
-  :host([data-mdcols='4']) ::slotted(div:nth-child(4n + 1)),
-  :host([data-mdcols='5']) ::slotted(div:nth-child(5n + 1)),
-  :host([data-mdcols='6']) ::slotted(div:nth-child(6n + 1)) {
-    scroll-snap-align: start;
-  }
-}
-
-// #endregion
-
-// #region Remove the scrollbar
-.carousel__inner {
-  // FireFox
-  scrollbar-width: none;
-  // IE10+
-  -ms-overflow-style: none;
-}
-
-.carousel__inner::-webkit-scrollbar {
-  // Chrome, Safari, Edge
-  display: none;
-}
-// #endregion
-
-// #region Direction button
-
-.carousel__btns {
-  text-align: center;
-  padding-bottom: 0.5rem;
-}
-
-.btn-next,
-.btn-prev {
-  margin: 0 !important;
-
-  &:after {
-    content: '';
-    position: absolute;
-    right: 0;
-    top: 0;
-    height: 100%;
-    width: 100%;
-    background: currentColor;
-    mask-image:  var(--icon-arrow);
-    mask-size: 50%;
-    mask-repeat: no-repeat;
-    mask-position: 50% 60%;
-    -webkit-mask-image:  var(--icon-arrow);
-    -webkit-mask-size: 50%;
-    -webkit-mask-repeat: no-repeat;
-    -webkit-mask-position: 55% 50%;
-    transform: rotate(0deg);
-  }
-}
-
-.btn-prev {
-  &:after {
-    transform: rotate(180deg);
-  }
-}
-
-@container (min-width: 62em) {
-  .carousel__btns {
-    padding-bottom: 0;
-  }
-  .btn-prev {
-    position: absolute;
-    top: 50%;
-    left: 0;
-    margin: -2rem 0 0 -3rem !important;
-  }
-  .btn-next {
-    position: absolute;
-    top: 50%;
-    right: 0;
-    margin: -2rem -3rem 0 0 !important;
-  }
-}
-
-// #endregion
-
-// #region carousel controls/pips
-.carousel .carousel__controls {
-  overflow: hidden;
-  margin-inline: auto;
-  margin-bottom: 1rem;
-  text-align: center;
-  max-width: 30rem;
-
-  @container (min-width: 36em) {
-    width: 100%;
-  }
-
-  button {
-    padding: 0;
-    margin: 0 0.2rem 0.2rem;
-    border: none;
-  }
-
-  button {
-    width: 0.5rem;
-    height: 0.5rem;
-    min-height: 0.5rem;
-    border-radius: 50%;
-    text-indent: -50rem;
-    overflow: hidden;
-    background: #a5ecfd;
-    margin-inline: 0.375rem; /* 6 */
-    cursor: pointer;
-    border: none;
-
-    &:hover {
-      background-color: var(--colour-info);
-    }
-
-    &:before {
-      display: none;
-    }
-  }
-
-  button:first-child:last-child {
-    display: none;
-  }
-}
-
-.carousel__controls > button[aria-current] {
-  --colour-active-thumbnail: var(--colour-info);
-  border-color: var(--colour-active-thumbnail);
-  background: var(--colour-info);
-
-  width: 1rem;
-  height: 1rem;
-  min-height: 1rem;
-  margin-inline: 0.125rem; /* 2 */
-
-  &:hover {
-    background: var(--colour-info);
-  }
-}
-// #endregion
-
-// #region progress bar
-.carousel__progress {
-  text-align: center;
-  margin-bottom: 1rem;
-  display: none;
-}
-
-input[type='range'] {
-  --track-size: 0.5rem;
-  --track-colour: #a5ecfd;
-  --thumb-colour: var(--colour-info);
-  --thumb-size: 1rem;
-  --thumb-size-outline: 0;
-  width: 90%;
-  max-width: 10.75rem; /* 172 */
-
-  background: transparent;
-  cursor: pointer;
-  margin: 0;
-  height: 1rem;
-  border-radius: 50%;
-  accent-color: var(--thumb-colour);
-  -webkit-appearance: none;
-  appearance: none;
-}
-
-// Track Styles
-input[type='range']::-webkit-slider-runnable-track {
-  background: var(--track-colour);
-  height: var(--track-size);
-  border-radius: 0.5625rem; /* 9 */
-}
-
-input[type='range']::-moz-range-track {
-  background: var(--track-colour);
-  height: var(--track-size);
-  border-radius: 0.5625rem; /* 9 */
-}
-
-// Extended track functionality
-input[type='range']::-webkit-slider-runnable-track {
-  background: linear-gradient(
-    to right,
-    var(--track-colour),
-    var(--track-colour) var(--start-percent, 0%),
-    var(--thumb-colour) var(--start-percent, 0%),
-    var(--thumb-colour) calc(var(--percent, 0%)),
-    var(--track-colour) calc(var(--percent, 0%))
-  );
-}
-
-input[type='range']::-moz-range-track {
-  background: linear-gradient(
-    to right,
-    var(--track-colour),
-    var(--track-colour) var(--start-percent, 0%),
-    var(--thumb-colour) var(--start-percent, 0%),
-    var(--thumb-colour) calc(var(--percent, 0%)),
-    var(--track-colour) calc(var(--percent, 0%))
-  );
-}
-
-// Thumb Styles
-input[type='range']::-webkit-slider-thumb {
-  -webkit-appearance: none; /* Override default look */
-  appearance: none;
-  margin-top: -0.25rem; /* Centers thumb on the track */
-  background-color: var(--thumb-colour);
-  height: var(--thumb-size);
-  width: var(--thumb-size);
-  border-radius: 50%;
-  position: relative;
-  z-index: 99;
-  pointer-events: all;
-}
-
-input[type='range']::-moz-range-thumb {
-  border: none; /*Removes extra border that FF applies*/
-  background-color: var(--thumb-colour); /*Removes default border-radius that FF applies*/
-  height: var(--thumb-size);
-  width: var(--thumb-size);
-  border-radius: 50%;
-  position: relative;
-  z-index: 99;
-  pointer-events: all;
-}
-
-// Focus Styles
-input[type='range']:focus {
-  outline: none;
-}
-
-input[type='range']:hover::-webkit-slider-thumb,
-input[type='range']:focus::-webkit-slider-thumb {
-  outline: var(--thumb-size-outline) solid var(--thumb-colour);
-}
-
-input[type='range']:active::-webkit-slider-thumb {
-  outline: var(--thumb-size-outline) solid var(--thumb-colour);
-}
-
-input[type='range']:hover::-moz-range-thumb,
-input[type='range']:focus::-moz-range-thumb {
-  outline: var(--thumb-size-outline) solid var(--thumb-colour);
-}
-input[type='range']:focus::-moz-range-thumb {
-  outline: var(--thumb-size-outline) solid var(--thumb-colour);
-}
-
-// #endregion
-
-// #region Hide buttons and pips
-.carousel__btns:has(~ .carousel__controls button:first-child:nth-child(1):last-child) {
-  display: none;
-}
-
-.carousel__controls:has(button:nth-child(5)) {
-  display: none;
-}
-.carousel__controls:has(button:nth-child(5)) ~ .carousel__progress {
-  display: block;
-}
-
-@container (min-width: 36em) {
-  :host([data-smcols='2']) .carousel__controls > button:not(:nth-child(odd)),
-  :host([data-smcols='3']) .carousel__controls > button:not(:nth-child(3n + 1)),
-  :host([data-smcols='4']) .carousel__controls > button:not(:nth-child(4n + 1)) {
-    display: none;
-  }
-
-  // Make sure that we dont just have one pip showing
-  :host([data-smcols='2']) .carousel__controls:has(button:first-child:nth-last-child(2)),
-  :host([data-smcols='3'])
-    .carousel__controls:has(:is(button:first-child:nth-last-child(2), button:first-child:nth-last-child(3))),
-  :host([data-smcols='4'])
-    .carousel__controls:has(
-      :is(
-        button:first-child:nth-last-child(2),
-        button:first-child:nth-last-child(3),
-        button:first-child:nth-last-child(4)
-      )
-    ),
-  :host([data-smcols='2']) .carousel__btns:has(~ .carousel__controls button:first-child:nth-last-child(2)),
-  :host([data-smcols='3']) .carousel__btns:has(~ .carousel__controls button:first-child:nth-last-child(2)),
-  :host([data-smcols='3']) .carousel__btns:has(~ .carousel__controls button:first-child:nth-last-child(3)),
-  :host([data-smcols='4']) .carousel__btns:has(~ .carousel__controls button:first-child:nth-last-child(2)),
-  :host([data-smcols='4']) .carousel__btns:has(~ .carousel__controls button:first-child:nth-last-child(3)),
-  :host([data-smcols='4']) .carousel__btns:has(~ .carousel__controls button:first-child:nth-last-child(4)) {
-    display: none;
-  }
-
-  // Show slider
-  :host([data-smcols]) .carousel__controls {
-    display: block;
-  }
-  :host([data-smcols]) .carousel__controls ~ .carousel__progress {
-    display: none;
-  }
-
-  :host([data-smcols='2']) .carousel__controls:has(button:nth-child(10)),
-  :host([data-smcols='3']) .carousel__controls:has(button:nth-child(15)),
-  :host([data-smcols='4']) .carousel__controls:has(button:nth-child(20)) {
-    display: none;
-  }
-
-  :host([data-smcols='2']) .carousel__controls:has(button:nth-child(10)) ~ .carousel__progress,
-  :host([data-smcols='3']) .carousel__controls:has(button:nth-child(15)) ~ .carousel__progress,
-  :host([data-smcols='4']) .carousel__controls:has(button:nth-child(20)) ~ .carousel__progress {
-    display: block;
-  }
-}
-
-@container (min-width: 62em) {
-  :host([data-mdcols]) .carousel__controls > button {
-    display: inline-block !important;
-  }
-
-  :host([data-mdcols]) .carousel__controls {
-    display: block !important;
-  }
-
-  :host([data-mdcols='2']) .carousel__controls > button:not(:nth-child(odd)),
-  :host([data-mdcols='3']) .carousel__controls > button:not(:nth-child(3n + 1)),
-  :host([data-mdcols='4']) .carousel__controls > button:not(:nth-child(4n + 1)),
-  :host([data-mdcols='5']) .carousel__controls > button:not(:nth-child(5n + 1)),
-  :host([data-mdcols='6']) .carousel__controls > button:not(:nth-child(6n + 1)) {
-    display: none !important;
-  }
-
-  // Make sure that we dont just have one pip showing
-  :host([data-mdcols='2']) .carousel__controls:has(button:first-child:nth-last-child(2)),
-  :host([data-mdcols='3'])
-    .carousel__controls:has(:is(button:first-child:nth-last-child(2), button:first-child:nth-last-child(3))),
-  :host([data-mdcols='4'])
-    .carousel__controls:has(
-      :is(
-        button:first-child:nth-last-child(2),
-        button:first-child:nth-last-child(3),
-        button:first-child:nth-last-child(4)
-      )
-    ),
-  :host([data-mdcols='5'])
-    .carousel__controls:has(
-      :is(
-        button:first-child:nth-last-child(2),
-        button:first-child:nth-last-child(3),
-        button:first-child:nth-last-child(4),
-        button:first-child:nth-last-child(5)
-      )
-    ),
-  :host([data-mdcols='6'])
-    .carousel__controls:has(
-      :is(
-        button:first-child:nth-last-child(2),
-        button:first-child:nth-last-child(3),
-        button:first-child:nth-last-child(4),
-        button:first-child:nth-last-child(5),
-        button:first-child:nth-last-child(6)
-      )
-    ),
-  :host([data-mdcols='2']) .carousel__btns:has(~ .carousel__controls button:first-child:nth-last-child(2)),
-  :host([data-mdcols='3']) .carousel__btns:has(~ .carousel__controls button:first-child:nth-last-child(2)),
-  :host([data-mdcols='3']) .carousel__btns:has(~ .carousel__controls button:first-child:nth-last-child(3)),
-  :host([data-mdcols='4']) .carousel__btns:has(~ .carousel__controls button:first-child:nth-last-child(2)),
-  :host([data-mdcols='4']) .carousel__btns:has(~ .carousel__controls button:first-child:nth-last-child(3)),
-  :host([data-mdcols='4'])
-    .carousel__btns:has(~ .carousel__controls button:first-child:nth-last-child(4))
-    :host([data-mdcols='5'])
-    .carousel__btns:has(~ .carousel__controls button:first-child:nth-last-child(2)),
-  :host([data-mdcols='5']) .carousel__btns:has(~ .carousel__controls button:first-child:nth-last-child(3)),
-  :host([data-mdcols='5']) .carousel__btns:has(~ .carousel__controls button:first-child:nth-last-child(4)),
-  :host([data-mdcols='5']) .carousel__btns:has(~ .carousel__controls button:first-child:nth-last-child(5)),
-  :host([data-mdcols='6']) .carousel__btns:has(~ .carousel__controls button:first-child:nth-last-child(2)),
-  :host([data-mdcols='6']) .carousel__btns:has(~ .carousel__controls button:first-child:nth-last-child(3)),
-  :host([data-mdcols='6']) .carousel__btns:has(~ .carousel__controls button:first-child:nth-last-child(4)),
-  :host([data-mdcols='6']) .carousel__btns:has(~ .carousel__controls button:first-child:nth-last-child(5)),
-  :host([data-mdcols='6']) .carousel__btns:has(~ .carousel__controls button:first-child:nth-last-child(6)) {
-    display: none !important;
-  }
-
-  // Show slider
-  :host([data-mdcols]) .carousel__controls {
-    display: block !important;
-  }
-  :host([data-mdcols]) .carousel__controls ~ .carousel__progress {
-    display: none !important;
-  }
-
-  :host([data-mdcols='2']) .carousel__controls:has(button:nth-child(10)),
-  :host([data-mdcols='3']) .carousel__controls:has(button:nth-child(15)),
-  :host([data-mdcols='4']) .carousel__controls:has(button:nth-child(20)),
-  :host([data-mdcols='5']) .carousel__controls:has(button:nth-child(25)),
-  :host([data-mdcols='6']) .carousel__controls:has(button:nth-child(30)) {
-    display: none !important;
-  }
-
-  :host([data-mdcols='2']) .carousel__controls:has(button:nth-child(10)) ~ .carousel__progress,
-  :host([data-mdcols='3']) .carousel__controls:has(button:nth-child(15)) ~ .carousel__progress,
-  :host([data-mdcols='4']) .carousel__controls:has(button:nth-child(20)) ~ .carousel__progress,
-  :host([data-mdcols='5']) .carousel__controls:has(button:nth-child(25)) ~ .carousel__progress,
-  :host([data-mdcols='6']) .carousel__controls:has(button:nth-child(30)) ~ .carousel__progress {
-    display: block !important;
-  }
-}
-
-:host(.hide-btns) .carousel__btns,
-:host(.hide-controls) .carousel__controls {
-  display: none;
-}
-// #endregion
-
-// #region thumbnails
-:host(.thumbnails) .carousel__controls {
-  display: flex !important;
-  flex-wrap: wrap;
-  max-width: 100%;
-  overflow: visible;
-
-  button {
-    padding: 0;
-    margin: 0 0.2rem 0.4rem;
-
-    width: 6rem;
-    height: auto;
-    aspect-ratio: var(--carousel-image-aspect-ratio, 3 / 2);
-
-    border-radius: 0;
-    position: relative;
-    border-radius: 0.25rem;
-
-    img {
-      position: absolute;
-      inset: 0;
-      height: 100%;
-      width: 100%;
-      object-fit: cover;
-      margin: 0;
-    }
-
-    &[aria-current] {
-      outline: 2px solid var(--colour-info);
-    }
-  }
-}
-
-:host(.thumbnails) .carousel {
-  .carousel__btns {
-    padding-bottom: 0.5rem;
-  }
-
-  .btn-next,
-  .btn-prev {
-    position: relative;
-    margin: 0 !important;
-  }
-
-  .carousel__progress {
-    display: none !important;
-  }
-}
-// #endregion
-
-// #region Turn carousel slide into image holder
-::slotted(div.image__wrapper) {
-  width: 100%;
-  aspect-ratio: var(--carousel-image-aspect-ratio, 3 / 2);
-  position: relative;
-}
-// #endregion
+@use '../_func' as *;
+@use '../elements/buttons' as *;
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+/* #region default carousel */
+
+:host {
+  display: block;
+  overflow: visible;
+  container-type: inline-size;
+}
+
+.carousel {
+  margin-inline: calc(var(--carousel-spacing, 1.5rem) * -1);
+  margin-bottom: 2rem;
+  display: block;
+  overflow: visible;
+
+  .carousel__wrapper {
+    position: relative;
+    overflow-x: clip;
+  }
+
+  .carousel__inner {
+    --gutter-x: 1rem;
+    overflow-x: auto;
+    padding-bottom: 1rem;
+    scroll-snap-type: x mandatory;
+  }
+
+  .carousel__content {
+    display: flex;
+    flex-wrap: nowrap !important;
+    margin-inline-end: 0;
+    padding-inline-start: var(--carousel-spacing, 1.5rem);
+    padding-inline-end: var(--carousel-spacing, 1.5rem);
+
+    margin-right: calc(-0.5 * var(--gutter-x));
+    margin-left: calc(-0.5 * var(--gutter-x));
+  }
+
+  .col > *:last-child {
+    margin-bottom: 0;
+    padding-bottom: 0;
+  }
+}
+
+::slotted(div) {
+  scroll-snap-align: start;
+  scroll-margin-left: calc(var(--carousel-spacing, 1.5rem) - 0.5rem);
+
+  flex-shrink: 0;
+  width: calc(100% + var(--last-item-extra, 0px));
+
+  padding-right: 0.5rem;
+  padding-left: 0.5rem;
+  margin-top: var(--gutter-y);
+}
+
+::slotted(div:last-child) {
+  padding-inline-end: 1.5rem;
+  --last-item-extra: 1rem;
+}
+
+@container (min-width: 36em) {
+  .carousel {
+    margin-inline: calc(var(--carousel-spacing, 2.5rem) * -1);
+
+    .carousel__content {
+      padding-inline-start: var(--carousel-spacing, 2.5rem);
+      padding-inline-end: var(--carousel-spacing, 2.5rem);
+    }
+  }
+
+  :host([data-smcols]) ::slotted(div) {
+    scroll-snap-align: unset;
+    flex: 0 0 auto;
+  }
+
+  :host([data-smcols='2']) ::slotted(div) {
+    width: calc(50% + var(--last-item-extra, 0px));
+  }
+
+  :host([data-smcols='3']) ::slotted(div) {
+    width: calc(33.3333333333% + var(--last-item-extra, 0px));
+  }
+  :host([data-smcols='4']) ::slotted(div) {
+    width: calc(25% + var(--last-item-extra, 0px));
+  }
+
+  :host([data-smcols='2']) ::slotted(div:nth-child(odd)),
+  :host([data-smcols='3']) ::slotted(div:nth-child(3n + 1)),
+  :host([data-smcols='4']) ::slotted(div:nth-child(4n + 1)) {
+    scroll-snap-align: start;
+  }
+
+  ::slotted(div) {
+    scroll-margin-left: calc(var(--carousel-spacing, 2.5rem) - 0.5rem);
+  }
+
+  ::slotted(div:last-child) {
+    padding-inline-end: 2.5rem;
+    --last-item-extra: 2rem;
+  }
+}
+
+@container (min-width: 62em) {
+  .carousel {
+    margin-inline: 0;
+    position: relative;
+  }
+  .carousel__wrapper {
+    overflow: hidden;
+
+    margin-inline: calc(-0.5 * 1rem);
+  }
+  .carousel__inner {
+  }
+  .carousel__content {
+    padding-inline: 0 !important;
+    margin-inline: 0 !important;
+  }
+
+  ::slotted(div) {
+    margin-left: 0;
+    scroll-margin-left: 0;
+  }
+
+  ::slotted(div:last-child) {
+    padding-inline-end: calc(0.5 * 1rem);
+    --last-item-extra: 0px;
+  }
+
+  :host([data-mdcols]) ::slotted(div) {
+    scroll-snap-align: unset;
+    flex: 0 0 auto;
+  }
+
+  :host([data-mdcols='2']) ::slotted(div) {
+    width: calc(50% + var(--last-item-extra, 0px));
+  }
+
+  :host([data-mdcols='3']) ::slotted(div) {
+    width: calc(33.3333333333% + var(--last-item-extra, 0px));
+  }
+  :host([data-mdcols='4']) ::slotted(div) {
+    width: calc(25% + var(--last-item-extra, 0px));
+  }
+  :host([data-mdcols='5']) ::slotted(div) {
+    width: calc(20% + var(--last-item-extra, 0px));
+  }
+  :host([data-mdcols='6']) ::slotted(div) {
+    width: calc(16.6666666667% + var(--last-item-extra, 0px));
+  }
+
+  :host([data-mdcols='2']) ::slotted(div:nth-child(odd)),
+  :host([data-mdcols='3']) ::slotted(div:nth-child(3n + 1)),
+  :host([data-mdcols='4']) ::slotted(div:nth-child(4n + 1)),
+  :host([data-mdcols='5']) ::slotted(div:nth-child(5n + 1)),
+  :host([data-mdcols='6']) ::slotted(div:nth-child(6n + 1)) {
+    scroll-snap-align: start;
+  }
+}
+
+/* #endregion */
+
+/* #region Remove the scrollbar */
+.carousel__inner {
+  /*  FireFox */
+  scrollbar-width: none;
+  /*  IE10+ */
+  -ms-overflow-style: none;
+}
+
+.carousel__inner::-webkit-scrollbar {
+  /*  Chrome, Safari, Edge */
+  display: none;
+}
+/* #endregion */
+
+/* #region Direction button */
+
+.carousel__btns {
+  text-align: center;
+  padding-bottom: 0.5rem;
+}
+
+.btn-next,
+.btn-prev {
+  margin: 0 !important;
+
+  &:after {
+    content: '';
+    position: absolute;
+    right: 0;
+    top: 0;
+    height: 100%;
+    width: 100%;
+    background: currentColor;
+    mask-image:  var(--icon-arrow);
+    mask-size: 50%;
+    mask-repeat: no-repeat;
+    mask-position: 50% 60%;
+    -webkit-mask-image:  var(--icon-arrow);
+    -webkit-mask-size: 50%;
+    -webkit-mask-repeat: no-repeat;
+    -webkit-mask-position: 55% 50%;
+    transform: rotate(0deg);
+  }
+}
+
+.btn-prev {
+  &:after {
+    transform: rotate(180deg);
+  }
+}
+
+@container (min-width: 62em) {
+  .carousel__btns {
+    padding-bottom: 0;
+  }
+  .btn-prev {
+    position: absolute;
+    top: 50%;
+    left: 0;
+    margin: -2rem 0 0 -3rem !important;
+  }
+  .btn-next {
+    position: absolute;
+    top: 50%;
+    right: 0;
+    margin: -2rem -3rem 0 0 !important;
+  }
+}
+
+/* #endregion */
+
+/* #region carousel controls/pips */
+.carousel .carousel__controls {
+  overflow: hidden;
+  margin-inline: auto;
+  margin-bottom: 1rem;
+  text-align: center;
+  max-width: 30rem;
+
+  @container (min-width: 36em) {
+    width: 100%;
+  }
+
+  button {
+    padding: 0;
+    margin: 0 0.2rem 0.2rem;
+    border: none;
+  }
+
+  button {
+    width: 0.5rem;
+    height: 0.5rem;
+    min-height: 0.5rem;
+    border-radius: 50%;
+    text-indent: -50rem;
+    overflow: hidden;
+    background: #a5ecfd;
+    margin-inline: 0.375rem; /* 6 */
+    cursor: pointer;
+    border: none;
+
+    &:hover {
+      background-color: var(--colour-info);
+    }
+
+    &:before {
+      display: none;
+    }
+  }
+
+  button:first-child:last-child {
+    display: none;
+  }
+}
+
+.carousel__controls > button[aria-current] {
+  --colour-active-thumbnail: var(--colour-info);
+  border-color: var(--colour-active-thumbnail);
+  background: var(--colour-info);
+
+  width: 1rem;
+  height: 1rem;
+  min-height: 1rem;
+  margin-inline: 0.125rem; /* 2 */
+
+  &:hover {
+    background: var(--colour-info);
+  }
+}
+/* #endregion */
+
+/* #region progress bar */
+.carousel__progress {
+  text-align: center;
+  margin-bottom: 1rem;
+  display: none;
+}
+
+input[type='range'] {
+  --track-size: 0.5rem;
+  --track-colour: #a5ecfd;
+  --thumb-colour: var(--colour-info);
+  --thumb-size: 1rem;
+  --thumb-size-outline: 0;
+  width: 90%;
+  max-width: 10.75rem; /* 172 */
+
+  background: transparent;
+  cursor: pointer;
+  margin: 0;
+  height: 1rem;
+  border-radius: 50%;
+  accent-color: var(--thumb-colour);
+  -webkit-appearance: none;
+  appearance: none;
+}
+
+/*  Track Styles */
+input[type='range']::-webkit-slider-runnable-track {
+  background: var(--track-colour);
+  height: var(--track-size);
+  border-radius: 0.5625rem; /* 9 */
+}
+
+input[type='range']::-moz-range-track {
+  background: var(--track-colour);
+  height: var(--track-size);
+  border-radius: 0.5625rem; /* 9 */
+}
+
+/*  Extended track functionality */
+input[type='range']::-webkit-slider-runnable-track {
+  background: linear-gradient(
+    to right,
+    var(--track-colour),
+    var(--track-colour) var(--start-percent, 0%),
+    var(--thumb-colour) var(--start-percent, 0%),
+    var(--thumb-colour) calc(var(--percent, 0%)),
+    var(--track-colour) calc(var(--percent, 0%))
+  );
+}
+
+input[type='range']::-moz-range-track {
+  background: linear-gradient(
+    to right,
+    var(--track-colour),
+    var(--track-colour) var(--start-percent, 0%),
+    var(--thumb-colour) var(--start-percent, 0%),
+    var(--thumb-colour) calc(var(--percent, 0%)),
+    var(--track-colour) calc(var(--percent, 0%))
+  );
+}
+
+/*  Thumb Styles */
+input[type='range']::-webkit-slider-thumb {
+  -webkit-appearance: none; /* Override default look */
+  appearance: none;
+  margin-top: -0.25rem; /* Centers thumb on the track */
+  background-color: var(--thumb-colour);
+  height: var(--thumb-size);
+  width: var(--thumb-size);
+  border-radius: 50%;
+  position: relative;
+  z-index: 99;
+  pointer-events: all;
+}
+
+input[type='range']::-moz-range-thumb {
+  border: none; /*Removes extra border that FF applies*/
+  background-color: var(--thumb-colour); /*Removes default border-radius that FF applies*/
+  height: var(--thumb-size);
+  width: var(--thumb-size);
+  border-radius: 50%;
+  position: relative;
+  z-index: 99;
+  pointer-events: all;
+}
+
+/*  Focus Styles */
+input[type='range']:focus {
+  outline: none;
+}
+
+input[type='range']:hover::-webkit-slider-thumb,
+input[type='range']:focus::-webkit-slider-thumb {
+  outline: var(--thumb-size-outline) solid var(--thumb-colour);
+}
+
+input[type='range']:active::-webkit-slider-thumb {
+  outline: var(--thumb-size-outline) solid var(--thumb-colour);
+}
+
+input[type='range']:hover::-moz-range-thumb,
+input[type='range']:focus::-moz-range-thumb {
+  outline: var(--thumb-size-outline) solid var(--thumb-colour);
+}
+input[type='range']:focus::-moz-range-thumb {
+  outline: var(--thumb-size-outline) solid var(--thumb-colour);
+}
+
+/* #endregion */
+
+/* #region Hide buttons and pips */
+.carousel__btns:has(~ .carousel__controls button:first-child:nth-child(1):last-child) {
+  display: none;
+}
+
+.carousel__controls:has(button:nth-child(5)) {
+  display: none;
+}
+.carousel__controls:has(button:nth-child(5)) ~ .carousel__progress {
+  display: block;
+}
+
+@container (min-width: 36em) {
+  :host([data-smcols='2']) .carousel__controls > button:not(:nth-child(odd)),
+  :host([data-smcols='3']) .carousel__controls > button:not(:nth-child(3n + 1)),
+  :host([data-smcols='4']) .carousel__controls > button:not(:nth-child(4n + 1)) {
+    display: none;
+  }
+
+  /*  Make sure that we dont just have one pip showing */
+  :host([data-smcols='2']) .carousel__controls:has(button:first-child:nth-last-child(2)),
+  :host([data-smcols='3'])
+    .carousel__controls:has(:is(button:first-child:nth-last-child(2), button:first-child:nth-last-child(3))),
+  :host([data-smcols='4'])
+    .carousel__controls:has(
+      :is(
+        button:first-child:nth-last-child(2),
+        button:first-child:nth-last-child(3),
+        button:first-child:nth-last-child(4)
+      )
+    ),
+  :host([data-smcols='2']) .carousel__btns:has(~ .carousel__controls button:first-child:nth-last-child(2)),
+  :host([data-smcols='3']) .carousel__btns:has(~ .carousel__controls button:first-child:nth-last-child(2)),
+  :host([data-smcols='3']) .carousel__btns:has(~ .carousel__controls button:first-child:nth-last-child(3)),
+  :host([data-smcols='4']) .carousel__btns:has(~ .carousel__controls button:first-child:nth-last-child(2)),
+  :host([data-smcols='4']) .carousel__btns:has(~ .carousel__controls button:first-child:nth-last-child(3)),
+  :host([data-smcols='4']) .carousel__btns:has(~ .carousel__controls button:first-child:nth-last-child(4)) {
+    display: none;
+  }
+
+  /*  Show slider */
+  :host([data-smcols]) .carousel__controls {
+    display: block;
+  }
+  :host([data-smcols]) .carousel__controls ~ .carousel__progress {
+    display: none;
+  }
+
+  :host([data-smcols='2']) .carousel__controls:has(button:nth-child(10)),
+  :host([data-smcols='3']) .carousel__controls:has(button:nth-child(15)),
+  :host([data-smcols='4']) .carousel__controls:has(button:nth-child(20)) {
+    display: none;
+  }
+
+  :host([data-smcols='2']) .carousel__controls:has(button:nth-child(10)) ~ .carousel__progress,
+  :host([data-smcols='3']) .carousel__controls:has(button:nth-child(15)) ~ .carousel__progress,
+  :host([data-smcols='4']) .carousel__controls:has(button:nth-child(20)) ~ .carousel__progress {
+    display: block;
+  }
+}
+
+@container (min-width: 62em) {
+  :host([data-mdcols]) .carousel__controls > button {
+    display: inline-block !important;
+  }
+
+  :host([data-mdcols]) .carousel__controls {
+    display: block !important;
+  }
+
+  :host([data-mdcols='2']) .carousel__controls > button:not(:nth-child(odd)),
+  :host([data-mdcols='3']) .carousel__controls > button:not(:nth-child(3n + 1)),
+  :host([data-mdcols='4']) .carousel__controls > button:not(:nth-child(4n + 1)),
+  :host([data-mdcols='5']) .carousel__controls > button:not(:nth-child(5n + 1)),
+  :host([data-mdcols='6']) .carousel__controls > button:not(:nth-child(6n + 1)) {
+    display: none !important;
+  }
+
+  /*  Make sure that we dont just have one pip showing */
+  :host([data-mdcols='2']) .carousel__controls:has(button:first-child:nth-last-child(2)),
+  :host([data-mdcols='3'])
+    .carousel__controls:has(:is(button:first-child:nth-last-child(2), button:first-child:nth-last-child(3))),
+  :host([data-mdcols='4'])
+    .carousel__controls:has(
+      :is(
+        button:first-child:nth-last-child(2),
+        button:first-child:nth-last-child(3),
+        button:first-child:nth-last-child(4)
+      )
+    ),
+  :host([data-mdcols='5'])
+    .carousel__controls:has(
+      :is(
+        button:first-child:nth-last-child(2),
+        button:first-child:nth-last-child(3),
+        button:first-child:nth-last-child(4),
+        button:first-child:nth-last-child(5)
+      )
+    ),
+  :host([data-mdcols='6'])
+    .carousel__controls:has(
+      :is(
+        button:first-child:nth-last-child(2),
+        button:first-child:nth-last-child(3),
+        button:first-child:nth-last-child(4),
+        button:first-child:nth-last-child(5),
+        button:first-child:nth-last-child(6)
+      )
+    ),
+  :host([data-mdcols='2']) .carousel__btns:has(~ .carousel__controls button:first-child:nth-last-child(2)),
+  :host([data-mdcols='3']) .carousel__btns:has(~ .carousel__controls button:first-child:nth-last-child(2)),
+  :host([data-mdcols='3']) .carousel__btns:has(~ .carousel__controls button:first-child:nth-last-child(3)),
+  :host([data-mdcols='4']) .carousel__btns:has(~ .carousel__controls button:first-child:nth-last-child(2)),
+  :host([data-mdcols='4']) .carousel__btns:has(~ .carousel__controls button:first-child:nth-last-child(3)),
+  :host([data-mdcols='4'])
+    .carousel__btns:has(~ .carousel__controls button:first-child:nth-last-child(4))
+    :host([data-mdcols='5'])
+    .carousel__btns:has(~ .carousel__controls button:first-child:nth-last-child(2)),
+  :host([data-mdcols='5']) .carousel__btns:has(~ .carousel__controls button:first-child:nth-last-child(3)),
+  :host([data-mdcols='5']) .carousel__btns:has(~ .carousel__controls button:first-child:nth-last-child(4)),
+  :host([data-mdcols='5']) .carousel__btns:has(~ .carousel__controls button:first-child:nth-last-child(5)),
+  :host([data-mdcols='6']) .carousel__btns:has(~ .carousel__controls button:first-child:nth-last-child(2)),
+  :host([data-mdcols='6']) .carousel__btns:has(~ .carousel__controls button:first-child:nth-last-child(3)),
+  :host([data-mdcols='6']) .carousel__btns:has(~ .carousel__controls button:first-child:nth-last-child(4)),
+  :host([data-mdcols='6']) .carousel__btns:has(~ .carousel__controls button:first-child:nth-last-child(5)),
+  :host([data-mdcols='6']) .carousel__btns:has(~ .carousel__controls button:first-child:nth-last-child(6)) {
+    display: none !important;
+  }
+
+  /*  Show slider */
+  :host([data-mdcols]) .carousel__controls {
+    display: block !important;
+  }
+  :host([data-mdcols]) .carousel__controls ~ .carousel__progress {
+    display: none !important;
+  }
+
+  :host([data-mdcols='2']) .carousel__controls:has(button:nth-child(10)),
+  :host([data-mdcols='3']) .carousel__controls:has(button:nth-child(15)),
+  :host([data-mdcols='4']) .carousel__controls:has(button:nth-child(20)),
+  :host([data-mdcols='5']) .carousel__controls:has(button:nth-child(25)),
+  :host([data-mdcols='6']) .carousel__controls:has(button:nth-child(30)) {
+    display: none !important;
+  }
+
+  :host([data-mdcols='2']) .carousel__controls:has(button:nth-child(10)) ~ .carousel__progress,
+  :host([data-mdcols='3']) .carousel__controls:has(button:nth-child(15)) ~ .carousel__progress,
+  :host([data-mdcols='4']) .carousel__controls:has(button:nth-child(20)) ~ .carousel__progress,
+  :host([data-mdcols='5']) .carousel__controls:has(button:nth-child(25)) ~ .carousel__progress,
+  :host([data-mdcols='6']) .carousel__controls:has(button:nth-child(30)) ~ .carousel__progress {
+    display: block !important;
+  }
+}
+
+:host(.hide-btns) .carousel__btns,
+:host(.hide-controls) .carousel__controls {
+  display: none;
+}
+/* #endregion */
+
+/* #region thumbnails */
+:host(.thumbnails) .carousel__controls {
+  display: flex !important;
+  flex-wrap: wrap;
+  max-width: 100%;
+  overflow: visible;
+
+  button {
+    padding: 0;
+    margin: 0 0.2rem 0.4rem;
+
+    width: 6rem;
+    height: auto;
+    aspect-ratio: var(--carousel-image-aspect-ratio, 3 / 2);
+
+    border-radius: 0;
+    position: relative;
+    border-radius: 0.25rem;
+
+    img {
+      position: absolute;
+      inset: 0;
+      height: 100%;
+      width: 100%;
+      object-fit: cover;
+      margin: 0;
+    }
+
+    &[aria-current] {
+      outline: 2px solid var(--colour-info);
+    }
+  }
+}
+
+:host(.thumbnails) .carousel {
+  .carousel__btns {
+    padding-bottom: 0.5rem;
+  }
+
+  .btn-next,
+  .btn-prev {
+    position: relative;
+    margin: 0 !important;
+  }
+
+  .carousel__progress {
+    display: none !important;
+  }
+}
+/* #endregion */
+
+/* #region Turn carousel slide into image holder */
+::slotted(div.image__wrapper) {
+  width: 100%;
+  aspect-ratio: var(--carousel-image-aspect-ratio, 3 / 2);
+  position: relative;
+}
+/* #endregion */