.ffpg-wrap { display: grid; gap: 10px; }
.ffpg-thumbs-bottom { grid-template-rows: auto 80px; }
.ffpg-thumbs-left { grid-template-columns: 96px 1fr; align-items: start; }

.ffpg-main { position: relative; width: 100%; }
.ffpg-main .swiper-slide img { width: 100%; height: auto; display: block; }

.ffpg-thumbs .swiper-slide { opacity: 0.7; cursor: pointer; }
.ffpg-thumbs .swiper-slide-thumb-active,
.ffpg-thumbs .swiper-slide:hover { opacity: 1; }
.ffpg-thumbs img { width: 100%; height: auto; border-radius: 4px; }

.ffpg-button { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; background: rgba(0,0,0,.4); color:#fff; padding: 6px 10px; border-radius: 4px; cursor: pointer; user-select:none; }
.ffpg-prev { left: 8px; } .ffpg-next { right: 8px; }