.gallery__container {
  @apply relative w-full h-full;
  overflow: hidden;
}

.gallery {
  @apply relative hide-scrollbar;

  line-height: 0;
  box-sizing: border-box;

  overflow-y: auto;
  /* When `overflow-y` is set to `auto` we lose the rounded corners. This adds them back. */
  -webkit-mask-image: -webkit-radial-gradient(circle, white, black);
}

.gallery::-webkit-scrollbar {
  width: 0px !important;
  display: none;
  background: transparent !important;
}

.gallery-cell {
  @apply relative inline-block w-1/3;

  padding-bottom: 1px;

  transition: top 75ms ease-in-out;
}

.gallery-cell:nth-child(3n + 1) {
  padding-right: 1px;
}

.gallery-cell:nth-child(3n + 3) {
  padding-left: 1px;
}

.gallery-cell-contents-wrapper:before {
  content: "";
  display: block;
  padding-top: 100%;
}

.gallery-cell-contents-wrapper {
  position: relative;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.gallery-cell-contents {
  position: absolute;
  overflow: hidden;

  right: 0;
  bottom: 0;
  top: 0;
  left: 0;

  object-fit: cover;

  width: 100%;
  height: 100%;
}

/* 
 * If the contents are images, we want to give them a background such
 * that they have a placeholder when the image is still being loaded.
 */
img.gallery-cell-contents {
  @apply bg-grey-light;
}

/**
 * Load Tracker
 */
.gallery__container .gallery__image-load-tracker {
  @apply absolute w-full;
  z-index: 2;
}