/* Grid helper */
.noorix-flipbox-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  align-items: stretch;
}

/* Responsive breakpoints */
@media (max-width: 1200px) { .noorix-flipbox-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 992px)  { .noorix-flipbox-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px)  { .noorix-flipbox-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .noorix-flipbox-grid { grid-template-columns: 1fr; } }

/* Flip box */
.noorix-flipbox { perspective:1200px; width:100%; aspect-ratio:9/16; position:relative; border-radius:12px; overflow:hidden; }
.noorix-flipbox-inner { position:relative; transform-style:preserve-3d; transition: transform .68s cubic-bezier(.2,.9,.2,1); width:100%; height:100%; }
@media (hover: hover) and (pointer: fine) {
  .noorix-flipbox:hover .noorix-flipbox-inner { transform: rotateY(180deg); }
}
.noorix-flipbox.noorix-flipbox--flipped .noorix-flipbox-inner { transform: rotateY(180deg); }

.noorix-flipbox-front, .noorix-flipbox-back { position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden; display:flex; align-items:center; justify-content:center; overflow:hidden; background:#fff; }
.noorix-flipbox-back { transform: rotateY(180deg); }

.noorix-flipbox img { width:100%; height:100%; object-fit:cover; display:block; }
.noorix-flipbox-video-wrap video, .noorix-flipbox-video-wrap iframe { width:100%; height:100%; object-fit:cover; border:0; }
.noorix-flipbox-text-wrap { padding:16px; font-size:14px; text-align:center; }
.noorix-flipbox-link { display:block; width:100%; height:100%; text-decoration:none; color:inherit; }