@charset "UTF-8";
html, body {
  height: 100%;
}

body {
  align-items: center;
  background-color: ghostwhite;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  filter: drop-shadow(1.5vmin 1.5vmin rgba(0, 0, 0, 0.125));
  font-family: 'Hepta Slab', serif;
  justify-items: center;
}

.🔳 {
  background-blend-mode: overlay;
  box-sizing: border-box;
  height: 40vmin;
  padding: 2vmin;
  width: 34vmin;
}
.🔳::before {
  background-size: contain;
  content: '';
  display: block;
  padding-top: 100%;
  width: 100%;
}
.🔳::after {
  color: white;
  display: block;
  font-size: 4vmin;
  line-height: 1;
  padding: 2vmin;
  text-align: center;
  text-shadow: 0 -1px rgba(0, 0, 0, 0.25), 0 2px 1vmin rgba(0, 0, 0, 0.125);
}
.🔳:nth-child(1) {
  background: radial-gradient(circle at center, transparent 10%, rgba(0, 0, 0, 0.5) 11%) 0 0/20% 20%, radial-gradient(circle, transparent 10%, rgba(0, 0, 0, 0.5) 11%) 12% 12%/20% 20%;
  background-color: #F1F8E9;
  transform: rotate(0deg);
}
.🔳:nth-child(1)::before {
  background-image: url(https://picsum.photos/200?1);
}
.🔳:nth-child(1)::after {
  content: "7/21/2010";
}
.🔳:nth-child(2) {
  background: repeating-linear-gradient(-45deg, transparent, transparent 5%, black 5%, black 10%);
  background-color: #FFF3E0;
  transform: rotate(3deg);
}
.🔳:nth-child(2)::before {
  background-image: url(https://picsum.photos/200?2);
}
.🔳:nth-child(2)::after {
  content: "2/6/2012";
}
.🔳:nth-child(3) {
  background: repeating-linear-gradient(to right, transparent, transparent 4%, black 4%, black 8%);
  background-color: #E0F7FA;
  transform: rotate(-3deg);
}
.🔳:nth-child(3)::before {
  background-image: url(https://picsum.photos/200?3);
}
.🔳:nth-child(3)::after {
  content: "5/16/2012";
}
.🔳:nth-child(4) {
  background: radial-gradient(circle, black 10%, transparent 10%) 0 0/20% 20%, radial-gradient(circle, black 10%, transparent 10%) 12% 12%/20% 20%;
  background-color: #FFEBEE;
  transform: rotate(-1deg);
}
.🔳:nth-child(4)::before {
  background-image: url(https://picsum.photos/200?4);
}
.🔳:nth-child(4)::after {
  content: "6/8/2014";
}
.🔳:nth-child(5) {
  background: linear-gradient(135deg, black 25%, transparent 25%) -10% 0/20% 20%, linear-gradient(225deg, black 25%, transparent 25%) -10% 0/20% 20%, linear-gradient(315deg, black 25%, transparent 25%) 0 0/20% 20%, linear-gradient(45deg, black 25%, transparent 25%) 0 0/20% 20%;
  background-color: #EDE7F6;
  transform: rotate(3deg);
}
.🔳:nth-child(5)::before {
  background-image: url(https://picsum.photos/200?5);
}
.🔳:nth-child(5)::after {
  content: "1/16/2011";
}
.🔳:nth-child(6) {
  background: repeating-linear-gradient(45deg, transparent, transparent 5%, black 5%, black 10%);
  background-color: #E3F2FD;
  transform: rotate(-2deg);
}
.🔳:nth-child(6)::before {
  background-image: url(https://picsum.photos/200?6);
}
.🔳:nth-child(6)::after {
  content: "2/4/2011";
}