:root {
  font-family: Raleway, sans-serif;
  font-size: clamp(8px, 1.5vw, 20px);
  background-color: #eee;
  color: #333;
}

body {
  margin: 0;
  padding: 1em;
}

.gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr 2fr) 1fr;
  gap: 0.5em 0.9330127019em;
  padding: 1em;
  filter: drop-shadow(1px 4px 2px rgba(0, 0, 0, 0.5));
}
.gallery > * {
  display: block;
  list-style: none;
  grid-column-end: span 3;
  grid-row-end: span 2;
  clip-path: polygon(75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%, 25% 0, 75% 0);
  padding: 0;
  margin: 0;
  border: 0;
  width: 100%;
  aspect-ratio: 1/0.8660254038;
  overflow: hidden;
  overflow: clip;
}
.gallery > * .content {
  display: block;
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
  border: 0;
  clip-path: inset(0 0 0);
}
.gallery > * .content p,
.gallery > * .content h1,
.gallery > * .content h2,
.gallery > * .content h3,
.gallery > * .content h4,
.gallery > * .content h5,
.gallery > * .content h6 {
  margin: 0;
  padding: 0 0 0;
}
.gallery > * .content h1 {
  text-align: center;
}
.gallery > * .content img {
  position: absolute;
  height: 100%;
  margin: 0 auto;
  padding: 0;
  top: 0;
  left: 0;
}
.gallery > * .content::before {
  content: "";
  width: 50%;
  height: 100%;
  padding: 0;
  margin: 0;
  border: 0 none;
  shape-margin: 0;
  float: right;
  shape-outside: polygon(50% 0%, 100% 0%, 100% 100%, 50% 100%, 100% 50%);
}
.gallery > *::before {
  content: "";
  width: 50%;
  height: 100%;
  padding: 0;
  margin: 0;
  border: 0 none;
  shape-margin: 0;
  float: left;
  shape-outside: polygon(0% 0%, 50% 0%, 0% 50%, 50% 100%, 0% 100%);
}
.gallery > *:nth-child(-n+4):nth-child(n+1) {
  --grid-row-base: 1;
  grid-row-start: 1;
}
.gallery > *:nth-child(-n+8):nth-child(n+5) {
  --grid-row-base: 3;
  grid-row-start: 3;
}
.gallery > *:nth-child(-n+12):nth-child(n+9) {
  --grid-row-base: 5;
  grid-row-start: 5;
}
.gallery > *:nth-child(-n+16):nth-child(n+13) {
  --grid-row-base: 7;
  grid-row-start: 7;
}
.gallery > *:nth-child(-n+20):nth-child(n+17) {
  --grid-row-base: 9;
  grid-row-start: 9;
}
.gallery > *:nth-child(4n+1) {
  grid-column-start: 1;
}
.gallery > *:nth-child(4n+2) {
  grid-column-start: 3;
}
.gallery > *:nth-child(4n+3) {
  grid-column-start: 5;
}
.gallery > *:nth-child(4n+4) {
  grid-column-start: 7;
}
.gallery > *:nth-child(4n+1) {
  grid-row-start: calc(var(--grid-row-base) + 1) !important;
}
.gallery > *:nth-child(4n+3) {
  grid-row-start: calc(var(--grid-row-base) + 1) !important;
}
.gallery > *:nth-child(n+21) {
  display: none;
}
.gallery .blank {
  display: none;
}
.gallery > * {
  display: block;
  list-style: none;
  grid-column-end: span 3;
  grid-row-end: span 2;
  clip-path: polygon(75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%, 25% 0, 75% 0);
  padding: 0;
  margin: 0;
  border: 0;
  width: 100%;
  aspect-ratio: 1/0.8660254038;
  overflow: hidden;
  overflow: clip;
  background: #333;
}
.gallery > * .content {
  display: block;
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
  border: 0;
  clip-path: inset(0 0 0);
}
.gallery > * .content p,
.gallery > * .content h1,
.gallery > * .content h2,
.gallery > * .content h3,
.gallery > * .content h4,
.gallery > * .content h5,
.gallery > * .content h6 {
  margin: 0;
  padding: 0 0 0;
}
.gallery > * .content h1 {
  text-align: center;
}
.gallery > * .content img {
  position: absolute;
  height: 100%;
  margin: 0 auto;
  padding: 0;
  top: 0;
  left: 0;
}
.gallery > * .content::before {
  content: "";
  width: 50%;
  height: 100%;
  padding: 0;
  margin: 0;
  border: 0 none;
  shape-margin: 0;
  float: right;
  shape-outside: polygon(50% 0%, 100% 0%, 100% 100%, 50% 100%, 100% 50%);
}
.gallery > *::before {
  content: "";
  width: 50%;
  height: 100%;
  padding: 0;
  margin: 0;
  border: 0 none;
  shape-margin: 0;
  float: left;
  shape-outside: polygon(0% 0%, 50% 0%, 0% 50%, 50% 100%, 0% 100%);
}
.gallery h3 {
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.75);
}

h1 {
  font-size: 3em;
  text-align: center;
  transform-origin: center;
  transform: translate(-33%, 1.5em) rotateZ(-30deg);
  filter: drop-shadow(1px 4px 2px rgba(0, 0, 0, 0.35));
}

h3 {
  text-align: center;
  width: 50%;
  margin: auto auto 1em;
}

#thumb-001 {
  background-image: url(http://unsplash.it/1280?random&gravity=center&nonce=00558);
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: scroll;
}

#thumb-002 {
  background-image: url(http://unsplash.it/1280?random&gravity=center&nonce=00403);
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: scroll;
}

#thumb-003 {
  background-image: url(http://unsplash.it/1280?random&gravity=center&nonce=00843);
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: scroll;
}

#thumb-004 {
  background-image: url(http://unsplash.it/1280?random&gravity=center&nonce=02579);
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: scroll;
}

#thumb-005 {
  background-image: url(http://unsplash.it/1280?random&gravity=center&nonce=00638);
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: scroll;
}

#thumb-006 {
  background-image: url(http://unsplash.it/1280?random&gravity=center&nonce=00156);
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: scroll;
}

#thumb-007 {
  background-image: url(http://unsplash.it/1280?random&gravity=center&nonce=00916);
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: scroll;
}

#thumb-008 {
  background-image: url(http://unsplash.it/1280?random&gravity=center&nonce=02274);
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: scroll;
}

#thumb-009 {
  background-image: url(http://unsplash.it/1280?random&gravity=center&nonce=00832);
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: scroll;
}

#thumb-010 {
  background-image: url(http://unsplash.it/1280?random&gravity=center&nonce=05985);
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: scroll;
}

#thumb-011 {
  background-image: url(http://unsplash.it/1280?random&gravity=center&nonce=04074);
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: scroll;
}

#thumb-012 {
  background-image: url(http://unsplash.it/1280?random&gravity=center&nonce=02678);
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: scroll;
}

#thumb-013 {
  background-image: url(http://unsplash.it/1280?random&gravity=center&nonce=06751);
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: scroll;
}

#thumb-014 {
  background-image: url(http://unsplash.it/1280?random&gravity=center&nonce=01242);
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: scroll;
}

#thumb-015 {
  background-image: url(http://unsplash.it/1280?random&gravity=center&nonce=04306);
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: scroll;
}

#thumb-016 {
  background-image: url(http://unsplash.it/1280?random&gravity=center&nonce=06127);
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: scroll;
}

#thumb-017 {
  background-image: url(http://unsplash.it/1280?random&gravity=center&nonce=09746);
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: scroll;
}

#thumb-018 {
  background-image: url(http://unsplash.it/1280?random&gravity=center&nonce=07354);
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: scroll;
}

#thumb-019 {
  background-image: url(http://unsplash.it/1280?random&gravity=center&nonce=04028);
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: scroll;
}

#thumb-020 {
  background-image: url(http://unsplash.it/1280?random&gravity=center&nonce=03572);
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: scroll;
}

/*# sourceMappingURL=gallery.css.map */