@import '../css/variables';
@import '../css/utilities';

.root {
  border-radius: 2px;
  box-shadow: inset 0 0 2px $color-shadow;
  max-width: rem(160px);
  overflow: hidden;

  &:hover .image {
    transform: scale(1.1);
  }
}

.image {
  display: block;
  position: relative;
  transition: 2s transform ease;
  width: 100%;
  will-change: transform;
  z-index: -1;
}

@import '../css/variables';
@import '../css/utilities';

.root {
  border-radius: 2px;
  box-shadow: inset 0 0 2px $color-shadow;
  max-width: rem(160px);
  overflow: hidden;
  // fixes border-radius and overflow: hidden bug on Safari where the overflow:
  // hidden does nothing
  transform: scale(1);

  &:hover .image {
    transform: scale(1.1);
  }
}

.image {
  display: block;
  position: relative;
  transition: 2s transform ease;
  width: 100%;
  will-change: transform;
  z-index: -1;
}

Fix overflow: hidden Safari bug on Avatar
Fix overflow: hidden Safari bug on Avatar
