﻿.layoutDigital {
  display: grid;
  max-width: 1080px;
  max-height:1080px;
  grid-template-columns: 7.4% 7.4% 7.4% 7.4% 7.4% 7.4% 7.4% 7.4% 7.4% 7.4% 7.4% 7.4%;
  grid-template-rows:    7.4% 7.4% 7.4% 7.4% 7.4% 7.4% 7.4% 7.4% 7.4% 7.4% 7.4% 7.4%;
  gap: 1% 1%;
  grid-auto-flow: column dense;
  justify-content: stretch;
  align-content: stretch;
  justify-items: stretch;
  align-items: stretch;
        margin: 2rem;
  grid-template-areas:
    "img8 img8 img8 img9 img9 img9 img9 img7 img7 img7 img7 img7"
    "img8 img8 img8 img9 img9 img9 img9 img7 img7 img7 img7 img7"
    "img8 img8 img8 img9 img9 img9 img9 img7 img7 img7 img7 img7"
    "img4 img4 img4 img6 img6 img6 img6 img7 img7 img7 img7 img7"
    "img4 img4 img4 img6 img6 img6 img6 img7 img7 img7 img7 img7"
    "img4 img4 img4 img6 img6 img6 img6 img5 img5 img5 img5 img5"
    "img4 img4 img4 text text text text img5 img5 img5 img5 img5"
    "img4 img4 img4 text text text text img5 img5 img5 img5 img5"
    "img1 img1 img1 img1 img2 img2 img2 img2 img3 img3 img3 img3"
    "img1 img1 img1 img1 img2 img2 img2 img2 img3 img3 img3 img3"
    "img1 img1 img1 img1 img2 img2 img2 img2 img3 img3 img3 img3"
    "img1 img1 img1 img1 img2 img2 img2 img2 img3 img3 img3 img3";
}

.img1 { grid-area: img1; 
         align-self: end; 
         justify-self: start;}

.img2 { grid-area: img2;  
         justify-self: center;
         align-self: end;}

.img3 { grid-area: img3; 
        justify-self: end;
        align-self: end;}

.img4 { grid-area: img4; 
         justify-self: stretch;
         align-self: center;}

.img5 { grid-area: img5; 
         justify-self: end;
         align-self: center;}

.img6 { grid-area: img6; 
         align-self: center; 
         justify-self: center;}

.img7 { grid-area: img7; 
         justify-self: end;
         align-self: start;}

.img8 { grid-area: img8; 
         justify-self: start;
         align-self: start;}

.img9 { grid-area: img9; 
         align-self: start;
         justify-self: center;}

.text { grid-area: text;
         align-self: center; 
         justify-self: center;}

.layoutAnalog {
  display: grid;
  max-width: 1080px;
  max-height:1080px;
  grid-template-columns: 7.4% 7.4% 7.4% 7.4% 7.4% 7.4% 7.4% 7.4% 7.4% 7.4% 7.4% 7.4%;
  grid-template-rows:    7.4% 7.4% 7.4% 7.4% 7.4% 7.4% 7.4% 7.4% 7.4% 7.4% 7.4% 7.4%;
  gap: 1% 1%;
  grid-auto-flow: column dense;
  justify-content: stretch;
  align-content: stretch;
  justify-items: stretch;
  align-items: stretch;
        margin: 2rem;
  grid-template-areas:
    "imgA1 imgA1 imgA1 imgA1 imgA2 imgA2 imgA2 imgA2 imgA3 imgA3 imgA3 imgA3"
    "imgA1 imgA1 imgA1 imgA1 imgA2 imgA2 imgA2 imgA2 imgA3 imgA3 imgA3 imgA3"
    "imgA1 imgA1 imgA1 imgA1 imgA2 imgA2 imgA2 imgA2 imgA3 imgA3 imgA3 imgA3"
    "imgA1 imgA1 imgA1 imgA1 imgA2 imgA2 imgA2 imgA2 imgA3 imgA3 imgA3 imgA3"
    "imgA5 imgA5 imgA5 imgA5 imgA5 imgA6 imgA6 imgA6 imgA6 imgA4 imgA4 imgA4"
    "imgA5 imgA5 imgA5 imgA5 imgA5 imgA6 imgA6 imgA6 imgA6 imgA4 imgA4 imgA4"
    "imgA5 imgA5 imgA5 imgA5 imgA5 imgA6 imgA6 imgA6 imgA6 imgA4 imgA4 imgA4"
    "imgA7 imgA7 imgA7 imgA7 imgA7 textA textA textA textA imgA8 imgA8 imgA8"
    "imgA7 imgA7 imgA7 imgA7 imgA7 textA textA textA textA imgA8 imgA8 imgA8"
    "imgA7 imgA7 imgA7 imgA7 imgA7 imgA9 imgA9 imgA9 imgA9 imgA8 imgA8 imgA8"
    "imgA7 imgA7 imgA7 imgA7 imgA7 imgA9 imgA9 imgA9 imgA9 imgA8 imgA8 imgA8"
    "imgA7 imgA7 imgA7 imgA7 imgA7 imgA9 imgA9 imgA9 imgA9 imgA8 imgA8 imgA8";
}

.imgA1 { grid-area: imgA1; 
         /*justify-self: start;
         align-self: start;*/}

.imgA2 { grid-area: imgA2; 
         /*align-self: start;
         justify-self: center;*/}

.imgA3 { grid-area: imgA3; 
         /*justify-self: end;
         align-self: start;*/}

.imgA4 { grid-area: imgA4; 
        /* justify-self: end;
         align-self: center;*/}

.imgA5 { grid-area: imgA5; 
         /*justify-self: start;
         align-self: center;*/}

.imgA6 { grid-area: imgA6; 
        /*justify-self: center;
        align-self: center;*/}

.imgA7 { grid-area: imgA7;
         align-self: end; 
         justify-self: stretch;}

.imgA8 { grid-area: imgA8; 
        justify-self: end;
        align-self: end;}

.imgA9 { grid-area: imgA9; 
         justify-self: center;
         align-self: end;}

.textA { grid-area: textA; 
         align-self: center; 
         justify-self: center;}

