/* Hide element visually, keeping it focusable (with keyboard) and available for screen-readers */
.Thumbnail {
  /* Set color on root of component. It can be overridden after the @include */
  color: var(--colorsTextDefault, #141414);
  /* Make sure font-family goes across entire component */
  font-family: "Nunito Sans", sans-serif;
  box-sizing: border-box;
  border: 1px solid var(--colorsBorderDefault, #949596);
  display: inline-block;
  position: relative;
  overflow: hidden;
}
.Thumbnail img {
  width: 100%;
  height: 100%;
}
.Thumbnail.Thumbnail--XS {
  width: 32px;
  height: 32px;
  border-radius: 3px;
}
.Thumbnail.Thumbnail--S {
  width: 48px;
  height: 48px;
  border-radius: 3px;
}
.Thumbnail.Thumbnail--M {
  width: 64px;
  height: 64px;
  border-radius: 6px;
}
.Thumbnail.Thumbnail--L {
  width: 96px;
  height: 96px;
  border-radius: 6px;
}
.Thumbnail.Thumbnail--XL {
  width: 128px;
  height: 128px;
  border-radius: 6px;
}
.Thumbnail.Thumbnail--thin {
  padding: 4px;
}
.Thumbnail.Thumbnail--none img {
  object-fit: none;
}
.Thumbnail.Thumbnail--fill img {
  object-fit: fill;
}
.Thumbnail.Thumbnail--contain img {
  object-fit: contain;
}
.Thumbnail.Thumbnail--cover img {
  object-fit: cover;
}
.Thumbnail.Thumbnail--clickable {
  cursor: pointer;
}
.Thumbnail .Thumbnail__overlay {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: var(--colorsActiveStrong, rgba(20, 20, 20, 0.4));
  color: var(--colorsTextInverted, white);
}

/*# sourceMappingURL=index.css.map */