/* resources/sass/puzzlefactory.pl/listing.scss */
.listing-items {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: var(--gap);
}
.listing-items .puzzle-item {
  width: auto;
}
@media (min-width: 560px) {
  .listing-items {
    grid-template-columns: 1fr 1fr;
  }
}
@media (min-width: 900px) {
  .listing-items {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
@media (min-width: 1400px) {
  .listing-items {
    grid-template-columns: repeat(4, 1fr);
  }
}
.pagination {
  text-align: center;
  margin: 40px auto 10px;
}
.pagination span {
  padding: 8px 0;
}
.pagination a {
  padding: 8px 16px;
  text-decoration: none;
  color: #575757;
  outline: none;
  border-top: 2px solid #d0d0d0;
}
.pagination a:focus,
.pagination a:hover,
.pagination a.active {
  z-index: 2;
  color: #05586B;
  border-top: 2px solid #05586B;
  outline: none;
}
@media (max-width: 828px) {
  .pagination {
    font-size: 18px;
    margin-bottom: 140px;
  }
}
.section-description .trophy {
  font-size: 22px;
}
.section-description .trophy:hover {
  text-decoration: none;
}
.section-description .trophy.gold {
  color: #cfb53b;
}
.section-description .trophy.silver {
  color: #9a9a9a;
  margin-left: 5px;
}
.section-description .trophy.bronze {
  color: #964b00;
  margin-left: 5px;
}
.listing-loader {
  margin: 3em;
  text-align: center;
}
.listing-loader svg-icon {
  margin: 0 auto;
  display: block;
  font-size: 3em;
  transform-origin: 0 0;
  animation: pulse 1s linear infinite;
}
a.more-item {
  width: 150px;
  padding: 5px;
  text-align: center;
  display: grid;
  align-items: center;
  flex-direction: column;
  grid-template-rows: min-content min-content;
  align-content: center;
  grid-gap: 30px;
  text-decoration: none;
}
a.more-item svg-icon {
  border: 1px solid #05586B;
  display: block;
  margin: auto;
  padding: 18px 22px 22px 18px;
  box-sizing: content-box;
  border-radius: 36px;
}
a.more-item svg-icon svg {
  width: 20px;
  height: 20px;
}
a.more-item span {
  word-break: break-word;
  text-decoration: none;
}
@media (min-width: 1200px) {
  a.more-item {
    display: none;
  }
}