Revision:
<div id="grid-alpha">
<section id="row-one"><div>1</div></section>
<section id="row-two"><div>1</div><div>2</div></section>
<section id="row-three"><div>1</div><div>2</div><div>3</div></section>
<section id="row-four"><div>1</div><div>2</div><div>3</div><div>4</div></section>
<section id="row-five"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div></section>
<section id="row-six"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div></section>
<section id="row-seven"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div></section>
<section id="row-eight"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div></section>
<section id="row-nine"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div></section>
<section id="row-ten"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div></section>
<section id="row-eleven"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div><div>11</div></section>
<section id="row-twelve"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div><div>11</div><div>12</div></section>
</div>
<div id="grid-beta">
<section id="row-a"><div class="col-a">a</div><div class="col-b">b</div></section>
<section id="row-b"><div class="col-a">a</div><div class="col-b">b</div></section>
<section id="row-c"><div class="col-a">a</div><div class="col-b">b</div></section>
<section id="row-d"><div class="col-a">a</div><div class="col-b">b</div></section>
<section id="row-e"><div class="col-a">a</div><div class="col-b">b</div></section>
<section id="row-f"><div class="col-a">a</div><div class="col-b">b</div></section>
<section id="row-g"><div class="col-a">a</div><div class="col-b">b</div></section>
<section id="row-h"><div class="col-a">a</div><div class="col-b">b</div></section>
<section id="row-i"><div class="col-a">a</div><div class="col-b">b</div></section>
<section id="row-j"><div class="col-a">a</div><div class="col-b">b</div></section>
<section id="row-k"><div class="col-a">a</div><div class="col-b">b</div></section>
</div>
<style>
html {box-sizing: border-box; font-size: 100%; background-image: repeating-linear-gradient(135deg, orange, silver, darkgreen);}
*, *:before, *:after {box-sizing: inherit;}
body {background: transparent; font-family: 'Open Sans', sans-serif; font-size: 1.2vw;padding: 0; margin: 0;}
.main-title {background: silver; border-bottom: 0.2vw solid #666; border-top: 0.2vw solid #666; margin-bottom: 0.5vw; margin-top: 0.5vw;}
h1 {font-weight: 600; font-size: 3vw; line-height: 0.8; text-align: center; color: #888}
h2{font-size: 2vw; color: darkgreen; display: flex; justify-content: start; text-decoration-line:overline underline;}
#grid-alpha, #grid-beta{grid-template-columns: repeat(12, 1fr); grid-template-rows: minmax(2vh, auto); gap: 1vw; width: 96vw; height: auto; font-size: 2vw;}
#grid-alpha section, #grid-beta section{margin-left: 1vw; text-align: center;margin-bottom: 1vw; font-weight: bold; }
#grid-alpha section, #grid-beta section{display: grid; grid-auto-flow: column dense;}
div:not(#grid, #grid-2){border: 0.2vw solid darkgreen; border-collapse: collapse;}
#row-one{grid-column:1/13; grid-row:1/2;animation: blink 3s linear infinite;}
#row-two{grid-column:1/13; grid-row:2/3;animation: blink 4s linear infinite;}
#row-three{grid-column:1/13; grid-row:3/4;animation: blink 5s linear infinite;}
#row-four{grid-column:1/13; grid-row:4/5;animation: blink 6s linear infinite;}
#row-five{grid-column:1/13; grid-row:5/6;animation: blink 7s linear infinite;}
#row-six{grid-column:1/13; grid-row:6/7;animation: blink 8s linear infinite;}
#row-seven{grid-column:1/13; grid-row:7/8;animation: blink 9s linear infinite;}
#row-eight{grid-column:1/13; grid-row:8/9;animation: blink 10s linear infinite;}
#row-nine{grid-column:1/13; grid-row:9/10;;animation: blink 11s linear infinite;}
#row-ten{grid-column:1/13; grid-row:10/11;;animation: blink 12s linear infinite;}
#row-eleven{grid-column:1/13; grid-row:11/12;animation: blink 13s linear infinite;}
#row-twelve{grid-column:1/13; grid-row:12/13;animation: blink 14s linear infinite;}
#row-a{grid-template-columns: 1fr 11fr;animation: flikker 1s linear infinite;}
#row-b{grid-template-columns: 2fr 10fr;animation: flikker 2s linear infinite;}
#row-c{grid-template-columns: 3fr 9fr;animation: flikker 3s linear infinite;}
#row-d{grid-template-columns: 4fr 8fr;animation: flikker 4s linear infinite;}
#row-e{grid-template-columns: 5fr 7fr;animation: flikker 5s linear infinite;}
#row-f{grid-template-columns: 6fr 6fr;animation: flikker 6s linear infinite;}
#row-g{grid-template-columns: 7fr 5fr;animation: flikker 7s linear infinite;}
#row-h{grid-template-columns: 8fr 4fr;animation: flikker 8s linear infinite;}
#row-i{grid-template-columns: 9fr 3fr;animation: flikker 9s linear infinite;}
#row-j{grid-template-columns: 10fr 2fr;animation: flikker 10s linear infinite;}
#row-k{grid-template-columns: 11fr 1fr;animation: flikker 11s linear infinite;}
@keyframes blink{
0%, 100%{background-image:repeating-linear-gradient(darkblue, silver, seagreen);}
50%{background-image:repeating-linear-gradient(green, orange,skyblue);}
}
@keyframes flikker{
0%, 100%{background-image:repeating-radial-gradient(farthest-corner at 10%, darkblue, silver, seagreen);}
50%{background-image:repeating-radial-gradient(farthest-corner at 10%, green, orange,skyblue);}
}
</style>
<div id="grid-gamma">
<section id="row-one1"><div>1</div></section>
<section id="row-two1"><div>1</div><div>2</div></section>
<section id="row-three1"><div>1</div><div>2</div><div>3</div></section>
<section id="row-four1"><div>1</div><div>2</div><div>3</div><div>4</div></section>
<section id="row-five1"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div></section>
<section id="row-six1"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div></section>
<section id="row-seven1"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div></section>
<section id="row-eight1"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div></section>
<section id="row-nine1"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div></section>
<section id="row-ten1"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div></section>
<section id="row-eleven1"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div><div>11</div></section>
<section id="row-twelve1"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div><div>11</div><div>12</div></section>
</div>
<div id="grid-delta">
<section id="row-a1"><div class="col-a1">a</div><div class="col-b1">b</div></section>
<section id="row-b1"><div class="col-a1">a</div><div class="col-b1">b</div></section>
<section id="row-c1"><div class="col-a1">a</div><div class="col-b1">b</div></section>
<section id="row-d1"><div class="col-a1">a</div><div class="col-b1">b</div></section>
<section id="row-e1"><div class="col-a1">a</div><div class="col-b1">b</div></section>
<section id="row-f1"><div class="col-a1">a</div><div class="col-b1">b</div></section>
<section id="row-g1"><div class="col-a1">a</div><div class="col-b1">b</div></section>
<section id="row-h1"><div class="col-a1">a</div><div class="col-b1">b</div></section>
<section id="row-i1"><div class="col-a1">a</div><div class="col-b1">b</div></section>
<section id="row-j1"><div class="col-a1">a</div><div class="col-b1">b</div></section>
<section id="row-k1"><div class="col-a1">a</div><div class="col-b1">b</div></section>
</div>
<style>
html {box-sizing: border-box; font-size: 100%; background-image: linear-gradient(35deg, lightgrey, orange, darkgray);}
*, *:before, *:after {box-sizing: inherit;}
body {background: transparent; font-family: 'Open Sans', sans-serif; font-size: 1.2vw;padding: 0; margin: 0;}
h2{font-size: 2vw; color: darkgreen; display: flex; justify-content: start; text-decoration-line:overline underline;}
#grid-gamma, #grid-delta{grid-template-columns: repeat(12, 1fr); grid-template-rows: minmax(2vh, auto); gap: 1vw; width: 96vw; height: auto; font-size: 2vw;}
#grid-gamma section, #grid-delta section{margin-left: 1vw; text-align: center;margin-bottom: 1vw; font-weight: bold; color: red;}
#grid-gamma section, #grid-delta section{display: grid; grid-auto-flow: column dense;}
div:not(#grid, #grid-2){border: 0.2vw solid darkgreen; border-collapse: collapse;}
#row-one1{grid-column:1/13; grid-row:1/2;animation: swift 15s linear alternate infinite;}
#row-two1{grid-column:1/13; grid-row:2/3;animation: swift 15s linear alternate infinite;}
#row-three1{grid-column:1/13; grid-row:3/4;animation: swift 15s linear alternate infinite;}
#row-four1{grid-column:1/13; grid-row:4/5;animation: swift 15s linear alternate infinite;}
#row-five1{grid-column:1/13; grid-row:5/6;animation: swift 15s linear alternate infinite;}
#row-six1{grid-column:1/13; grid-row:6/7;animation: swift 15s linear alternate infinite;}
#row-seven1{grid-column:1/13; grid-row:7/8;animation: swift 15s linear alternate infinite;}
#row-eight1{grid-column:1/13; grid-row:7/8;animation: swift 15s linear alternate infinite;}
#row-nine1{grid-column:1/13; grid-row:7/8;animation: swift 15s linear alternate infinite;}
#row-ten1{grid-column:1/13; grid-row:7/8;animation: swift 15s linear alternate infinite;}
#row-eleven1{grid-column:1/13; grid-row:7/8;animation: swift 15s linear alternate infinite;}
#row-twelve1{grid-column:1/13; grid-row:7/8;animation: swift 15s linear alternate infinite;}
#grid-gamma section:nth-child(odd), #grid-delta section:nth-child(odd){background-image:radial-gradient(circle at 10% 2%,blue, cyan, yellow);}
#grid-gamma section:nth-child(even), #grid-delta section:nth-child(even){background-image:radial-gradient(circle at 2% 3%,brown, burlywood, AliceBlue);}
#row-a1{grid-template-columns: 1fr 11fr;animation: swift2 15s linear alternate infinite;}
#row-b1{grid-template-columns: 2fr 10fr;animation: swift2 15s linear alternate infinite;}
#row-c1{grid-template-columns: 3fr 9fr;animation: swift2 15s linear alternate infinite;}
#row-d1{grid-template-columns: 4fr 8fr;animation: swift2 15s linear alternate infinite;}
#row-e1{grid-template-columns: 5fr 7fr;animation: swift2 15s linear alternate infinite;}
#row-f1{grid-template-columns: 6fr 6fr;animation: swift2 15s linear alternate infinite;}
#row-g1{grid-template-columns: 7fr 5fr;animation: swift2 15s linear alternate infinite;}
#row-h1{grid-template-columns: 8fr 4fr;animation: swift2 15s linear alternate infinite;}
#row-i1{grid-template-columns: 9fr 3fr;animation: swift2 15s linear alternate infinite;}
#row-j1{grid-template-columns: 10fr 2fr;animation: swift2 15s linear alternate infinite;}
#row-k1{grid-template-columns: 11fr 1fr;animation: swift2 15s linear alternate infinite;}
.col-a1{background-image:linear-gradient(12deg, red, blue, green);}
.col-b1{background-image:linear-gradient(12deg, yellow, blue, lightgrey);}
@keyframes swift{
0%{transform: scale(1) rotateX(0deg)}
50%{transform: scale(.25) rotateX(360deg);}
100%{transform: scale(1) rotateX(0deg)}
}
@keyframes swift2{
0%{transform: scale(1) rotateY(0deg)}
50%{transform: scale(.75) rotateY(360deg);}
100%{transform: scale(1) rotateY(0deg)}
}
</style>
<div id="grid-epsilon">
<section id="row-one2"><div class="c-1">1</div></section>
<section id="row-two2"><div class="c-1">1</div><div class="c-2">2</div></section>
<section id="row-three2"><div class="c-1">1</div><div class="c-2">2</div><div class="c-3">3</div></section>
<section id="row-four2"><div class="c-1">1</div><div class="c-2">2</div><div class="c-3">3</div><div class="c-4">4</div></section>
<section id="row-five2"><div class="c-1">1</div><div class="c-2">2</div><div class="c-3">3</div><div class="c-4">4</div><div class="c-5">5</div></section>
<section id="row-six2"><div class="c-1">1</div><div class="c-2">2</div><div class="c-3">3</div><div class="c-4">4</div><div class="c-5">5</div><div class="c-6">6</div></section>
<section id="row-seven2"><div class="c-1">1</div><div class="c-2">2</div><div class="c-3">3</div><div class="c-4">4</div><div class="c-5">5</div><div class="c-6">6</div><div class="c-7">7</div></section>
<section id="row-eight2"><div class="c-1">1</div><div class="c-2">2</div><div class="c-3">3</div><div class="c-4">4</div><div class="c-5">5</div><div class="c-6">6</div><div class="c-7">7</div><div class="c-8">8</div></section>
<section id="row-nine2"><div class="c-1">1</div><div class="c-2">2</div><div class="c-3">3</div><div class="c-4">4</div><div class="c-5">5</div><div class="c-6">6</div><div class="c-7">7</div><div class="c-8">8</div><div class="c-9">9</div></section>
<section id="row-ten2"><div class="c-1">1</div><div class="c-2">2</div><div class="c-3">3</div><div class="c-4">4</div><div class="c-5">5</div><div class="c-6">6</div><div class="c-7">7</div><div class="c-8">8</div><div class="c-9">9</div><div class="c-10">10</div></section>
<section id="row-eleven2"><div class="c-1">1</div><div class="c-2">2</div><div class="c-3">3</div><div class="c-4">4</div><div class="c-5">5</div><div class="c-6">6</div><div class="c-7">7</div><div class="c-8">8</div><div class="c-9">9</div><div class="c-10">10</div><div class="c-11">11</div></section>
<section id="row-twelve2"><div class="c-1">1</div><div class="c-2">2</div><div class="c-3">3</div><div class="c-4">4</div><div class="c-5">5</div><div class="c-6">6</div><div class="c-7">7</div><div class="c-8">8</div><div class="c-9">9</div><div class="c-10">10</div><div class="c-11">11</div><div class="c-12">12</div></section>
<section id="row-thirteen2"><div class="c-1">1</div><div class="c-2">2</div><div class="c-3">3</div><div class="c-4">4</div><div class="c-5">5</div><div class="c-6">6</div><div class="c-7">7</div><div class="c-8">8</div><div class="c-9">9</div><div class="c-10">10</div><div class="c-11">11</div><div class="c-12">12</div></section>
<section id="row-fourteen2"><div class="c-1">1</div><div class="c-2">2</div><div class="c-3">3</div><div class="c-4">4</div><div class="c-5">5</div><div class="c-6">6</div><div class="c-7">7</div><div class="c-8">8</div><div class="c-9">9</div><div class="c-10">10</div><div class="c-11">11</div></section>
<section id="row-fifteen2"><div class="c-1">1</div><div class="c-2">2</div><div class="c-3">3</div><div class="c-4">4</div><div class="c-5">5</div><div class="c-6">6</div><div class="c-7">7</div><div class="c-8">8</div><div class="c-9">9</div><div class="c-11">10</div></section>
<section id="row-sixteen2"><div class="c-1">1</div><div class="c-2">2</div><div class="c-3">3</div><div class="c-4">4</div><div class="c-5">5</div><div class="c-6">6</div><div class="c-7">7</div><div class="c-8">8</div><div class="c-9">9</div></section>
<section id="row-seventeen2"><div class="c-1">1</div><div class="c-2">2</div><div class="c-3">3</div><div class="c-4">4</div><div class="c-5">5</div><div class="c-6">6</div><div class="c-7">7</div><div class="c-8">8</div></section>
<section id="row-eighteen2"><div class="c-1">1</div><div class="c-2">2</div><div class="c-3">3</div><div class="c-4">4</div><div class="c-5">5</div><div class="c-6">6</div><div class="c-7">7</div></section>
<section id="row-nineteen2"><div class="c-1">1</div><div class="c-2">2</div><div class="c-3">3</div><div class="c-4">4</div><div class="c-5">5</div><div class="c-6">6</div></section>
<section id="row-twenty2"><div class="c-1">1</div><div class="c-2">2</div><div class="c-3">3</div><div class="c-4">4</div><div class="c-5">5</div></section>
<section id="row-twentyone2"><div class="c-1">1</div><div class="c-2">2</div><div class="c-3">3</div><div class="c-4">4</div></section>
<section id="row-twentytwo2"><div class="c-1">1</div><div class="c-2">2</div><div class="c-3">3</div></section>
<section id="row-twentythree2"><div class="c-1">1</div><div class="c-2">2</div></section>
<section id="row-twentyfour2"><div class="c-1">1</div></section>
</div>
<style>
html {box-sizing: border-box; font-size: 100%; background-image: linear-gradient(35deg, lightgrey, orange, darkgray);}
*, *:before, *:after {box-sizing: inherit;}
body {background: transparent; font-family: 'Open Sans', sans-serif; font-size: 1.2vw; padding: 0; margin: 0;}
h2{font-size: 2vw; color: darkgreen; display: flex; justify-content: start; text-decoration-line:overline underline;}
#grid-epsilon{grid-template-columns: repeat(12, 1fr); grid-template-rows: minmax(2vh, auto); gap: 0vw; width: 96vw; height: auto; font-size: 2vw;}
#grid-epsilon section{margin-left: 1vw; text-align: center;margin-bottom: 0vw; font-weight: bold; }
#grid-epsilon section{display: grid; grid-auto-flow: column dense;}
div:not(#grid){border: 0.2vw solid darkgreen; border-collapse: collapse;}
#row-one2{grid-column:1/13; grid-row:1/2;}
#row-three2{grid-column:1/13; grid-row:3/4;}
#row-four2{grid-column:1/13; grid-row:4/5;}
#row-five2{grid-column:1/13; grid-row:5/6;}
#row-six2{grid-column:1/13; grid-row:6/7;}
#row-seven2{grid-column:1/13; grid-row:7/8;}
#row-eight2{grid-column:1/13; grid-row:8/9;}
#row-nine2{grid-column:1/13; grid-row:9/10;}
#row-ten2{grid-column:1/13; grid-row:10/11;}
#row-eleven2{grid-column:1/13; grid-row:11/12;}
#row-twelve2{grid-column:1/13; grid-row:12/13}
#row-thirteen2{grid-column:1/13; grid-row:13/14;}
#row-fourteen2{grid-column:1/13; grid-row:14/15;}
#row-fifteen2{grid-column:1/13; grid-row:15/16;}
#row-sixteen2{grid-column:1/13; grid-row:16/17;}
#row-seventeen2{grid-column:1/13; grid-row:17/18;}
#row-eighteen2{grid-column:1/13; grid-row:18/19;}
#row-nineteen2{grid-column:1/13; grid-row:19/20;}
#row-twenty2{grid-column:1/13; grid-row:20/21;}
#row-twentyone2{grid-column:1/13; grid-row:21/22;}
#row-twentytwo2{grid-column:1/13; grid-row:22/23;}
#row-twentythree2{grid-column:1/13; grid-row:23/24;}
#row-twentyfour2{grid-column:1/13; grid-row:24/25;}
.c-1{animation: coloring 5s linear alternate infinite;}
.c-2{animation: coloring 6s linear alternate infinite;}
.c-3{animation: coloring 7s linear alternate infinite;}
.c-4{animation: coloring 6s linear alternate infinite;}
.c-5{animation: coloring 5s linear alternate infinite;}
.c-6{animation: coloring 6s linear alternate infinite;}
.c-7{animation: coloring 7s linear alternate infinite;}
.c-8{animation: coloring 6s linear alternate infinite;}
.c-9{animation: coloring 5s linear alternate infinite;}
.c-10{animation: coloring 6s linear alternate infinite;}
.c-11{animation: coloring 7s linear alternate infinite;}
.c-12{animation: coloring 6s linear alternate infinite;}
@keyframes coloring{
0%{background-color: black; color:yellow;}
50%{background-color:yellow; color:red;}
to{background-color: red; color: black;}
}
</style>