@if asset-list("thumbnail-center") {
  .assets-list--thumbnail {
    text-align: center;
  }
}

.assets-list__list--thumbnail {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
  margin-left: -#{asset-list(thumbnail-gutter)};
  margin-right: -#{asset-list(thumbnail-gutter)};
}

.assets-list__entry--thumbnail {
  padding: 0 asset-list(thumbnail-gutter) #{asset-list(thumbnail-gutter) * 2};
  flex: 0 0 100%;
  max-width: 100%;
  margin-bottom: asset-list(thumbnail-gutter) * 4;

  @media (min-width: 420px) {
    flex: 0 0 50%;
    max-width: 50%;
  }

  @media (min-width: 576px) {
    flex: 0 0 33%;
    max-width: 33%;
  }
}

.assets-list__link--thumbnail {
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: flex-end;
}

.assets-list__figure {
  position: relative;
  display: block;
  overflow: hidden;

  &::before {
    $ratio: asset-list("thumbnail-ratio");

    content: "";
    padding-top: calc(1 / $ratio);
    display: block;
  }
}

.assets-list__img {
  position: absolute;
  display: block;
  top: 50%;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;

  @if asset-list("thumbnail-center") {
    left: 50%;
    transform: translate(-50%, -50%);
  } @else {
    transform: translateY(-50%);
  }
}