/* the grid */

.platzhalter {
	width: 12.6em;
	height: 15.0em;
	box-shadow: none;
}

.grid-1 {
  display: grid;
  width: 95%;
  max-width: 85em;
  margin: 3% auto;
  grid-template-columns: 0.75fr;
  grid-template-rows: auto 1fr 1fr 1fr 1fr 1fr 
                           1fr 1fr 1fr 1fr 1fr auto;                      
  grid-gap: 2em;
  }

.panel-23, a { background-image: url(../Bilder/Druckgrafik/2006_Herbert-Blomstedt_grid.JPG);}
.panel-22, a { background-image: url(../Bilder/Druckgrafik/2006_Akt_1C_grid.JPG);}
.panel-21, a { background-image: url(../Bilder/Druckgrafik/2006_Baby_grid.JPG);}
.panel-20, a { background-image: url(../Bilder/Druckgrafik/2006_Liebespaar_grid.JPG);}
.panel-19, a { background-image: url(../Bilder/Druckgrafik/2005_Herbert-Blomstedt_grid.JPG);}
.panel-18, a { background-image: url(../Bilder/Druckgrafik/2005_Riccardo-Chailly_grid.JPG);}
.panel-171, a { background-image: url(../Bilder/Druckgrafik/2004_Es-ist-was-es-ist_grid.JPG);}
.panel-170, a { background-image: url(../Bilder/Druckgrafik/2004_Gesaenge-an-die-Sonne_grid.JPG);}

.panel-169, a { background-image: url(../Bilder/Druckgrafik/2004_Zukunft_grid.JPG);}
.panel-168, a { background-image: url(../Bilder/Druckgrafik/2004_Schlaft-nicht_grid.JPG);}
.panel-95, a { background-image: url(../Bilder/Druckgrafik/1994_Juedisches-Maedchen_grid.JPG);}
.panel-9, a { background-image: url(../Bilder/Druckgrafik/1990_Fruehling-im-Herbst_grid.JPG);}
.panel-167, a { background-image: url(../Bilder/Druckgrafik/1988_Japanischer-Strand_grid.JPG);}

.panel-17, a { background-image: url(../Bilder/Druckgrafik/2004_Diagonale_grid.JPG);}
.panel-161, a { background-image: url(../Bilder/Druckgrafik/2004_Mund-der-Wahrheit_grid.JPG);}
.panel-16, a { background-image: url(../Bilder/Druckgrafik/2002_Engel-in-blau_grid.JPG);}
.panel-15, a { background-image: url(../Bilder/Druckgrafik/2001_Bachzyklus-B_grid.JPG);}
.panel-14, a { background-image: url(../Bilder/Druckgrafik/1996_Kurt-Masur-dirigiert_grid.JPG);}
.panel-13, a { background-image: url(../Bilder/Druckgrafik/1993_sich-loesen_grid.JPG);}
.panel-12, a { background-image: url(../Bilder/Druckgrafik/1993_nach-Kahlil-Gibran_grid.JPG);}
.panel-11, a { background-image: url(../Bilder/Druckgrafik/1990_Beim-Knuepfen_grid.JPG);}
.panel-10, a { background-image: url(../Bilder/Druckgrafik/1990_Mutter-mit-Kind_grid.JPG);}
.panel-105, a { background-image: url(../Bilder/Druckgrafik/1986_Ueberwindung_grid.JPG);}
.panel-10a, a { background-image: url(../Bilder/Druckgrafik/1990_Vater-mit-Kind_grid.JPG);}
.panel-9, a { background-image: url(../Bilder/Druckgrafik/1990_Fruehling-im-Herbst_grid.JPG);}
.panel-8, a { background-image: url(../Bilder/Druckgrafik/1988_Pogromnacht_grid.JPG);}
.panel-7, a { background-image: url(../Bilder/Druckgrafik/1988_Schmetterlingszyklus_grid.JPG);}

.panel-65, a { background-image: url(../Bilder/Druckgrafik/1990_Baum-Hoffnung_grid.JPG);}
.panel-64, a { background-image: url(../Bilder/Druckgrafik/1988_Passionsbaum_grid.JPG);}

.panel-6, a { background-image: url(../Bilder/Druckgrafik/1987_Victor-Jara_grid.JPG);}
.panel-5, a { background-image: url(../Bilder/Druckgrafik/1988_Das-Kind-sagt_grid.JPG);}
.panel-4, a { background-image: url(../Bilder/Druckgrafik/1983_Matthaeuspassion_grid.JPG);}
.panel-3, a { background-image: url(../Bilder/Druckgrafik/1982_Durchblick_grid.JPG);}
.panel-2, a { background-image: url(../Bilder/Druckgrafik/1980_Inkarnation_grid.JPG);}
.panel-115, a { background-image: url(../Bilder/Druckgrafik/1977_Fisch-auf-rotem-Grund_grid.JPG);}
.panel-1, a { background-image: url(../Bilder/Druckgrafik/1977_Selbstbildnis_grid.JPG);}
.panel-117, a { background-image: url(../Bilder/Druckgrafik/1980_Ein-paar-Regeln_grid.JPG);}





@media only screen and (min-width: 500px) {
	
  .grid-1 {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto 1fr 1fr 1fr 1fr 1fr  auto;                      
    }  
  .panel-title,  
  .panel-copyright {
    grid-column: span 2;
  }
  
  .panel-copyright {
    text-align: right;
  }
}


/* media query 2 */
@media only screen and (min-width: 768px) {
	
  
  .grid-1 {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto 
                        1fr 1fr 1fr 1fr auto;
    }
    
  .panel-title,
  .panel-copyright {
    grid-column: span 3;
  }
}

/* media query 3 */
@media only screen and (min-width: 1100px) {	
  
 .grid-1 {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto 1fr 1fr 1fr auto;
    }
 
  .panel-title  {grid-column: span 4;}
  .panel-copyright {
    grid-column: span 4;
  } 
} 
 
  /* media query 4 */
@media only screen and (min-width: 1280px) {

.platzhalter {
	width: 12.6em;
	height: 15.5em;
}	
	
  .grid-1 {
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: auto 1fr 1fr auto;
    }
  
 .panel-title  {grid-column: span 5;} 
  .panel-copyright {
    grid-column: span 5;
  }  
}