:root{
  --fuxmg-gap:16px;
  --fuxmg-radius:0px;
  --fuxmg-aspect:1/1;
}

.fuxmg{
  width:100%;
}

.fuxmg__grid{
  display:grid;
  gap:var(--fuxmg-gap);
  grid-auto-flow:dense;
}

.fuxmg__item{
  margin:0;
  position:relative;
  overflow:hidden;
  border-radius:var(--fuxmg-radius);
  background:#f4f4f4;
}

.fuxmg__img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}

/* If fixed aspect ratio is enabled */
.fuxmg--aspect .fuxmg__item{
  aspect-ratio:var(--fuxmg-aspect);
}



/* Magnetic layout - images clustered around center like a magnet */
.fuxmg--layout-magnetic .fuxmg__grid{
  grid-template-columns:repeat(20, minmax(0, 1fr));
  grid-template-rows:repeat(20, minmax(0, 1fr));
  min-height:1200px;
  max-height:1200px;
  position:relative;
  gap:var(--fuxmg-gap);
}


/* Images stuck to center - organic, varied sizes and positions like a collage */
/* Center is at 8-13 (5 columns), images cluster around it with varied sizes */

.fuxmg--layout-magnetic .fuxmg__item:nth-child(1){
  grid-column: 1 / 5;
  grid-row:    3 / 8;
}

.fuxmg--layout-magnetic .fuxmg__item:nth-child(2){
  grid-column: 5 / 14;
  grid-row:    1 / 8;
}

.fuxmg--layout-magnetic .fuxmg__item:nth-child(3){
  grid-column: 14 / 21;
  grid-row:    4 / 15;
}

.fuxmg--layout-magnetic .fuxmg__item:nth-child(4){
  grid-column: 2 / 7;
  grid-row:    8 / 15;
}

/* Center image */
.fuxmg--layout-magnetic .fuxmg__item:nth-child(5){
  grid-column: 7 / 14;
  grid-row:    8 / 15;
}

.fuxmg--layout-magnetic .fuxmg__item:nth-child(6){
  grid-column: 5 / 10;
  grid-row:    15 / 21;
}

.fuxmg--layout-magnetic .fuxmg__item:nth-child(7){
  grid-column: 10 / 17;
  grid-row:    15 / 19;
}


@media (max-width: 1200px){
  .fuxmg--layout-magnetic .fuxmg__grid{
    min-height:900px;
    max-height:900px;
  }
}
/* Mobile layouts (separate option) */
@media (max-width: 849px){
  /* Stack layout - two columns */
  .fuxmg--m-layout-stack .fuxmg__grid{
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
  }
  .fuxmg--m-layout-stack .fuxmg__item{
    grid-column: span 1 !important;
    grid-row: span 1 !important;
  }

  /* Two column layout - first image spans full width */
  .fuxmg--m-layout-two_col .fuxmg__grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto;
  }
  .fuxmg--m-layout-two_col .fuxmg__item{
    grid-column: span 1 !important;
    grid-row: span 1 !important;
  }
  .fuxmg--m-layout-two_col .fuxmg__item:nth-child(1){
    grid-column: span 2 !important;
  }

  /* Dense layout - compact grid with first image large */
  .fuxmg--m-layout-dense .fuxmg__grid{
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-template-rows: auto;
  }
  .fuxmg--m-layout-dense .fuxmg__item{
    grid-column: span 3 !important;
    grid-row: span 1 !important;
  }
  .fuxmg--m-layout-dense .fuxmg__item:nth-child(1){
    grid-column: span 6 !important;
    grid-row: span 2 !important;
  }
  .fuxmg--m-layout-dense .fuxmg__item:nth-child(2){
    grid-column: span 3 !important;
    grid-row: span 2 !important;
  }

  /* Magnetic layout on mobile - simplified to two columns */
  .fuxmg--layout-magnetic .fuxmg__grid{
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: auto !important;
    min-height: auto !important;
    max-height: none !important;
  }
  .fuxmg--layout-magnetic .fuxmg__item{
    grid-column: span 1 !important;
    grid-row: span 1 !important;
  }
}