.album-gallery {
  line-height: 0;
  columns: 1;
  column-gap: 1.5rem;
}
.album-gallery li {
  display: block;
  padding-bottom: 1.5rem;
  break-inside: avoid;
}
article {
  -ms-hyphens: auto;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  hyphens: auto;
}
@media screen and (min-width: 60rem) {
  .album-gallery {
    columns: 2;
  }
}

/* Index-Card */

.index-card {
  /* border: solid 1px black; */
  padding: 1em 1em 1em;
  font-family: var(--font-family-mono);
  line-height: 1.5em;
  
}
.index-card a, strong  {

}
.index-shadow {
  margin-top: 1em;
  background: black;
  border: solid 1px #FFF;

  clip-path: polygon(
    0 10px,
    10px 0,
    calc(100% - 10px) 0,
    100% 10px,
    100% calc(100% - 10px),
    calc(100% - 10px) 100%,
    10px 100%,
    0% calc(100% - 10px),
    0% 10px);
}
.index-card {
  margin: -1px;
  display: inline-block;
  padding: 20px;
  border: dashed 1.5px #000;/*optional*/
  border-style: dashed;
  border-image-source: url("../../icons/border4.png");
  background: white;
  border-image-slice: 2;
  border-image-repeat: round;
  background: white;
  width: calc(100% - 2.55em);

  clip-path: polygon(
    0 11.5px,
    11.5px 0,
    calc(100% - 11.5px) 0,
    100% 11.5px,
    100% calc(100% - 11.5px),
    calc(100% - 11.5px) 100%,
    11.5px 100%,
    0% calc(100% - 11.5px),
    0% 11.5px);
}

.index-card {
  position: relative;
}

.index-card::before {
  content: "";
  display: block;
  position: absolute;
  height: 16px;
  width: 16px;
  border-radius: 8px;
  background: black;
  top: 23px;
  left: 37%;
}

.index-card::after {
  content: "";
  display: block;
  position: absolute;
  height: 16px;
  width: 16px;
  border-radius: 8px;
  background: black;
  top: 23px;
  right: 37%;
}

.index-box {
  margin-bottom: .7em;
}
.index-box.half {
  float:left;
  width: 50%;
}
.index-box.threefourths {
  float:left;
  width: 75%;
}
.index-box.short {
  float:left;
  width: 25%;
}
.index-box.long {
  width: 100%;
}
.index-card .label {
  font-variant-caps: all-small-caps;
  -ms-font-feature-settings: "c2sc", "smcp";
  -moz-font-feature-settings: "c2sc", "smcp";
  -webkit-font-feature-settings: "c2sc", "smcp";
  font-feature-settings: "c2sc", "smcp";
  color: black;
  padding-bottom: .2em;
}
.index-card .label::before {
  content:"[ ";
}
.index-card .label::after {
  content:" ]";
}

@media screen and (max-width: 500px) {
  	.index-box.half {
	  width: 100%;
	}
}