.figure-number {
  display: none;
}

a::before,
a::after {
  display: none!important;
}

.filter {
  text-align: center;
  align-items: center;
  justify-content: center;
  display: flex;
  gap: .2em;

  & label,input {
    cursor: pointer;
  }
}

#content:has(#filter-shared:checked) figure:has(a[href*="images\/album"]) {
  display: none;
}

.album-wall {
  display: grid;
  grid-template-columns: repeat(auto-fill, calc(var(--font-size) * 15));
  gap: 0 1.5em;
  justify-content: center;
  /* max-width: max-content; */
  width: 99vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -49.5vw;
  margin-right: -49.5vw;

  @media screen and (width <= 1920px) {
    grid-template-columns: repeat(auto-fill, calc(var(--font-size) * 12));
  }

  @media screen and (width <= 800px) {
    grid-template-columns: repeat(auto-fill, calc(var(--font-size) * 10));
  }

  @media screen and (width <= 650px) {
    grid-template-columns: repeat(2, 1fr);
    gap: 1em .5em;
    width: 100%;
    left: 0;
    right: 0;
    margin: 0;
  }

  @media (pointer: fine) and (hover: hover) {
    & figure {
      &:hover {
        transform: rotate(0);
        z-index: 1;
        filter: grayscale(0) blur(0);

        /* &::after { */
        /*   opacity: 0; */
        /* } */

        & figcaption {
          opacity: 1;
          transform: translateY(0);
        }
      }
    }
  }

  p {
    display: none;
  }

  & figure {
    margin: 0;
    position: relative;
    transform: perspective(500px) rotateX(5deg) rotateY(-5deg) rotateZ(1deg);
    transition:
      transform .25s ease-in-out,
      opacity .8s ease-in-out,
      filter 1.5s ease-in-out,
      display .25s allow-discrete ease-in-out;
    transform-origin: center bottom;
    filter: grayscale(0.95) blur(.55px);

    & figcaption {
      transition: transform .25s ease-in-out, opacity .25s ease-in-out;
      transition-delay: .5s;
      opacity: 0;
      transform: translateY(-25%);
    }

    @starting-style {
      opacity: 0;
    }

    /* &::after { */
    /*   content: ''; */
    /*   position: absolute; */
    /*   top: 0; */
    /*   left: 0; */
    /*   width: 100%; */
    /*   height: 95%; */
    /*   background-image: url("/images/common/album-cover.png"); */
    /*   background-size: contain; */
    /*   pointer-events: none; */
    /*   transition: opacity .25s ease-in-out; */
    /*   opacity: 0.25; */
    /* } */

    @media screen and (width <= 400px) {
      transform: unset;
      filter: grayscale(0) blur(0);

      & figcaption {
        opacity: 1;
        transform: none;
      }

      /* &::after { */
      /*   opacity: 0; */
      /* } */
    }
  }

  & img {
    object-fit: cover;
    aspect-ratio: 1;
    width: 100%;
    box-shadow: -5px 5px 5px var(--color-box-shadow)!important;
    border-radius: 3px;
  }
}