:host {

  display: block;
  position: relative;
	overflow: hidden;
	user-select: none;

  --black: #000;
  --dark: #2D2D2C;
  --white: #fff;
  --light: #CAC3BD;
  --brown: #57514E;
  --green: #233D1A;
}

:host:after {

	z-index: 2;
  opacity: 0;
}

:host([loading]) {

	pointer-events: none;
}

:host([loading]):before {

	background-color: var(--light);
}

:host([loading]):after {

  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -2rem 0 0 -2rem;
  border: 0.75rem solid var(--light);
  border-top: 0.75rem solid var(--green);
  border-radius: 50%;
  width: 5rem;
  height: 5rem;
  animation: spin 1s linear infinite;
  opacity: 1;
}

@keyframes spin {

  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

:host:before {

	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: transparent;
	transition: 0.4s ease all;
	z-index: 1;
	pointer-events: none;
}

svg {

  display: block;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  z-index: 1;
  /*padding: 2rem;*/
  padding: 5%;
  cursor: pointer;
  transition: 0.2s ease opacity;
  width: 3%;
  max-width: clamp(1.185rem, 3vw, 2.25rem);
}

:host([loading]) svg {

  opacity: 0;
  pointer-events: none;
}

svg:last-of-type {

  left: auto;
  right: 0;
}

svg.hide {

  opacity: 0;
  pointer-events: none;
}

slot {

  display: none;
}

.wrapper {

  aspect-ratio: 16 / 9;
}

.container {

	--n: 1;
	display: flex;
	align-items: stretch;
	width: 100%;
	width: calc(var(--n) * 100%);
  height: 100%;
	overflow: hidden;
  margin: 0;
  padding: 0;
	transform: translate(calc(var(--i, 0) / var(--n) * -100%));
	transform-style: preserve-3d;
}

.container figure {

  display: block;
	width: 100%;
	width: calc(100% / var(--n));
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
  margin: 0;
  padding: 0;
}

.container.anim {

	pointer-events: none;
	transition: transform 0.8s ease;
}

@media screen and (pointer: fine) {

  svg:hover {

    opacity: 0.5;
  }
}

@media screen and (orientation: portrait) {

  :host(.full) .wrapper {

    aspect-ratio: 1 / 1;
  }

  /*.container {

    height: 80vw;
  }*/
}