/* --- Grid base (opcional, estilo Bootstrap-like) --- */
            .gon-row {
                display: flex;
                flex-wrap: wrap;
                margin-left: -0.75rem;
                margin-right: -0.75rem;
            }

            .gon-col {
                position: relative;
                width: 100%;
                min-height: 1px;
                padding-left: 0.75rem;
                padding-right: 0.75rem;
            }

            /* Por defecto en móviles: apilado */
            .gon-sm,
            .gon-sm-auto,
            .gon-sm-1,
            .gon-sm-2,
            .gon-sm-3,
            .gon-sm-4,
            .gon-sm-5,
            .gon-sm-6,
            .gon-sm-7,
            .gon-sm-8,
            .gon-sm-9,
            .gon-sm-10,
            .gon-sm-11,
            .gon-sm-12 {
                width: 100%;
            }



            /* --- A partir de sm (>=576px) --- */
            @media (min-width: 576px) {
                .art-position-main {
                    padding: 20px 3rem 0rem 3rem;
                    margin: 0;
                }

                /* POPULAR ARTICLES */
                .mod-popular-articles {
                    padding: 3rem;
                    margin: 0;
                }

                /* Columna fluida que ocupa el espacio disponible (equivalente a .col-sm) */
                .gon-sm {
                    flex: 1 0 0%;
                    max-width: 100%;
                }

                /* Ancho automático (según contenido) */
                .gon-sm-auto {
                    flex: 0 0 auto;
                    width: auto;
                    max-width: none;
                }

                /* Anchos fijos 1–12 (equivalentes a .col-sm-*) */
                .gon-sm-1 {
                    flex: 0 0 8.333333%;
                    max-width: 8.333333%;
                }

                .gon-sm-2 {
                    flex: 0 0 16.666667%;
                    max-width: 16.666667%;
                }

                .gon-sm-3 {
                    flex: 0 0 25%;
                    max-width: 25%;
                }

                .gon-sm-4 {
                    flex: 0 0 33.333333%;
                    max-width: 33.333333%;
                }

                .gon-sm-5 {
                    flex: 0 0 41.666667%;
                    max-width: 41.666667%;
                }

                .gon-sm-6 {
                    flex: 0 0 50%;
                    max-width: 50%;
                }

                .gon-sm-7 {
                    flex: 0 0 58.333333%;
                    max-width: 58.333333%;
                }

                .gon-sm-8 {
                    flex: 0 0 66.666667%;
                    max-width: 66.666667%;
                }

                .gon-sm-9 {
                    flex: 0 0 75%;
                    max-width: 75%;
                }

                .gon-sm-10 {
                    flex: 0 0 83.333333%;
                    max-width: 83.333333%;
                }

                .gon-sm-11 {
                    flex: 0 0 91.666667%;
                    max-width: 91.666667%;
                }

                .gon-sm-12 {
                    flex: 0 0 100%;
                    max-width: 100%;
                }

                /* Offsets (márgenes izquierdos por columnas) */
                .gon-sm-offset-0 {
                    margin-left: 0;
                }

                .gon-sm-offset-1 {
                    margin-left: 8.333333%;
                }

                .gon-sm-offset-2 {
                    margin-left: 16.666667%;
                }

                .gon-sm-offset-3 {
                    margin-left: 25%;
                }

                .gon-sm-offset-4 {
                    margin-left: 33.333333%;
                }

                .gon-sm-offset-5 {
                    margin-left: 41.666667%;
                }

                .gon-sm-offset-6 {
                    margin-left: 50%;
                }

                .gon-sm-offset-7 {
                    margin-left: 58.333333%;
                }

                .gon-sm-offset-8 {
                    margin-left: 66.666667%;
                }

                .gon-sm-offset-9 {
                    margin-left: 75%;
                }

                .gon-sm-offset-10 {
                    margin-left: 83.333333%;
                }

                .gon-sm-offset-11 {
                    margin-left: 91.666667%;
                }

                /* Orden (opcional) */
                .gon-sm-order-first {
                    order: -1;
                }

                .gon-sm-order-last {
                    order: 13;
                }

                .gon-sm-order-0 {
                    order: 0;
                }

                .gon-sm-order-1 {
                    order: 1;
                }

                .gon-sm-order-2 {
                    order: 2;
                }

                .gon-sm-order-3 {
                    order: 3;
                }

                .gon-sm-order-4 {
                    order: 4;
                }

                .gon-sm-order-5 {
                    order: 5;
                }

                .gon-sm-order-6 {
                    order: 6;
                }

                .gon-sm-order-7 {
                    order: 7;
                }

                .gon-sm-order-8 {
                    order: 8;
                }

                .gon-sm-order-9 {
                    order: 9;
                }

                .gon-sm-order-10 {
                    order: 10;
                }

                .gon-sm-order-11 {
                    order: 11;
                }

                .gon-sm-order-12 {
                    order: 12;
                }
            }