/* Общие настройки для всех hover-эффектов */
.hover-effect img {
    transition: transform 0.3s ease, filter 0.3s ease, opacity 0.3s ease;
}

/* 1. Zoom In */
.hover-effect.zoom img:hover {
    transform: scale(1.05);
}

/* 2. Rotate */
.hover-effect.rotate img:hover {
    transform: rotate(3deg) scale(1.05);
}

/* 3. Brightness (ярче при наведении) */
.hover-effect.brightness img:hover {
    filter: brightness(1.2);
}

/* 4. Grayscale → возвращение в цвет */
.hover-effect.grayscale img {
    filter: grayscale(100%);
}
.hover-effect.grayscale img:hover {
    filter: grayscale(0%);
}

/* 5. Opacity / Fade */
.hover-effect.fade img:hover {
    opacity: 0.8;
}

.center-addon {
  display: flex;
  justify-content: center;
  text-align: center;
}




.hover-border img {
  transition: all 0.3s ease; /* плавный переход */
  border: 2px solid transparent; /* изначально рамка прозрачная */  
}

.hover-border img:hover {
  border-color: #37424a; /* цвет рамки при наведении */
  /*transform: scale(1.01); /* опционально: лёгкий зум */
}