.l-justified {
    --row-scale: .6;
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap);
}

@media (min-width: 640px) {
    .l-justified { --row-scale: .8; }
}

@media (min-width: 1024px) {
    .l-justified { --row-scale: 1; }
}

.l-justified > .g-item {
    flex-grow: calc(var(--ar) * 100);
    flex-basis: calc(var(--ar) * var(--row-h) * var(--row-scale));
    min-width: 0;
}

.l-justified .g-frame {
    position: relative;
    height: 0;
    padding-bottom: calc(100% / var(--ar));
}

.l-justified .g-frame img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Última fila alineada a la izquierda: un hueco invisible absorbe el espacio sobrante */
.l-justified--left::after {
    content: "";
    flex-grow: 999999999;
}

/* Con JS: anchos calculados por fila (script.js); el hueco final ya no hace falta */
.l-justified.is-positioned::after {
    display: none;
}