.informations,
.swiper-pagination>span {
    mix-blend-mode: difference;
    color: rgb(121, 121, 121);

}

.swiper-pagination {
    mix-blend-mode: difference;
}


main {
    position: absolute;
    top: 0;
    left: 0;
    padding-top: 0;

    .homepage-gallery {

        .informations {
            display: grid;
            grid-template-columns: repeat(16, 1fr);
            gap: 1em;
            width: 100%;
            position: fixed;
            bottom: 1em;
            z-index: 2;

            .context {
                display: flex;
                grid-column: 5/10;
                gap: 1em;
                align-items: flex-end;



                .description {
                    transition: opacity 0.3s ease-in-out;
                }
            }

            .year {
                grid-column: 12/-1;
            }
        }


        .home-swiper {

            width: 100vw;
            height: 100dvh;

            .swiper-pagination {
                text-align: left;
                bottom: 0;
                margin: 1em;
            }

            .swiper-wrapper {
                transition-timing-function: cubic-bezier(0.586, 0, 0, 1);
            }


            .swiper-slide {

                display: flex;
                align-items: center;
                justify-content: center;


                img,
                video {

                    object-fit: contain;

                    filter: grayscale(1);
                    transition: all var(--animation-duration) var(--animation-easing);

                    &:hover {
                        filter: grayscale(0);

                    }


                }


                img.active {
                    filter: grayscale(0);
                }

                img.landscape,
                img.square,
                video {

                    max-width: 80vw;
                    width: auto;
                    height: 85vh;

                    max-height: 80vh;


                }

                img.portrait,
                video {
                    height: 80vh;
                    width: auto;

                }



            }
        }
    }
}


main {}

main section.homepage-gallery>.bg-swiper {
    width: 100%;
    height: 100dvh;
    box-sizing: border-box;
    position: absolute !important;
    top: 0;
    left: 0;
    z-index: -1;
}

main section.homepage-gallery>.bg-swiper .bg-color {
    width: 100vw;
    height: 100dvh;
    z-index: -1;
}

main section.homepage-gallery>.bg-swiper .swiper-slide {
    width: 100vw !important;
    height: 100dvh !important;
    object-fit: fill;

}

main section.homepage-gallery>.bg-swiper .swiper-slide img {
    width: 100vw !important;
    height: 100dvh !important;
    max-width: 100vw !important;
    max-height: 100dvh !important;
    object-fit: cover !important;

}


@media (width < 960px) {





    main {
        position: fixed;
        overflow-y: hidden;

        .homepage-gallery {
            .home-swiper {

                .swiper-pagination {
                    text-align: right;
                    top: var(--body-padding);
                    margin: 0;
                    padding-right: var(--body-padding);
                    height: fit-content;
                }

                .swiper-slide {


                    img,
                    video {
                        animation: color .3s 1s forwards;

                        &:hover {
                            filter: grayscale(1);
                        }

                    }

                    img.landscape,
                    img.square,
                    video {

                        max-width: 92vw;
                        width: auto;
                        height: 85vh;

                        max-height: 80vh;

                    }


                    img.portrait,
                    video {
                        width: 92vw;
                    }
                }
            }
        }
    }

    @keyframes color {
        from {
            filter: grayscale(1);
        }

        to {
            filter: grayscale(0);
        }

    }
}