.image-gallery-cmp .featured-image-wrapper {
  position: relative;
  width: 100%;
  padding-top: 100%;
  /* This gives a 1:1 aspect ratio */
}
.image-gallery-cmp .featured-image-wrapper:hover {
  cursor: pointer;
}
.image-gallery-cmp .featured-image-wrapper.video:after {
  position: relative;
  content: "";
  background-image: url("../../../../../content/dam/phadia/components/image-component/playBtn.png");
  width: 100px;
  height: 100px;
  background-size: 100%;
  position: absolute;
  top: calc(50% - 50px);
  right: calc(50% - 50px);
}
.image-gallery-cmp .featured-image-wrapper .featured-image-container {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.image-gallery-cmp .featured-image-wrapper .featured-image-container .featured-image {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  top: 0;
  left: 0;
  border-radius: 45px;
  border: 1px solid #E5E5E5;
  box-shadow: 0 4px 6px 0 rgba(34, 34, 34, 0.1);
}
.image-gallery-cmp .scrollable-grid {
  max-height: 400px;
  overflow-y: hidden;
  overflow-x: auto;
  margin-top: 15px;
  white-space: nowrap;
  display: flex;
  flex-wrap: nowrap;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.image-gallery-cmp .scrollable-grid:not(.four-or-less):hover {
  cursor: move;
  /* fallback if grab cursor is unsupported */
  cursor: grab;
  cursor: -moz-grab;
  cursor: -webkit-grab;
}
.image-gallery-cmp .scrollable-grid:not(.four-or-less):hover:active {
  cursor: grabbing;
  cursor: -moz-grabbing;
  cursor: -webkit-grabbing;
}
.image-gallery-cmp .scrollable-grid.four-or-less {
  justify-content: center;
}
.image-gallery-cmp .scrollable-grid .image-item {
  position: relative;
  width: 25%;
  padding: 10px;
  flex: 0 0 auto;
  display: inline-block;
}
.image-gallery-cmp .scrollable-grid .image-item .img-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 21px;
  border: 4px solid transparent;
  padding-top: 100%;
}
.image-gallery-cmp .scrollable-grid .image-item .img-wrapper .img-inner-wrapper {
  display: flex;
  position: absolute;
  width: 100%;
  height: 100%;
  border: 1px solid #E5E5E5;
  border-radius: 17px;
  justify-content: center;
  align-items: center;
  top: 0;
  left: 0;
}
.image-gallery-cmp .scrollable-grid .image-item .img-wrapper .img-inner-wrapper .popup-link {
  height: 100%;
}
.image-gallery-cmp .scrollable-grid .image-item .img-wrapper .img-inner-wrapper .popup-link:hover {
  cursor: pointer;
}
.image-gallery-cmp .scrollable-grid .image-item .img-wrapper .img-inner-wrapper .popup-link.video:after {
  position: relative;
  content: "";
  background-image: url("../../../../../content/dam/phadia/components/image-component/playBtn.png");
  width: 40px;
  height: 40px;
  background-size: 100%;
  position: absolute;
  top: calc(50% - 20px);
  right: calc(50% - 20px);
}
.image-gallery-cmp .scrollable-grid .image-item .img-wrapper .img-inner-wrapper .popup-link .thumbnail-container {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.image-gallery-cmp .scrollable-grid .image-item .img-wrapper .img-inner-wrapper .popup-link .thumbnail-container img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 16px;
  top: 0;
  left: 0;
}
.image-gallery-cmp .scrollable-grid .image-item.featured .img-wrapper {
  border: 4px solid #E71316;
}
