i-carousel{
  display: block;
  container-type: inline-size;
}
i-carousel-header{
  display: flex;
  flex-wrap: wrap;
  justify-content:space-between;
  gap: 0 1em;
  padding: 1em 1.5em;
  border-bottom: 1px solid rgba(var(--theme-text_color), 0.2);
}

i-carousel-header :where(h1, h2, h3, h4, h5, h6){
  margin: 0;
  font-weight: 500;
  font-size: 24px;
}

i-carousel > ul{
  --carousel--size: 100%;
  --gap: 1px;
  --carousel--scroll: 1;
  --carousel--pull: 0px;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  gap: var(--gap);
  overflow-x: scroll;
  overscroll-behavior-x: contain;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

@container (min-width: 560px){
  i-carousel > ul{
    --carousel--size: calc(100% / 2);
  }
}
@container (min-width: 840px){
  i-carousel > ul{
    --carousel--size: calc(100% / 3);
  }
}
@container (min-width: 1120px){
  i-carousel > ul{
    --carousel--size: calc(100% / 4);
  }
}

i-carousel > ul::-webkit-scrollbar {
	-webkit-appearance: none;
	height: 0px;
}

i-carousel > ul > li{
  flex: 0 0 auto;
  flex-basis: min(var(--carousel--size), 100%);
  scroll-snap-align: start;
}

/* Navigation buttons */
i-carousel-controls{
	display: flex;
	justify-content: center;
	font-size: 16px;
    margin-inline-end: -0.5em;
    gap: 0.3em;
}

	i-carousel + i-carousel-controls,
	i-carousel-controls + i-carousel{
		margin-top: 2em;
	}

i-carousel-controls button{
	--co: rgb(var(--theme-link_hover));
  	all: unset;
	display: grid;
	place-content: center;
	min-height: max(34px,2em);
	min-width: max(34px,2.5em);
	border-radius: 6px;
	color: var(--co);
  	background: color-mix(in srgb, var(--co) 5%, transparent);
    cursor: pointer;
	touch-action: manipulation;
}

@media (hover: hover){
	i-carousel-controls button:hover{
		background: color-mix(in srgb, var(--co) 15%, transparent);
	}
}

i-carousel-controls button::before{
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

	:is([dir="ltr"] [data-carousel-arrow="prev"], [dir="rtl"] [data-carousel-arrow="next"])::before{
		content: "\f104";
	}

	:is([dir="ltr"] [data-carousel-arrow="next"], [dir="rtl"] [data-carousel-arrow="prev"])::before{
		content: "\f105";
	}



/* Flex layout ensures the layout doesn't stretch when carousels are used */
@media (min-width: 980px){

  #ipsLayout_contentWrapper{
    display: flex;
    flex-wrap: wrap;
  }

  #ipsLayout_mainArea{
    flex: 999 1 50%;
    min-width: 0;
  }

  #ipsLayout_sidebar{
    flex: 0 0 400px;
    max-width: none;
  }

  .ipsBreadcrumb{
    flex: 1 1 100%;
  }
}