.gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2em
}

.gallery .column {
    display: flex;
    flex-direction: column;
}

#swiper {
    width: 100%;
}

#swiper #nav {
    display: flex;
    justify-content: space-evenly;
    margin-bottom: 4em ;
}

#swiper #nav span {
    padding: 1em 12em;
    text-align: center;
    display: inline-block;
    background-color: #fff;
    box-shadow: 0 13px 8px -10px rgba(0, 0, 0, 0.1);
}

#swiper.fotky #nav span.fotky {
    box-shadow: 0 13px 8px -10px rgba(0, 120, 255, 0.500);
}

#swiper.videa #nav span.videa {
    box-shadow: 0 13px 8px -10px rgba(0, 120, 255, 0.500);
}

#swiper {
    overflow: hidden;
    position: relative;
}

#swiper .content {
    display: flex;
    gap: 50px;
    width: 200%;
}

#swiper .content .fotky, #swiper .content .videa {
    position: relative;
    width: 100%;
    transition: ease-out 500ms translate;
}
#swiper.fotky .content .fotky {
    translate: 0 0;
}
#swiper.videa .content .fotky {
    translate: -100% 0;
}
#swiper.videa .content .videa {
    translate: -100% 0;
}

#swiper .content .videa {
    display: flex;
    flex-direction: column;
    align-items: center;
}