/* ✦ NEW — Instagram / UGC Grid (Dark) */

.dx-insta__top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 36px;
}

.dx-insta__top .dx-head {
  margin: 0;
}

.dx-insta__top .dx-btn i {
  font-size: 18px;
  transform: none !important;
}

.dx-insta__grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}

/* The first tile is bigger */
.dx-insta__grid .dx-insta__tile:nth-child(1) {
  grid-column: span 2;
  grid-row: span 2;
}

.dx .dx-insta__tile {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 14px;
  background: var(--dx-card);
}

.dx-insta__tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1s var(--dx-ease);
}

.dx-insta__hover {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px;
  background: rgba(0, 0, 0, .55);
  color: #fff;
  text-align: center;
  opacity: 0;
  transition: opacity .4s var(--dx-ease);
}

.dx-insta__hover i {
  font-size: 26px;
  transform: scale(.7);
  transition: transform .4s var(--dx-ease);
}

.dx-insta__hover small {
  font-size: 13px;
  line-height: 1.5;
}

.dx-insta__tile:hover img {
  transform: scale(1.07);
}

.dx-insta__tile:hover .dx-insta__hover {
  opacity: 1;
}

.dx-insta__tile:hover .dx-insta__hover i {
  transform: none;
}

@media (max-width: 991.98px) {
  .dx-insta__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 575.98px) {
  .dx-insta__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  .dx-insta__grid .dx-insta__tile:nth-child(1) {
    grid-column: span 2;
    grid-row: span 2;
  }

  .dx .dx-insta__tile {
    border-radius: 10px;
  }
}

/* Marquee */
.dx-insta__marquee {
  overflow: hidden;
}

.dx-insta__track {
  display: flex;
  width: max-content;
  animation: dxInstaMarquee 50s linear infinite;
}

.dx-insta__marquee:hover .dx-insta__track {
  animation-play-state: paused;
}

html[dir="rtl"] .dx-insta__track {
  animation-name: dxInstaMarqueeRtl;
}

.dx-insta__group {
  display: flex;
  gap: 12px;
  padding-inline-end: 12px;
}

.dx-insta__group .dx-insta__tile {
  width: 260px;
}

@media (max-width: 575.98px) {
  .dx-insta__group .dx-insta__tile {
    width: 170px;
  }
}

@keyframes dxInstaMarquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@keyframes dxInstaMarqueeRtl {
  from { transform: translateX(0); }
  to { transform: translateX(50%); }
}