.#{$ns}Images {
  display: flex;
  flex-wrap: wrap;
  margin: -$gap-xs;

  &-item {
    display: flex;
    margin: $gap-xs;
  }
}

.#{$ns}Image {
  display: inline-block;
  width: px2rem(120px);
  border: $borderWidth solid $borderColor;
  padding: $gap-xs;

  &-thumb {
    width: 100%;
    height: px2rem(108px);
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgd2lkdGg9IjIwMCIgaGVpZ2h0PSI0MDAiPgogICAgPGRlZnM+CiAgICAgICAgPHBhdHRlcm4gaWQ9ImdyaWQiIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+CiAgICAgICAgICAgIDxyZWN0IGZpbGw9ImJsYWNrIiB4PSIwIiB5PSIwIiB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIG9wYWNpdHk9IjAuMSIgLz4KICAgICAgICAgICAgPHJlY3QgZmlsbD0id2hpdGUiIHg9IjEwIiB5PSIwIiB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIC8+CiAgICAgICAgICAgIDxyZWN0IGZpbGw9ImJsYWNrIiB4PSIxMCIgeT0iMTAiIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgb3BhY2l0eT0iMC4xIiAvPgogICAgICAgICAgICA8cmVjdCBmaWxsPSJ3aGl0ZSIgeD0iMCIgeT0iMTAiIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgLz4KICAgICAgICA8L3BhdHRlcm4+CiAgICA8L2RlZnM+CiAgICA8cmVjdCBmaWxsPSJ1cmwoI2dyaWQpIiB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiAvPgo8L3N2Zz4=');
    overflow: hidden;
    position: relative;

    > img {
      position: absolute;
      left: 50%;
      top: 50%;
      height: 100%;
      width: auto;
      transform: translate(-50%, -50%);
    }
  }

  &-thumb--4-3 {
    height: px2rem(108px * 3 / 4);
  }

  &-thumb--16-9 {
    height: px2rem(108px * 9 / 16);
  }

  &-thumb--w-full > img {
    width: 100%;
    height: auto;
  }

  @supports (object-fit: contain) {
    &-thumb--contain > img {
      position: static;
      width: 100% !important;
      height: 100% !important;
      transform: translate(0, 0);
      top: 0;
      left: 0;
      object-fit: contain;
    }
  }

  @supports (object-fit: cover) {
    &-thumb--cover > img {
      position: static;
      width: 100% !important;
      height: 100% !important;
      transform: translate(0, 0);
      top: 0;
      left: 0;
      object-fit: cover;
    }
  }

  &-caption {
    font-size: $fontSizeSm;
  }

  &-overlay {
    background: rgba(0, 0, 0, 0.6);
    position: absolute;
    width: 100%;
    height: 100%;
    display: none;
    top: 0;
    left: 0;

    justify-content: center;
    align-items: center;
    align-content: center;
    flex-wrap: wrap;
    color: #fff;

    > div {
      width: 100%;
      text-align: center;
      margin-bottom: 5px;
    }

    > a {
      cursor: pointer;
      color: #fff;
      display: inline-block;
      padding: 0 5px;
      line-height: 1;
      font-size: px2rem(16px);
    }
  }

  &-thumb:hover &-overlay {
    display: flex;
  }
}

.#{$ns}ImageField {
  display: inline-block;
  position: relative;
}