:host {
  display: block; width: 100%; height: 500px; box-sizing: border-box; --transition-seconds: 6s; --z-index: 100
}
.container {
  width: 100%; height: 100%; display: block !important; position: relative; z-index: var(--z-index)
}
.container div.images {
  width: 100%; height: 100%; overflow: hidden; position: absolute; top: 0px; left: 0px; z-index: 100
}
.container div.images div.item {
  width: 100%; height: 100%; position: absolute; background: none center center no-repeat; background-size: cover; transform: scale(1); top: 0px; left: 0px; z-index: 100
}
.container div.images div.item.on {
  transform: scale(1.2); z-index: 150; transition: transform var(--transition-seconds) linear
}
.container div.images div.item.on.out {
  transform: scale(1.3); opacity: 0; z-index: 200; transition: transform calc(var(--transition-seconds) / 2) linear, opacity calc(var(--transition-seconds) / 2) ease
}
.container div.content {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; position: relative; z-index: 200
}