.grid {
  //background: #AAEEFF; 
  max-width: 1280px;
}

/* clearfix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}

.grid-item {
  width: 160px;
  height: 160px;
  float: left;
  //background: #D26;
  background-color: rgba(0, 0, 0, 0.1);
  border-color: rgba(0, 0, 0, 0.1);
  margin-bottom: 10px;

  border-width: 2px;
  border-style: solid;  

  border-radius: 10px;
  //padding: 2px;
  overflow: hidden;

}


.grid-item--width2  { width: 320px; }
.grid-item--width3  { width: 480px; }
.grid-item--width4  { width: 640px; }
.grid-item--width5  { width: 800px; }
.grid-item--width6  { width: 960px; }

.grid-item--height2 { height: 320px; }
.grid-item--height3 { height: 480px; }
.grid-item--height4 { height: 640px; }
.grid-item--height5 { height: 800px; }
.grid-item--height6 { height: 960px; }

.grid-item--height-auto { height: auto;}

.grid-sizer { width: 25%; }

.grid-item figure {
	margin-block-start: 0 !important;
  margin-block-end: 0 !important;
  margin-inline-start: 0 !important;
  margin-inline-end: 0 !important;	
}


//.grid-item { border-color: #ff0000; }
/* .grid-item {  border-color: hsla(0, 0%, 0%, 0.5);} */

.grid-header {
  width: 100%;
	display: flex;
	justify-content: space-between;
  text-align: center;
	margin-bottom: 10px;
	background-color: rgba(255,255,255, 0.3);
	border-bottom: 1px solid rgba(0,0,0, 0.3);
}
.grid-main {
}
.grid-footer {
  width: 100%;
	display: flex;
	justify-content: space-between;
	margin-top: 10px;
  background-color: rgba(255,255,255, 0.3);
	border-top: 1px solid rgba(0,0,0, 0.3);

}

@media (prefers-color-scheme: dark) {
  .grid-item {
    border-color: rgba(255, 255, 255, .3);
  }

}