* {
	scrollbar-width: auto;
	scrollbar-color: #42d680e0 #d2ddf7ff !important;
}

.container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr ;	
}

.container div:not(.content){
 margin: 1.5vw 1.5vw 1.5vw 1.5vw;  /*grid gap */

	border-style: dashed; 
	border-width: 2px;
	border-color:#00FF00;

	background-color: tomato;
}


.box {aspect-ratio: 1 / 1;
overflow: hidden;
position: relative;
}
.content { position: absolute;
bottom: 5px;
left: 5px;
z-index: 1;
}

img { 
z-index: 0;
}

.container a {cursor:pointer;
    font-weight: lighter;
    font-size:1vw;

}
.container a:link {color:white;
}
.container a:hover {color: #fedaff;
}
.container a:visited {color: #fedaff;
}
.container a:active {color: #f1f1f1;
}

.kolumn1 { grid-column-start: 1;
grid-column-end: 2;
grid-row: 2 / span 2;
overflow: hidden;
position: relative;
}
.kolumn2 { grid-column-start: 7;
grid-column-end: 8;
grid-row: 2 / span 2;
overflow: hidden;
position: relative;
}







/* counters to check if its workin 

.container {
  counter-reset: test;
}

.container div:before {
  counter-increment: test;
  content: ''counter(test)'';
  margin: auto; 
padding-bottom: 100%;
}
*/