/* Base container */
.nia-flickity { 
  background: transparent; 
  text-align: center;
}

/* Center the flickity viewport */
.nia-flickity .flickity-viewport {
  margin: 0 auto;
}

/* Generic cells */
.nia-flickity .carousel-cell,
.nia-flickity .flickity-cell { 
  width: 100%;
  margin-right: 20px;
  box-sizing: border-box;
}

/* Divi Row: treat direct columns as cells */
.nia-flickity.et_pb_row > .et_pb_column {
  width: 100% !important;
  margin-right: 20px;
  box-sizing: border-box;
}

/* Target the actual carousel cells (et_pb_row elements) */
.nia-flickity .et_pb_row {
  width: calc(100% - 20px) !important;
  margin-right: 20px !important;
  box-sizing: border-box !important;
}

/* Responsive: main item with partial preview >= 768px */
@media (min-width: 768px) {
  .nia-flickity .carousel-cell,
  .nia-flickity .flickity-cell { 
    width: 85%; 
    margin-right: 20px;
  }
  .nia-flickity.et_pb_row > .et_pb_column { 
    width: 100% !important; 
  }
  
  /* Target the actual carousel cells (et_pb_row elements) on desktop */
  .nia-flickity .et_pb_row {
    width: calc(85% - 20px) !important;
    margin-right: 20px !important;
  }
  
  /* Center the carousel container with max width for main + preview */
  .nia-flickity {
    max-width: 1000px;
    margin: 0 auto;
  }
}

/* Make media behave */
.nia-flickity img,
.nia-flickity video,
.nia-flickity picture { max-width: 100%; height: auto; display: block; }

/* Optional: hide arrows on small screens; swipe still works */
@media (max-width: 767px) {
  .nia-flickity .flickity-prev-next-button { display: none; }
}