.at-gallery-wrapper {
  position: relative;
  /* background-color: var(--at-common-black, #1e1e1e); */
}
.at-gallery-wrapper::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.9) 0%,
    rgba(0, 0, 0, 0) 20%,
    rgba(0, 0, 0, 0) 80%,
    rgba(0, 0, 0, 0.9) 100%
  );
}
.at-gallery-item-wrapper,
.at-gallery-item {
  background-color: transparent;
}
.at-gallery-item {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  box-shadow: 0 10px 34px rgba(255, 255, 255, 0.07);
  transition: box-shadow 0.35s ease;
}
.at-gallery-item img {
  position: absolute;
  inset: 0;
  /* img is a replaced element — position:absolute + inset:0 alone doesn't
     stretch it the way it would a div; without an explicit height it sizes
     from its own intrinsic aspect ratio instead of filling the box. Setting
     width/height here directly means this doesn't depend on the img having
     Bootstrap's w-100/h-100 utility classes in the markup. */
  width: 100%;
  height: 100%;
}
.at-gallery-item:hover {
  box-shadow: 0 14px 44px rgba(255, 255, 255, 0.2);
}

/* Three columns at phone widths make a plain 4:3 card tiny — floor the
   height so cards stay a readable size; the image (absolute + cover)
   still fills whatever height wins between this and the aspect-ratio. */
@media (max-width: 767.98px) {
  .at-gallery-item {
    min-height: 160px;
  }
}