section#Ros__Similar_articles {

    /* Style 1 */
    & .ros_continer_1 {
        display: flex;
        gap: 1rem;
        row-gap: 2rem;
        flex-wrap: wrap;
        justify-content: space-between;

        & .ros__box {
            width: calc(100% / 2 - 1rem);
            background: pink;
            height: 12rem;
            overflow: hidden;
            border-radius: 5px;
            position: relative;

            & .info {
                position: absolute;
                top: 0;
                background: linear-gradient(to top, #654580, #81599b4f);
                width: 100%;
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                flex-direction: column;
                gap: 15px;
                padding: 1rem;
                text-align: center;

                & * {
                    color: #fff;
                }

                & span {
                    font-size: 14px;
                }
            }
        }
    }

    /* style 2 */
    & .ros_continer_2 {
        direction: ltr !important;
        margin-bottom: 1rem;
        overflow-x: clip;
        justify-content: flex-start;

        & .ros__box {
            width: 15rem;
            height: 12rem;
            background: #ffffff5c;
            transition: 0.5s;
            box-shadow: -9px 0 10px #00000045;
            position: relative;
            overflow: hidden;
            border-radius: 5px;

            &:not(:first-child) {
                margin-left: -130px;
            }

            &:hover {
                transform: translateY(-1rem);
                transition: 0.5s;
            }

            &:focus-within~&,
            &:hover~& {
                transform: translateX(130px);
            }

            & .info {
                position: absolute;
                top: 50%;
                left: 50%;
                width: 100%;
                height: 100%;
                text-align: center;
                transform: translate(-50%, -50%);
                background: linear-gradient(to top, #d07c7c96, #1e6deb69);
                padding: 10px;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                gap: 15px;

                & * {
                    color: #fff;
                    text-shadow: 0 0 20px black;
                }

                & h3 {
                    font-size: 17px;
                }

                & span {
                    font-size: 13px;
                }
            }
        }
    }

    /* style 3 */
    & .ros_continer_3 {
        gap: 1rem;

        & .ros__box {
            width: 100%;
            height: 18rem;
            overflow: hidden;
            border-radius: 10px;
            position: relative;

            &:before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
            }

            &:hover:before {
                background: linear-gradient(45deg, #ba4a4a, transparent);
            }

            & .info {
                position: absolute;
                bottom: 0;
                padding: 25px 13px 13px 13px;
                font-size: 13px;
                width: 100%;
                background: linear-gradient(to top, black, transparent);

                & * {
                    color: #ffff;
                }

                & h3 {
                    margin-bottom: 10px;
                }
            }
        }
    }

}

/*  */
@media ((min-width: 400px) and (max-width: 576px)) {
    section#Ros__Similar_articles {
        & .ros_continer_2 {
            & .ros__box {
                width: 100% !important;
            }
        }
    }
}