.flip-image-page .flip-control-row {
  display: grid;
  gap: var(--space-sm);
}

.flip-image-page .flip-button-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem;
}

.flip-image-page .flip-button-grid .btn {
  min-height: 2.8rem;
  white-space: normal;
}

.flip-image-page .flip-current {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  min-height: 2.5rem;
  padding: 0.55rem 0.75rem;
  color: var(--resize-muted);
  font-size: var(--text-sm, 0.9rem);
  border: 1px solid var(--resize-border);
  border-radius: 12px;
  background: var(--resize-panel);
}

.flip-image-page .flip-current strong {
  color: var(--resize-text);
}

.flip-image-page .flip-before-after {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-md);
  margin-top: var(--space-md);
}

.flip-image-page .flip-example {
  display: grid;
  gap: 0.65rem;
}

.flip-image-page .flip-example-art {
  position: relative;
  min-height: 13rem;
  overflow: hidden;
  border: 1px solid var(--resize-border);
  border-radius: 16px;
  background:
    linear-gradient(135deg, #f8fafc 0 35%, transparent 35%),
    linear-gradient(45deg, #2563eb, #059669);
}

.flip-image-page .flip-example-art::before {
  position: absolute;
  inset: 20% 24%;
  content: "";
  border-radius: 12px 12px 4px 4px;
  background:
    radial-gradient(circle at 30% 30%, #fbbf24 0 10%, transparent 11%),
    linear-gradient(90deg, #0f172a 0 46%, #f8fafc 46%);
  box-shadow: 0 18px 36px rgb(15 23 42 / 0.22);
}

.flip-image-page .flip-example-art.is-flipped::before {
  transform: scaleX(-1);
}

.flip-image-page .flip-example strong {
  color: var(--resize-text);
}

.flip-image-page .flip-example p {
  margin: 0;
  color: var(--resize-muted);
  font-size: var(--text-sm, 0.9rem);
}

@media (width <= 760px) {
  .flip-image-page .flip-button-grid,
  .flip-image-page .flip-before-after {
    grid-template-columns: 1fr;
  }
}