/* === Общие стили для контейнеров === */
.rol1, .rol2, .rol3, .rol4 {
    position: absolute;
    overflow: hidden;
    width: 200px;
    height: 300px;
}

/* Скрываем оригинальное изображение */
.rol1 .tn-atom__img,
.rol2 .tn-atom__img,
.rol3 .tn-atom__img,
.rol4 .tn-atom__img {
    opacity: 0;
}

/* === Общая структура половин изображения === */
.rol1 .tn-atom::before,
.rol1 .tn-atom::after,
.rol2 .tn-atom::before,
.rol2 .tn-atom::after,
.rol3 .tn-atom::before,
.rol3 .tn-atom::after,
.rol4 .tn-atom::before,
.rol4 .tn-atom::after {
    content: "";
    position: absolute;
    top: 0;
    width: 50%;
    height: 100%;
    background-size: 200% 100%;
    transition: transform 0.8s ease-in-out;
}

/* Левая половина */
.rol1 .tn-atom::before,
.rol2 .tn-atom::before,
.rol3 .tn-atom::before,
.rol4 .tn-atom::before {
    left: 0;
    transform-origin: left;
    background-position: left;
}

/* Правая половина */
.rol1 .tn-atom::after,
.rol2 .tn-atom::after,
.rol3 .tn-atom::after,
.rol4 .tn-atom::after {
    right: 0;
    transform-origin: right;
    background-position: right;
}

/* === Состояние "открыто" (при наведении или при .active) === */
.rol1.open .tn-atom::before,
.rol2.open .tn-atom::before,
.rol3.open .tn-atom::before,
.rol4.open .tn-atom::before {
    transform: translateX(-100%);
}

.rol1.open .tn-atom::after,
.rol2.open .tn-atom::after,
.rol3.open .tn-atom::after,
.rol4.open .tn-atom::after {
    transform: translateX(100%);
}


/* === Мобильная версия === */
@media (max-width: 768px) {
    .rol1, .rol2, .rol3, .rol4 {
        position: absolute;
    }
}





/* Специфичные стили для каждой картинки */

/* rol1: Стили для первой картинки */
.rol1 .tn-atom:before, .rol1 .tn-atom:after {
    background-image: url('https://static.tildacdn.com/tild6664-3266-4661-b435-313463313637/generated_image_8838.png'); /* Первая картинка */
}
/* rol2: Стили для второй картинки */
.rol2 .tn-atom:before, .rol2 .tn-atom:after {
    background-image: url('https://static.tildacdn.com/tild3265-6330-4662-a463-363836316332/generated_image_5c0b.png'); /* Вторая картинка */
}
/* rol3: Стили для третьей картинки */
.rol3 .tn-atom:before, .rol3 .tn-atom:after {
    background-image: url('https://static.tildacdn.com/tild3530-6235-4537-b838-653731636433/generated_image_91f4.png'); /* Третья картинка */
}
/* rol4: Стили для четвертой картинки */
.rol4 .tn-atom:before, .rol4 .tn-atom:after {
    background-image: url('https://static.tildacdn.com/tild3538-3339-4465-b639-383433383438/generated_image_b712.png'); /* Четвертая картинка */
}