/* CSS-Styles für bergraum.de */

@import url(https://fonts.googleapis.com/css?family=Playfair+Display:400,400italic);

* {
	box-sizing: border-box;
	padding: 0;
	margin: 0; 
}

body {
   background-color: #e8e2db;   
   font-family: 'Montserrat'; 
   color: #6f6f6f;
   font-size: 1em;
   line-height: 1.4em;
   text-decoration: none;
   margin: 0;
   padding: 0;     
 }

 a:link {
   color: #6f6f6f;
   font-size: 1em;
   line-height: 1.4em;
   text-decoration: none;  
 }
 
 a:visited { 
   color: #6f6f6f;
   font-size: 1em;
   line-height: 1.4em;
   text-decoration: none;
 }

.headline {
   display: block;
   margin: 5% 0 0 0;
   padding: 0 10% 0 10%;
   text-align: center;
   font-family: 'Playfair Display', serif;  
   font-style: italic;
   font-size: 2em;
   line-height: 1.4em;
 }

.headline-left {
 margin: 5% 0 0 0;
 padding: 0 5% 0 5%;
 text-align: left; 
 font-family: 'Playfair Display', serif;   
 font-style: italic;
 font-size: 2em;
 line-height: 1.4em;
}

.text {  
   display: block;  
   text-align: center;
   font-family: 'Montserrat'; 
   margin: 2.5% 0 0 0;
   padding: 0 15% 0 15%;
   font-size: 1em;
   line-height: 1.4em;   
 }

 .spaltentext {
  grid-column: 1 / 13;
  grid-row: 3 / 4;  
  column-count: 2; 
  column-gap: 4em;  
  column-rule-style:dotted; 
  column-rule-width:1px; 
  column-rule-color:silver;
  z-index: 100000;
  margin: 5% 10% 0 10%;
  font-size: 1em;
  line-height: 1.4em;
}

.content  {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;  
  grid-gap: 6px 6px;
  margin: 2.5% 0 0 0;
  font-size: 1em;
  line-height: 1.4em; 
  } 
  
.galerie {    
    column-count: 4;  
    column-gap: 10px; 
    margin: 2.5% 10% 0 10%;   
  }
  
.galerie img {  
    padding: 10px; 
    max-width: 100%;
    display: block;
  }  

  @media only screen and (max-width: 767px) {

    .headline {
      margin: 5% 0 0 0;
      padding: 0 10% 0 10%;
      text-align: center;   
      font-style: italic;
      font-size: 1.75em;
      line-height: 1.35em;
    } 
    
    .text {   
      display: inline-block; 
      text-align: center;
      margin: 5%;      
      padding: 0 10% 0 10%;
      font-size: 1em;
      line-height: 1.4em;
    }

    .spaltentext {
      grid-column: 1 / 13;
      grid-row: 3 / 4;  
      column-count: 1; 
      column-gap: 4em;  
      column-rule-style:dotted; 
      column-rule-width:1px; 
      column-rule-color:silver;
      z-index: 100000;
      margin: 5% 10% 0 10%;
      font-size: 1em;
      line-height: 1.4em;
    }

    .galerie {    
      column-count: 3;  
      column-gap: 2.5%; 
      margin: 5% 2.5%;  
    }
    
   .galerie img {  
      padding: 5% 0; 
      max-width: 100%;        
     } 
     
    
    
    

 }