@media (min-width: 1101px) {
  .character-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
  }
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 20px;
}
.gallery-item {
  padding: 0;
  border: 1px solid var(--line);
  background: var(--deep);
  text-align: left;
  overflow: hidden;
}
.gallery-item img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transition: transform .4s ease;
}
.gallery-item:hover img { transform: scale(1.025); }
.gallery-item span {
  display: block;
  padding: 9px 10px;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: .8px;
}

.archive-heading, .character-heading, footer, .character-card { position: relative; }
.rose-decor { position: absolute; z-index: 0; pointer-events: none; user-select: none; object-fit: contain; }
.archive-heading > :not(.rose-decor), .character-heading > :not(.rose-decor), footer > :not(.rose-decor) { position: relative; z-index: 1; }
.rose-hero { width: clamp(155px, 18vw, 285px); right: 16%; bottom: -25px; opacity: .22; transform: rotate(-8deg); }
.rose-detail { width: clamp(115px, 14vw, 210px); right: 18%; bottom: -20px; opacity: .18; transform: rotate(10deg); }
.rose-footer { width: 105px; left: 50%; bottom: -35px; opacity: .24; transform: translateX(-50%) rotate(-12deg); }
.character-card:nth-child(odd)::after { content: ""; position: absolute; width: 78px; height: 78px; right: -13px; bottom: 50px; background: url("ibararose.png") center / contain no-repeat; opacity: .22; pointer-events: none; transform: rotate(15deg); }
@media (max-width: 620px) {
  .rose-hero { width: 125px; right: 4%; bottom: -7px; opacity: .18; }
  .rose-detail { width: 95px; right: 2%; bottom: -3px; }
  .rose-footer { display: none; }
  .character-card:nth-child(odd)::after { width: 55px; height: 55px; right: -7px; bottom: 48px; }
}