.gallery-section {
  margin-top: 3rem;
}

.gallery-section h2 {
  margin-bottom: 1rem;
}

.gallery-wrap {
  position: relative;
}

.full-bleed {
  width: 100vw;
  margin-left: calc(50% - 50vw);
}

.gallery {
  position: relative;

  display: flex;
  align-items: center;
  gap: 0;

  height: 60vh;
  padding: 0;

  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;

  scroll-padding-inline: 50%;
  touch-action: pan-x;

  scroll-padding-left: 50%;
  scroll-padding-right: 50%;
}

.gallery::-webkit-scrollbar {
  display: none;
}

.gallery-wrap::before,
.gallery-wrap::after {
  content: "";
  position: absolute;
  top: 0;
  z-index: 5;

  width: 45vw;
  height: 100%;
  pointer-events: none;
}

.gallery-wrap::before {
  left: calc(50% - 50vw);
  background: linear-gradient(
    to right,
    #0b0b0f 0%,
    #0b0b0f 10%,
    transparent 50%,
    transparent 100%
  );
}

.gallery-wrap::after {
  right: calc(50% - 50vw);
  background: linear-gradient(
    to left,
    #0b0b0f 0%,
    #0b0b0f 10%,
    transparent 50%,
    transparent 100%
  );
}

.art-card {
  flex: 0 0 auto;
  height: 100%;
  overflow: hidden;
  margin-inline: var(--focus-gap, 3px);

  transform: scale(var(--focus-scale, 1));

  transition:
    transform 0.25s ease,
    margin 0.25s ease;

  will-change: transform;
}

.art-card img {
  display: block;
  height: 100%;
  width: auto;
  object-fit: contain;

  background: #111;

  user-select: none;
  -webkit-user-drag: none;

  filter:
    blur(var(--focus-blur, 0px))
    brightness(var(--focus-opacity, 1));

  transition: filter 0.3s ease;
}

/* Cursor fixes */
.gallery,
.gallery .art-card,
.gallery .art-card img {
  cursor: pointer !important;
}

.gallery img {
  pointer-events: auto;
}