.aac-gallery{
  position: relative;
  width: 100%;
  height: 1000px;
  --aac-gallery-pad: 12px;
  max-height: 1000px;
}
.aac-gallery__viewport{
  overflow: hidden;
  padding: var(--aac-gallery-pad);
  height: calc(100% - 44px);
  box-sizing: border-box;
}
.aac-gallery__track{
  display: flex;
  gap: 16px;
  height: 100%;
  transition: transform 0.4s ease;
  will-change: transform;
}
.aac-gallery__page{
  flex: 0 0 auto;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-rows: repeat(6, minmax(0, 1fr));
  gap: 12px;
  grid-auto-flow: dense;
  height: 100%;
}
.aac-gallery__tile{
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  overflow: hidden;
  background: #f3f4f6;
  min-height: 0;
}
.aac-gallery__tile img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.aac-gallery__page--layout-a{
  grid-template-areas:
    "a a b b c c"
    "a a b b c c"
    "d d d e e e"
    "d d d e e e"
    "d d d e e e"
    "d d d e e e";
}
.aac-gallery__page--layout-b{
  grid-template-areas:
    "a a a b b b"
    "a a a b b b"
    "c c d d d d"
    "c c d d d d"
    "e e e e d d"
    "e e e e d d";
}
.aac-gallery__page--layout-a .aac-gallery__tile:nth-child(1),
.aac-gallery__page--layout-b .aac-gallery__tile:nth-child(1){ grid-area: a; }
.aac-gallery__page--layout-a .aac-gallery__tile:nth-child(2),
.aac-gallery__page--layout-b .aac-gallery__tile:nth-child(2){ grid-area: b; }
.aac-gallery__page--layout-a .aac-gallery__tile:nth-child(3),
.aac-gallery__page--layout-b .aac-gallery__tile:nth-child(3){ grid-area: c; }
.aac-gallery__page--layout-a .aac-gallery__tile:nth-child(4),
.aac-gallery__page--layout-b .aac-gallery__tile:nth-child(4){ grid-area: d; }
.aac-gallery__page--layout-a .aac-gallery__tile:nth-child(5),
.aac-gallery__page--layout-b .aac-gallery__tile:nth-child(5){ grid-area: e; }

/* Fallback mosaic if layout class is missing */
.aac-gallery__page:not(.aac-gallery__page--layout-a):not(.aac-gallery__page--layout-b) .aac-gallery__tile:nth-child(1){
  grid-column: span 3;
  grid-row: span 3;
}
.aac-gallery__page:not(.aac-gallery__page--layout-a):not(.aac-gallery__page--layout-b) .aac-gallery__tile:nth-child(2){
  grid-column: span 3;
  grid-row: span 2;
}
.aac-gallery__page:not(.aac-gallery__page--layout-a):not(.aac-gallery__page--layout-b) .aac-gallery__tile:nth-child(3){
  grid-column: span 2;
  grid-row: span 3;
}
.aac-gallery__page:not(.aac-gallery__page--layout-a):not(.aac-gallery__page--layout-b) .aac-gallery__tile:nth-child(4){
  grid-column: span 4;
  grid-row: span 3;
}
.aac-gallery__page:not(.aac-gallery__page--layout-a):not(.aac-gallery__page--layout-b) .aac-gallery__tile:nth-child(5){
  grid-column: span 2;
  grid-row: span 4;
}

@media (max-width: 1024px){
  .aac-gallery__page{
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: repeat(6, minmax(0, 1fr));
  }
  .aac-gallery__page--layout-a{
    grid-template-areas:
      "a a b b"
      "a a b b"
      "c c c c"
      "d d e e"
      "d d e e"
      "d d e e";
  }
  .aac-gallery__page--layout-b{
    grid-template-areas:
      "a a b b"
      "a a b b"
      "c c d d"
      "c c d d"
      "e e d d"
      "e e d d";
  }
}
@media (max-width: 640px){
  .aac-gallery__viewport{
    padding-right: 10px;
  }
  .aac-gallery__page:nth-child(2){
    transform: translateX(-20px);
  }
  .aac-gallery__tile{
    width: calc(100% - 10px);
    margin-left: auto;
    margin-right: auto;
  }
  .aac-gallery{
    height: auto;
    max-height: none;
  }
  .aac-gallery__viewport{
    height: auto;
  }
  .aac-gallery__track{
    height: auto;
  }
  .aac-gallery__page{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(5, minmax(200px, auto));
    height: auto;
  }
  .aac-gallery__page--layout-a,
  .aac-gallery__page--layout-b{
    grid-template-areas:
      "a a"
      "b b"
      "c c"
      "d d"
      "e e";
  }
}

.aac-gallery__controls{
  display: flex;
  justify-content: center;
  gap: 10px;
  height: 44px;
  align-items: center;
}
.aac-gallery__btn{
  border: 1px solid #e5e7eb;
  background: #fff;
  border-radius: 999px;
  padding: 6px 12px;
  cursor: pointer;
}