/* photography.css — Photography category listing page */

@layer components {
  @scope (.photography-page) {
    :scope {
      max-inline-size: var(--max-width);
      margin-inline: auto;
    }

    .photography-list-item {
      position: relative;
      overflow: hidden;
    }

    .photography-list-item img {
      object-fit: cover;
      inline-size: 100%;
      aspect-ratio: 4 / 3;

      @media (min-width: 640px) {
        aspect-ratio: auto;
      }
    }

    .caption {
      position: absolute;
      inset-block: 0;
      inset-inline: 0;
      display: flex;
      align-items: flex-end;
      justify-content: flex-end;
      padding-inline: 2rem;
      padding-block-end: 1.5rem;

      @media (min-width: 768px) {
        padding-block-end: 2.5rem;
        padding-inline: 3.5rem;
      }

      a {
        color: var(--color-white);

        &::after {
          content: "";
          position: absolute;
          inset: 0;
        }
      }
    }
  }
}