.container-fluid {
  height: 250px;
  position: relative;
  background: transparent;
  overflow: hidden;
}

.image-container img {
  position: absolute;
  width: 150px;
  height: 150px;
  opacity: 0;
  animation: fadeInOut 6s infinite;
}

@keyframes fadeInOut {
  0%,
  100% {
    opacity: 0;
  }
  20%,
  80% {
    opacity: 1;
  }
}

.banner {
  position: relative;
  max-height: 220px;
  overflow: hidden;
  background-color: #eee;
}

.banner .container {
  position: absolute;
  inset: 0;
}

.container-media {
  z-index: 2;
  margin: 0;
}

.container-bg {
  z-index: 3;
  pointer-events: none;
  background-image: url('img/about/powerline-about-3.png');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.35;
  mix-blend-mode: normal;
}

.photo {
  position: absolute;
  width: 150px;
  height: 150px;
  object-fit: cover;
  border-radius: 18px;
  background: #fff;
  outline: 1px solid rgba(0, 0, 0, 0.08);
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.18)) saturate(1.05) contrast(1.02);
  transform: translateZ(0) rotate(var(--rot, 0deg)) scale(1);
  transform-origin: center center;
  opacity: 0;
  animation: photoIn 0.9s cubic-bezier(0.2, 0.6, 0.2, 1) forwards;
}

.photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.35), transparent 40%);
  mix-blend-mode: soft-light;
  border-radius: inherit;
  pointer-events: none;
}

.photo::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 22px;
  box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.85);
  pointer-events: none;
}

.photo[data-slot='0'] {
  --rot: -3deg;
  z-index: 3;
}

.photo[data-slot='1'] {
  --rot: 2deg;
  z-index: 5;
}

.photo[data-slot='2'] {
  --rot: -1deg;
  z-index: 4;
}

.photo[data-slot='3'] {
  --rot: 3deg;
  z-index: 2;
}

@media (hover: hover) {
  .photo {
    transition:
      transform 0.25s ease,
      filter 0.25s ease;
  }
  .photo:hover {
    transform: translateY(-6px) rotate(var(--rot, 0deg)) scale(1.02);
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.38)) saturate(1.08);
  }
}

.decor {
  position: absolute;
  pointer-events: none;
  filter: blur(40px) opacity(0.5);
}

.decor--1 {
  width: 420px;
  height: 420px;
  left: -80px;
  top: -60px;
  background: radial-gradient(circle at 30% 30%, #ffa29c, transparent 60%);
}

.decor--2 {
  width: 480px;
  height: 380px;
  right: -40px;
  bottom: -40px;
  background: radial-gradient(circle at 70% 70%, #3daaff, transparent 60%);
}