.item {
 display: none;
 width: 100%;
 height: 100%;
 position: absolute;
 top: 0; 
 left: 0;
 overflow: hidden;
background-color: var(--background-color);
}

.item.active {
 display: block;
}

.item .title {
 font-size: 12em;
 color: #fff;
 font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif, sans-serif;
 font-weight: bold;
text-align: center;
top: auto;
position: absolute;
left: 50%;
top: 50%;

transform: translate(-50%, -50%);
z-index: 3;
}

.item .fruta {
  width: auto;
  max-width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}

.item .refri {
 z-index: 4;
 width: 600px;
 position: absolute;
 left: 50%;
 top: 50%;
 transform: translate(-50%, -50%);
}
 
#prev, #next {
 position: absolute;
 top: 50%;
 transform: translateY(-50%);
 width: 50px;
 height: 50px;
 background-color: #eee9;
 border: 1px solid #eee9;
 color: #eee;
 font-size: x-large;
 font-family: monospace;
 cursor: pointer;
 z-index: 4; border-radius: 50%;
}

#prev {
 left: 30px;
}

#next {
 right: 30px;
}

@keyframes toActive {
  from {
    top: 100%;
    opacity: 0;
  }
  to {
    top: 50%;
    opacity: 1;
  }
}

.item.active img.fruta {
  animation: toActive 0.5s ease-out forwards;
}

.item.active .title {
  animation: toActive 0.5s ease-out forwards;
}