@charset "utf-8";
/* CSS Document */

/*################# index page #############################*/
.index-bildcontainer{
    display: grid;
    grid-template-rows: 80px; auto 1fr;
    grid-template-columns: 1fr auto 1fr;  
}
.index-bildtext{
  Display: flex;
    flex-direction: column;
    grid-area: 2/2/3/3;
    color:white;
    max-width: 98%;
    margin-inline:auto;
    
}
.index-bild{
    display:block;
    grid-area: 1/1/4/4;   
}

/*############### galery page ############################*/
.gallery {
    display:flex;
    flex-flow: wrap;
    Max-width:1800px;
    margin:0px auto;
    grid-gap: 0.4vw;
}
    
.gallery-bild{
    display: block;
    max-width: 400px;
    margin: auto;
}
/*############### content containers ############################*/
.center-container{
    max-width:160ch;
    margin-inline:auto;
}
.card-grid-equal{
    display: grid;
     grid-template-columns:1fr;
    grid-template-rows: auto auto;
    grid-gap: 1vw;
}
.equal-left{
   display: block;
    grid-area: 1/1/2/2;
    min-width: 50%;
}
.equal-right{
       display: block;
    grid-area: 2/1/2/2;
}

@media screen and (min-width:960px) {
.card-grid-equal{
    display: grid;
     grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
}
.equal-left{
   display: block;
    grid-area: 1/1/2/2;
    min-width: 50%;
}
.equal-right{
       display: block;
    grid-area: 1/2/2/3;
}
}
/* #######################################################################
reusables
#########################################################################*/

.space5 {
     margin-bottom:0.5em;
}
.space10{
    margin-bottom:1em;
}
.space20{
    margin-bottom:2em;
}
.space50{
    margin-bottom:5em;
}
.centerit{
    margin-inline:auto;
}
.text-centerd{
    text-align: center;
}
.absolute-center{
    position:absolute;
    inset:0;
    margin:auto;
    
}
