.album-grid {
  --item-width: 18ch;
  display: grid;
  grid-column: 3/span 6;
  grid-template-columns: repeat(3, minmax(10px, var(--item-width)));
  grid-auto-rows: minmax(10px, calc(0.75 * var(--item-width)));
  gap: calc(1 * var(--padding-stack));
  align-items: start;
  justify-items: start;
}
.album-grid.wide {
  grid-column: 2/span 8;
  grid-template-columns: repeat(4, minmax(10px, var(--item-width)));
}
.album-grid__image {
  width: 100%;
  height: 100%;
}
.album-grid__image .figure-inner {
  overflow: hidden;
  height: 100%;
}
.album-grid__image.portrait {
  grid-row: auto/span 2;
}
.album-grid__image figure {
  height: 100%;
  width: 100%;
}
.album-grid__image figure img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  transition: all 0.3s ease-out;
}
.album-grid__image:hover img {
  transform: scale(1.1);
}
.album-grid__image figcaption {
  min-height: calc(var(--s-1) * var(--ratio));
  width: 100%;
}
.album-grid__image figcaption > p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.to-top {
  position: fixed;
  right: var(--padding-stack);
  bottom: var(--padding-stack);
  padding-block-start: var(--padding-stack);
  transition: all 0.3s ease;
}
.to-top > .icon {
  border: 2px solid var(--color-accent);
  padding: 8px;
  border-radius: 50%;
}
.to-top svg {
  transform: scale(1);
  transition: transform 0.2s ease;
}
.to-top:hover svg {
  transform: scale(1.5);
}
.to-top.hidden {
  opacity: 0;
}

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