Yellow – parent row with two columns 75% / 25% of width, in left column is subrow with 6 columns. In each of this column is subrow (for animation effect) with one column (background picture)

Red – left column 75%

Black – right column 25%

For test I gave px heights, because if I give 100% height it does not scale to match parent row’s height. I would like that they get same 100% height as parent row with some .class?

Second thing I would like is that inner row columns (from 2nd to 6th) have overflow visible on the left, so picture on the right goes below picture on the left.

All elements in parent row should scale proportionally with parent row (keep same width with and height ratio)

Matematically

For desktop row is 1728x400px, left column (75%) ratio should be: 1296x400px, right column ratio should be: 423x400px, inner columns in the left columns are 1/6 of 1296 so ratio should be 216x400px

For below tablet portrait is: 768x580px Two parent columns flip below eachother, so inner 6 column ratios should be 216x580px

3rd thing I made animations to move to the right on each subrow. On frontend it is working only on first subrow/column. I assume due to z index.