:host {
  display: block;
  width: 100%;
  min-height: 0;
}

  :host * {
    box-sizing: border-box;
  }

  :host(:not(:only-child)) .image-grid-item__background {
      display: none;
    }

  :host(:not(:only-child)) .image-grid-item__image {
      -o-object-fit: cover;
         object-fit: cover;
    }

  :host(:only-child) button.image-grid-item:focus-visible:before,
        :host(:only-child) button.image-grid-item:focus-visible:after {
          border-radius: var(--s-border-radius-sm);
        }

  :host([data-sibling-count="2"]:nth-child(1)) button.image-grid-item:focus-visible:before,
        :host([data-sibling-count="2"]:nth-child(1)) button.image-grid-item:focus-visible:after,
        :host([data-sibling-count="3"]:nth-child(1)) button.image-grid-item:focus-visible:before,
        :host([data-sibling-count="3"]:nth-child(1)) button.image-grid-item:focus-visible:after {
          border-top-left-radius: var(--s-border-radius-sm);
          border-bottom-left-radius: var(--s-border-radius-sm);
        }

  :host([data-sibling-count="2"]:nth-child(2)) button.image-grid-item:focus-visible:before,
        :host([data-sibling-count="2"]:nth-child(2)) button.image-grid-item:focus-visible:after {
          border-top-right-radius: var(--s-border-radius-sm);
          border-bottom-right-radius: var(--s-border-radius-sm);
        }

  :host([data-sibling-count="3"]:nth-child(2)) button.image-grid-item:focus-visible:before,
        :host([data-sibling-count="3"]:nth-child(2)) button.image-grid-item:focus-visible:after {
          border-top-right-radius: var(--s-border-radius-sm);
        }

  :host([data-sibling-count="3"]:nth-child(3)) button.image-grid-item:focus-visible:before,
        :host([data-sibling-count="3"]:nth-child(3)) button.image-grid-item:focus-visible:after {
          border-bottom-right-radius: var(--s-border-radius-sm);
        }

  :host([data-sibling-count="4"]:nth-child(1)) button.image-grid-item:focus-visible:before,
        :host([data-sibling-count="4"]:nth-child(1)) button.image-grid-item:focus-visible:after {
          border-top-left-radius: var(--s-border-radius-sm);
        }

  :host([data-sibling-count="4"]:nth-child(2)) button.image-grid-item:focus-visible:before,
        :host([data-sibling-count="4"]:nth-child(2)) button.image-grid-item:focus-visible:after {
          border-top-right-radius: var(--s-border-radius-sm);
        }

  :host([data-sibling-count="4"]:nth-child(3)) button.image-grid-item:focus-visible:before,
        :host([data-sibling-count="4"]:nth-child(3)) button.image-grid-item:focus-visible:after {
          border-bottom-left-radius: var(--s-border-radius-sm);
        }

  :host([data-sibling-count="4"]:nth-child(4)) button.image-grid-item:focus-visible:before,
        :host([data-sibling-count="4"]:nth-child(4)) button.image-grid-item:focus-visible:after {
          border-bottom-right-radius: var(--s-border-radius-sm);
        }

  :host(:nth-child(n+5)) {
    display: none;
  }

.image-grid-item {
  position: relative;
  display: inline-flex;
  overflow: hidden;
  width: 100%;
  height: 100%;
}

button.image-grid-item {
  padding: 0;
  border: none;
  background-color: transparent;
  cursor: pointer;
}

button.image-grid-item:focus {
    outline: none;
  }

button.image-grid-item:focus-visible:before {
      position: absolute;
      z-index: 3;
      border: 0.125rem solid var(--s-focus-default);
      content: "";
      inset: 0;
    }

button.image-grid-item:focus-visible:after {
      position: absolute;
      z-index: 2;
      border: 0.1875rem solid var(--s-background-default);
      content: "";
      inset: 0;
    }

.image-grid-item--has-error .image-grid-item__image {
    display: none;
  }

.image-grid-item--has-overlay .image-grid-item__image {
    scale: 1.1;
    filter: blur(5px);
  }

.image-grid-item--has-watermark .image-grid-item__watermark {
    display: inline-flex;
  }

.image-grid-item__background {
  position: absolute;
  background-size: cover;
  inset: -40px;
  filter: blur(20px);
}

.image-grid-item__image {
  z-index: 1;
  display: inline-flex;
  width: 100%;
  height: 100%;
  transition: opacity 0.3s ease-in;
  opacity: 0;
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: center;
     object-position: center;
}

.image-grid-item__watermark {
  position: absolute;
  z-index: 1;
  top: var(--s-space-8);
  right: var(--s-space-8);
  display: none;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  pointer-events: none;
}

.image-grid-item__watermark ::slotted(img) {
    width: 3rem;
    height: auto;
    pointer-events: none;
  }

.image-grid-item--loaded .image-grid-item__image {
    opacity: 1;
  }

.image-grid-item__loading-placeholder {
  display: inline-flex;
  width: 100%;
  height: 100%;
}

.image-grid-item__icon {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  display: flex;
  width: 3rem;
  height: 3rem;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  color: var(--s-icon-on-image);
  background-color: rgba(0, 0, 0, 0.6);
  transform: translate3d(-50%, -50%, 0);
}

.image-grid-item__icon ::part(icon) {
    width: 2rem;
    height: 2rem;
  }

.image-grid-item__gif-control-button {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  transition: opacity 0.2s;
  transform: translate3d(-50%, -50%, 0);
  opacity: 0;
}

.image-grid-item:hover > .image-grid-item__gif-control-button,
.image-grid-item:focus-within > .image-grid-item__gif-control-button,
.image-grid-item--gif-paused > .image-grid-item__gif-control-button {
  opacity: 1;
}

.image-grid-item__overlay {
  position: absolute;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--s-text-on-image);
  background-color: rgba(0, 0, 0, 0.4);
  font-size: var(--s-font-size-2xl);
  inset: 0;
}

.image-grid-item__skeleton {
  position: absolute;
  z-index: 3;
  inset: 0;
}

.image-grid-item__error {
  position: absolute;
  z-index: 3;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.1);
  inset: 0;
}