.psw-photos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-column-gap: var(--PADD--SM);
  grid-row-gap: var(--PADD--SM);
  justify-content: center;

  .ps-widget--story & {
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: var(--PADD);
  }
}

.psw-photos__photo {
  img {
    border-radius: var(--BORDER-RADIUS--MD);
    vertical-align: middle;
  }

  .ps-widget--story & {
    width: 100%;

    @include mq($until: tablet) {
      &:nth-child(n+5) {
        display: none;
      }
    }
  }
}

.psw-photos__photo-link {
  display: block;

  .ps-widget--story & {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: end;
    gap: var(--PADD);
    aspect-ratio: 3 / 4;
    padding-block: var(--PADD);
    background-color: var(--wp--preset--color--base-light);
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: var(--BORDER-RADIUS--MD);
    transition: box-shadow .2s ease;

    .pso-avatar {
      background-color: rgba(0,0,0, .5);
      backdrop-filter: blur(8px);
    }

    &:hover {
      box-shadow: inset 0 0 0 4px rgba(0,0,0, .25);
    }
  }
}

.psw-photos__photo-user {
  max-width: 80%;
  padding: 6px 8px;
  font-size: 12px;
  line-height: 1;
  font-weight: 500;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.25);
  background-color: rgba(0,0,0, .25);
  backdrop-filter: blur(8px);
  border-radius: 4px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.psw-photos__more {
  grid-column-start: 1;
  grid-column-end: 5;
  margin-top: var(--PADD--SM);
  font-size: 80%;
}

.psw-photos__info {
  grid-column-start: 1;
  grid-column-end: 5;
  font-size: 90%;
  color: var(--PS-COLOR--TEXT--LIGHT);
  text-align: center;
}