.categories__box-button p::before {
	display: none;
}

.categories__box--one .categories__box-image {
	width: auto;
	height: auto;
	margin: 0 auto;
	margin-top: auto;
}

.categories__box--four .categories__box-image {
	margin-top: -1.5rem;
	margin-left: auto;
	width: 20.9rem;
	height: 14.9rem;
}

.categories__box--five .categories__box-image {
	margin: 0 auto;
	margin-top: auto;
	width: 27rem;
	height: 14.9rem;
}

.categories__box--two .categories__box-image {
	width: 19.6rem;
	height: 14.9rem;
	margin-top: -0.5rem;
	margin-right: -3rem;
}

.categories__box--three .categories__box-image {
	width: 20.9rem;
	height: 14.9rem;
	margin-right: -3rem;
	margin-top: -1.5rem;
}

.categories__box--eleven .categories__box-image {
	width: 27.9rem;
	height: 19.9rem;
	margin-top: -2.5rem;
	margin-left: auto;
}

.categories__box--twelve .categories__box-image {
	width: 27.9rem;
	height: 14.9rem;
	margin-top: -2.5rem;
	margin-left: auto;
}

.categories__box-button {
	width: 100% !important;
	display: flex;
	justify-content: center;
	font-family: Nunito Sans;
	font-size: 20px !important;
}

.categories__box-button p::before {
	display: none;
}

.categories__box--one .categories__box-image {
	width: auto;
	height: auto;
	margin: 0 auto;
	margin-top: auto;
}

.categories__box--four .categories__box-image {
	margin-top: -1.5rem;
	margin-left: auto;
	width: 20.9rem;
	height: 14.9rem;
}

.categories__box--five .categories__box-image {
	margin: 0 auto;
	margin-top: auto;
	width: 27rem;
	height: 14.9rem;
}

.categories__box--two .categories__box-image {
	width: 19.6rem;
	height: 14.9rem;
	margin-top: -0.5rem;
	margin-right: -3rem;
}

.categories__box--three .categories__box-image {
	width: 20.9rem;
	height: 14.9rem;
	margin-right: -3rem;
	margin-top: -1.5rem;
}

.categories__box--eleven .categories__box-image {
	width: 27.9rem;
	height: 19.9rem;
	margin-top: -2.5rem;
	margin-left: auto;
}

.categories__box--twelve .categories__box-image {
	width: 27.9rem;
	height: 14.9rem;
	margin-top: -2.5rem;
	margin-left: auto;
}

.categories__box-image {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.categories__box-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: opacity 0.05s ease-in-out;
}

/* Стили для блоков БЕЗ анимации */
.categories__box-image.no-animation img {
    opacity: 1 !important;
    transition: none !important;
}

.categories__box:hover .categories__box-image.no-animation img {
    opacity: 1 !important;
}

/* Стили для блоков С анимацией */
.categories__box-image.has-animation img {
    opacity: 0;
}

.categories__box-image.has-animation img:nth-child(1) {
    opacity: 1;
}

/* Анимация при наведении - прямой порядок */
.categories__box:hover .categories__box-image.has-animation img:nth-child(1) {
    opacity: 0;
    transition: opacity 0.05s ease-in-out 0s;
}

.categories__box:hover .categories__box-image.has-animation img:nth-child(2) {
    opacity: 1;
    transition: opacity 0.05s ease-in-out 0s; /* Убираем задержку для второго кадра */
}

.categories__box:hover .categories__box-image.has-animation img:nth-child(3) {
    opacity: 1;
    transition: opacity 0.05s ease-in-out 0.05s; /* Третий кадр появляется сразу после исчезновения первого */
}

/* Анимация при уходе курсора - обратный порядок */
.reverse-animation:not(:hover) .categories__box-image.has-animation img:nth-child(1) {
    opacity: 1;
    transition: opacity 0.05s ease-in-out 0.05s; /* Первый кадр появляется сразу после исчезновения третьего */
}

.reverse-animation:not(:hover) .categories__box-image.has-animation img:nth-child(2) {
        opacity: 1;
    transition: opacity 0.05s ease-in-out 0s; /* Убираем задержку для второго кадра */
}

.reverse-animation:not(:hover) .categories__box-image.has-animation img:nth-child(3) {
    opacity: 0;
     transition: opacity 0.05s ease-in-out 0s; 
}

/* Гарантируем, что всегда виден хотя бы один кадр */
.categories__box-image.has-animation img:nth-child(1),
.categories__box:hover .categories__box-image.has-animation img:nth-child(2),
.categories__box:hover .categories__box-image.has-animation img:nth-child(3) {
    opacity: 1;
}