.mosaique {
    .mosaic {
        .mosaique__category {
            background-repeat: no-repeat;
            background-size: cover;
            padding: 24px;
            border-radius: var(--border-radius);
            display: flex;
            position: relative;
            flex-direction: column;
            align-items: start;
            justify-content: end;
            gap: 20px;
            overflow: hidden;
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center;

            &:after {
                content: "";
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: linear-gradient(180deg, rgba(0, 0, 231, 0.16) 0%, rgba(0, 0, 66, 0.96) 80%);
                border-radius: var(--border-radius);
                z-index: 2;
                transition: var(--transition);
                opacity: 0;

                @media (max-width: 992px) {
                    opacity: 1;
                }
            }

            @media (min-width: 992px) {
                &:hover {
                    &:after {
                        opacity: 1;
                    }

                    .category_fixed {
                        transform: translateY(-10px) !important;
                        position: relative;

                        .category {
                            background-color: var(--hover) !important;
                        }
                    }

                    .category_hover {
                        opacity: 1 !important;
                        pointer-events: all !important;
                        transform: translateY(0) !important;

                        * {
                            pointer-events: all !important;
                        }
                    }
                }
            }

            .category_fixed {
                z-index: 3;
                position: absolute;

                @media (min-width: 992px) {
                    transition: transform 0.5s cubic-bezier(0.34, 2.56, 0.64, 1);
                    transform: translateY(0);
                }

                .category {
                    background-color: var(--peach);
                    padding: 12px 16px;
                    border-radius: 50px;
                    gap: 8px;
                    display: flex;
                    color: var(--white);
                    font-weight: var(--medium);
                    font-size: 16px;
                    line-height: 24px;
                    min-height: 56px;
                    align-items: center;
                    transition: var(--transition);

                    .img_category {
                        position: relative;
                        background-color: var(--white);
                        border-radius: 50px;
                        width: 32px;
                        height: 32px;
                        display: grid;
                        place-items: center;

                        img {
                            filter: brightness(0) saturate(100%) invert(81%) sepia(13%) saturate(3416%) hue-rotate(315deg) brightness(103%) contrast(103%);
                        }
                    }
                }
            }

            .category_hover {
                z-index: 3;
                position: relative;
                opacity: 0;
                transition: transform 0.5s ease;
                pointer-events: none;
                transform: translateY(20px);

                &>p {
                    color: var(--white);
                    font-weight: var(--bold);
                    font-size: 24px;
                    line-height: 32px;
                    margin: 0 !important;
                }
            }
        }

        &.nb_1 {
            .mosaique__category {
                height: 520px;
            }
        }

        &.nb_2 {
            height: 520px;
            display: flex;
            gap: 32px;

            .mosaique__category {
                flex: 1;
            }

            @media (max-width: 768px) {
                flex-direction: column;

                .mosaique__category {
                    height: 250px;
                }
            }
        }

        &.nb_3 {
            height: 520px;
            display: grid;
            gap: 32px;

            .mosaique__category {
                &:first-child {
                    grid-row: 1;
                    grid-column: 1 / 3;
                    height: 244px;
                }

                &:nth-child(2) {
                    grid-row: 2;
                    grid-column: 1 / 3;
                    height: 244px;
                }

                &:last-child {
                    grid-column: 3;
                    grid-row: 1 / span 2;
                }
            }

            @media (max-width: 768px) {
                height: unset;
                display: flex;
                flex-direction: column;

                .mosaique__category {
                    height: 250px;
                }
            }
        }
    }
}