@import '../../../scss/styles.scss';

.thumbnail {
  min-height: 100%;
  flex-shrink: 0;
  align-self: stretch;
  overflow: hidden;

  img,
  svg {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  &--size-expand {
    max-height: 100%;
    width: 100%;
    padding-top: 100%;
    position: relative;

    img,
    svg {
      position: absolute;
      top: 0;
    }
  }

  &--size-large {
    max-height: base(9);
    width: base(9);
  }

  &--size-medium {
    max-height: base(7);
    width: base(7);
  }

  &--size-small {
    max-height: base(5);
    width: base(5);
  }

  @include large-break {
    .thumbnail {
      width: base(5);
    }
  }
}