/* 基本（Tailwind の: block mx-auto mt-4 w-80 max-w-full rounded-lg shadow-lg object-contain）*/
#test-img {
  display: block;                /* block */
  margin-left: auto;             /* mx-auto */
  margin-right: auto;
  margin-top: 1rem;              /* mt-4 (Tailwind の mt-4 は 1rem = 16px 前後) */
  width: 320px;                  /* w-80 -> 320px */
  max-width: 100%;               /* max-w-full */
  height: auto;                  /* maintain aspect ratio */
  border-radius: 0.5rem;         /* rounded-lg -> 8px (0.5rem) */
  box-shadow: 0 6px 18px rgba(0,0,0,0.08); /* shadow-lg-ish */
  object-fit: contain;           /* object-contain */
}

/* レスポンシブ：sm:w-96 相当（Tailwind の sm = min-width:640px） */
@media (min-width: 640px) {
  #test-img {
    width: 384px; /* w-96 -> 384px */
  }
}

/* 「hidden」相当（初期非表示にしたい場合）*/
.hidden {
  display: none !important;
}