@import "general.css";

#grid-galerie {
  padding: var(--dimensiune-universala);
  display:grid;
  grid-template-columns: repeat(3,1fr);
  grid-row-gap:0.5em;
  grid-column-gap:0.5em;
  counter-reset: nrimag 0;
 }

 #grid-galerie img{
   width: 100%;
   
 }
 #grid-galerie figcaption{
   text-align: center;
   counter-increment: nrimag 1;
 } 
 
#grid-galerie>figure:nth-child(1){
   grid-area: 1/1/2/2;
}
 #grid-galerie>figure:nth-child(2){
  grid-area: 1/2/2/3;
}
 #grid-galerie>figure:nth-child(3){
  grid-area: 1/3/2/4;
}
#grid-galerie>figure:nth-child(4){
  grid-area: 2/1/3/2;
}
#grid-galerie>figure:nth-child(5){
  grid-area: 2/3/3/4;
}
#grid-galerie>figure:nth-child(6){
  grid-area: 3/1/4/2;
}
#grid-galerie>figure:nth-child(7){
  grid-area: 3/3/4/4;
} 
#grid-galerie>figure:nth-child(8){
  grid-area: 4/1/5/2;
} 
#grid-galerie>figure:nth-child(9){
  grid-area: 4/2/5/3;
} 
#grid-galerie>figure:nth-child(10){
  grid-area: 4/3/5/4;
}

#grid-galerie figcaption::before{
  content: counter(nrimag, upper-roman) ") ";
}
 
 #galerie-statica figure{
  border: 1px solid var(--culoare-albastra1); 
  transition: transform 1.2s ease, border 1.2s ease; 
 }

 #galerie-statica figure:hover {
  transform: scale(1.25) rotate(-10deg); 
  border-width: calc(1px + 4px); 
}