vikunja-frontend/src/styles/components/list-backgrounds.scss

.list-background-setting {

  .unsplash-link {
    text-align: right;
    font-size: .8rem;

    a {
      color: $grey-dark;
    }
  }

  .image-search-result {
    margin-top: 1em;
    display: flex;
    flex-flow: row wrap;

    .image {
      width: calc(100% / 5 - 1em);
      height: 120px;
      margin: .5em;
      background-size: cover;
      background-position: center;
      display: flex;

      @media screen and (min-width: $desktop) {
        &:nth-child(5n) {
          page-break-after: always; // CSS 2.1 syntax
          break-after: always; // New syntax
        }
      }

      @media screen and (max-width: $desktop) {
        width: calc(100% / 4 - 1em);

        &:nth-child(4n) {
          page-break-after: always; // CSS 2.1 syntax
          break-after: always; // New syntax
        }
      }

      @media screen and (max-width: $tablet) {
        width: calc(100% / 2 - 1em);

        &:nth-child(2n) {
          page-break-after: always; // CSS 2.1 syntax
          break-after: always; // New syntax
        }
      }

      @media screen and (max-width: ($mobile)) {
        width: calc(100% - 1em);

        &:nth-child(1n) {
          page-break-after: always; // CSS 2.1 syntax
          break-after: always; // New syntax
        }
      }

      .info {
        align-self: flex-end;
        display: block;
        opacity: 0;
        width: 100%;
        padding: .25em 0;
        text-align: center;
        background: rgba(0, 0, 0, 0.5);
        font-size: .75em;
        font-weight: bold;
        color: $white;
        transition: opacity $transition;
      }

      &:hover .info {
        opacity: 1;
      }
    }
  }

  .is-load-more-button {
    margin: 0 auto;
    display: block;
    width: 200px;
  }
}