.dnetor-gallery-metro {
    .image {
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        padding-top: var(--dnetor-gallery-ratio);
    }
    .dnetor-gallery-item {
        display: grid;
    }
    &::after {
        content: "";
        display: block;
    }
}

.dnetor-gr-2 {
    grid-row: span 2;
}

.dnetor-gr-3 {
    grid-row: span 3;
}

.dnetor-gr-4 {
    grid-row: span 4;
}

.dnetor-gr-5 {
    grid-row: span 5;
}

.dnetor-gr-6 {
    grid-row: span 6;
}

.dnetor-gr-7 {
    grid-row: span 7;
}

.dnetor-gr-8 {
    grid-row: span 8;
}

.dnetor-gr-9 {
    grid-row: span 9;
}

.dnetor-gr-10 {
    grid-row: span 10;
}

.dnetor-gr-11 {
    grid-row: span 11;
}

.dnetor-gr-12 {
    grid-row: span 12;
}

.dnetor-gc-2 {
    grid-column: span 2;
}

.dnetor-gc-3 {
    grid-column: span 3;
}

.dnetor-gc-4 {
    grid-column: span 4;
}

.dnetor-gc-5 {
    grid-column: span 5;
}

.dnetor-gc-6 {
    grid-column: span 6;
}

.dnetor-gc-7 {
    grid-column: span 7;
}

.dnetor-gc-8 {
    grid-column: span 8;
}

.dnetor-gc-9 {
    grid-column: span 9;
}

.dnetor-gc-10 {
    grid-column: span 10;
}

.dnetor-gc-11 {
    grid-column: span 11;
}

.dnetor-gc-12 {
    grid-column: span 12;
}

@media screen and (max-width: 1024px) {
    .dnetor-gallery-metro {
        .dnetor-image {
            padding-top: var(--dnetor-gallery-ratio-md);
        }
    }
    .dnetor-gr-md-1 {
        grid-row: span 1;
    }

    .dnetor-gr-md-2 {
        grid-row: span 2;
    }

    .dnetor-gr-md-3 {
        grid-row: span 3;
    }

    .dnetor-gr-md-4 {
        grid-row: span 4;
    }

    .dnetor-gr-md-5 {
        grid-row: span 5;
    }

    .dnetor-gr-md-6 {
        grid-row: span 6;
    }

    .dnetor-gr-md-7 {
        grid-row: span 7;
    }

    .dnetor-gr-md-8 {
        grid-row: span 8;
    }

    .dnetor-gr-md-9 {
        grid-row: span 9;
    }

    .dnetor-gr-md-10 {
        grid-row: span 10;
    }

    .dnetor-gr-md-11 {
        grid-row: span 11;
    }

    .dnetor-gr-md-12 {
        grid-row: span 12;
    }

    .dnetor-gc-md-1 {
        grid-column: span 1;
    }

    .dnetor-gc-md-2 {
        grid-column: span 2;
    }

    .dnetor-gc-md-3 {
        grid-column: span 3;
    }

    .dnetor-gc-md-4 {
        grid-column: span 4;
    }

    .dnetor-gc-md-5 {
        grid-column: span 5;
    }

    .dnetor-gc-md-6 {
        grid-column: span 6;
    }

    .dnetor-gc-md-7 {
        grid-column: span 7;
    }

    .dnetor-gc-md-8 {
        grid-column: span 8;
    }

    .dnetor-gc-md-9 {
        grid-column: span 9;
    }

    .dnetor-gc-md-10 {
        grid-column: span 10;
    }

    .dnetor-gc-md-11 {
        grid-column: span 11;
    }

    .dnetor-gc-md-12 {
        grid-column: span 12;
    }
}

@media screen and (max-width: 767px) {
    .dnetor-gallery-metro {
        .dnetor-image {
            padding-top: var(--dnetor-gallery-ratio-sm);
        }
    }
    .dnetor-gr-sm-1 {
        grid-row: span 1;
    }

    .dnetor-gr-sm-2 {
        grid-row: span 2;
    }

    .dnetor-gr-sm-3 {
        grid-row: span 3;
    }

    .dnetor-gr-sm-4 {
        grid-row: span 4;
    }

    .dnetor-gr-sm-5 {
        grid-row: span 5;
    }

    .dnetor-gr-sm-6 {
        grid-row: span 6;
    }

    .dnetor-gr-sm-7 {
        grid-row: span 7;
    }

    .dnetor-gr-sm-8 {
        grid-row: span 8;
    }

    .dnetor-gr-sm-9 {
        grid-row: span 9;
    }

    .dnetor-gr-sm-10 {
        grid-row: span 10;
    }

    .dnetor-gr-sm-11 {
        grid-row: span 11;
    }

    .dnetor-gr-sm-12 {
        grid-row: span 12;
    }

    .dnetor-gc-sm-1 {
        grid-column: span 1;
    }

    .dnetor-gc-sm-2 {
        grid-column: span 2;
    }

    .dnetor-gc-sm-3 {
        grid-column: span 3;
    }

    .dnetor-gc-sm-4 {
        grid-column: span 4;
    }

    .dnetor-gc-sm-5 {
        grid-column: span 5;
    }

    .dnetor-gc-sm-6 {
        grid-column: span 6;
    }
    .dnetor-gc-sm-7 {
        grid-column: span 7;
    }

    .dnetor-gc-sm-8 {
        grid-column: span 8;
    }

    .dnetor-gc-sm-9 {
        grid-column: span 9;
    }

    .dnetor-gc-sm-10 {
        grid-column: span 10;
    }

    .dnetor-gc-sm-11 {
        grid-column: span 11;
    }

    .dnetor-gc-sm-12 {
        grid-column: span 12;
    }
}