section#generalContent {
    max-width: var(--premary_width);
    display: flex;
    gap: 25px;
    border-top: 1px solid #00000042;
    padding-top: 2rem !important;

    & .lastContent {
        height: inherit;
        width: 70%;
        background: pink;
    }

    & aside {
        width: 30%;
    }
}

section#generalContent:has(.noPosts) {
    align-items: flex-start;
    justify-content: space-between;
}


/* aside Steky */
aside.sticky {
    position: sticky;
    align-self: flex-start;
}

section#Roseta__lastContet_1 {
    width: var(--premary_width);
    display: flex;
    gap: 25px;
    height: inherit;
    width: 70%;

    &:has(.Grid_Style),
    &:has(.Grid__img_full) {
        display: unset !important;
    }

    /* Full Image */
    &:has(.Grid__img_full) {

        & * {
            color: #fff;
        }

        & .box {
            height: 476px !important;
            position: relative;
            background: linear-gradient(45deg, #5691b0f2, transparent);
            overflow: hidden;
            border-radius: 10px;

            &>img {
                position: absolute;
                height: 100% !important;
                z-index: 1;
            }

            & .info {
                position: absolute;
                z-index: 1;
                padding: 12rem 1rem 1rem;
                background: linear-gradient(to top, black, transparent);
                bottom: 0;

                & hr {
                    border: 1px solid #ffffff33 !important;
                }

                & ul {
                    & li {
                        padding: 3px 8px 5px;
                    }
                }
            }
        }
    }

    /* Full Width */
    &:has(.Grid__img_full__full_width) {
        width: 100% !important;

        & .rosBox {
            gap: 10px !important;
            justify-content: space-between;

            & .box {
                max-width: calc(100% / 3 - 10px);
                border-bottom: none !important;
            }
        }
    }

    & * {
        font-family: "Inria Sans";
    }

    /* Flex */
    & .rosBox {
        display: flex;
        flex-direction: column;
        gap: 2rem;

        & .box {
            height: 13rem;
            display: flex;
            gap: 1rem;

            &>img {
                height: inherit;
                width: 40%;
                min-width: 40%;
                border-radius: 7px;
            }

            & .info {
                display: flex;
                flex-direction: column;
                gap: 10px;
                justify-content: space-evenly;
                left: 0;

                & h2:nth-child(1) {
                    font-weight: bold;
                    font-size: 20px;
                }

                & p:nth-child(2) {
                    font-size: 13px;
                    opacity: .7;
                }

                & hr {
                    border: 1px solid #00000033;
                }

                & ul {
                    margin: 0;

                    & li {
                        border: none;
                        font-size: 13px;
                        font-weight: bold;

                        & a {

                            color: #fff;
                            text-shadow: 0 0 15px black;

                        }
                    }
                }

                &>div {
                    font-size: 12px;
                    line-height: 22px;
                    letter-spacing: 1px;
                    display: flex;
                    align-items: center;
                    gap: 10px;

                    &>img {
                        width: 35px;
                        height: 35px;
                        border-radius: 100%;
                        border: 1px solid;
                        padding: 1px;
                    }
                }
            }
        }
    }

    /* Grid */
    & .Grid_Style,
    & .Grid__img_full {
        flex-direction: row;
        flex-wrap: wrap;
        width: 100%;

        & .box {
            width: calc(100% / 2 - 1rem);
            height: unset;
            flex-direction: column;
            border-bottom: 1px solid #0000002b;
            padding-bottom: 1rem;

            &>img {
                width: 100%;
                height: 15rem;
                top: 0;
                left: 0;
            }
        }

    }
}

/*  */
@media ((min-width: 400px) and (max-width: 576px)) {
    section#generalContent {
        display: flex;
        flex-direction: column;

        & section#Roseta__lastContet_1 {
            width: 100%;
            padding: 0 7px;
            display: flex;
            flex-direction: column;
            padding: 0 7px;

            & .rosBox {
                & .box {
                    flex-direction: column;
                    height: auto;
                    box-shadow: 0 0 10px 5px #d2d2d2;
                    border-radius: 10px;
                    padding: 5px 3px 8px;

                    &>img {
                        width: 100%;
                        height: 17rem;
                    }
                }
            }

            /*  */
            & .Grid_Style,
            & .Grid__img_full {
                display: flex;
                flex-direction: column;
                width: inherit;

                & .box {
                    width: inherit;
                }
            }
        }

        & aside {
            width: 100%;
        }
    }
}

@media (min-width: 577px) and (max-width: 768px) {
    section#generalContent {
        display: flex;
        flex-direction: column;
        padding: 0 7px;

        & section#Roseta__lastContet_1 {
            width: 100%;
        }

        & aside {
            width: 100%;
            border-top: 1px solid #00000033;
            padding-top: 2rem;
            display: flex;
            flex-direction: column;

            & .marg {
                margin: 2rem 0 !important;
            }

        }
    }
}

@media (min-width: 768px) and (max-width: 992px) {
    section#generalContent {
        display: flex;
        flex-direction: column;
        padding: 0 7px;

        & section#Roseta__lastContet_1 {
            width: 100%;
        }

        & aside {
            width: 100%;
            border-top: 1px solid #00000033;
            padding-top: 2rem;
            display: flex;
            flex-direction: column;

            & .marg {
                margin: 2rem 0 !important;
            }

        }
    }
}

@media (min-width: 992px) {
    section#generalContent {
        padding: 0 7px;
    }
}