.signatures { background: #101111; }
.signature-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.signature-card,
.signature-card[data-dish="lobster"] {
  position: relative;
  display: block;
  min-height: 500px;
  overflow: hidden;
  background: #2b1116;
  color: #fff;
  border: 1px solid #806444;
  border-radius: 4px;
  cursor: pointer;
}
.signature-card.signature-wide { grid-column: 1 / -1; min-height: 620px; }
.signature-card:not(.signature-wide) { grid-column: span 2; }
.signature-card > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  transition: transform .65s;
}
.signature-card:after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(22, 8, 11, .95), rgba(22, 8, 11, .1) 65%);
  pointer-events: none;
}
.signature-card > div:not(.signature-photo-pending),
.signature-card[data-dish="lobster"] > div {
  position: absolute;
  z-index: 2;
  left: 36px;
  right: 36px;
  bottom: 36px;
  padding: 0;
  border: 0;
  background: none;
}
.signature-card h3,
.signature-card[data-dish="lobster"] h3 {
  margin: 0;
  font-size: 42px;
  line-height: 1.2;
  color: #f1d6a7;
}
.signature-card p {
  max-width: 670px;
  max-height: 0;
  margin: 0;
  color: #f1e7db;
  opacity: 0;
  overflow: hidden;
  transform: translateY(10px);
  font-size: 16px;
  line-height: 1.75;
  transition: max-height .45s, opacity .3s, transform .35s, margin .35s;
}
.signature-card:hover p,
.signature-card:focus p,
.signature-card:focus-within p {
  max-height: 360px;
  margin-top: 12px;
  opacity: 1;
  transform: none;
}
.signature-card:hover > img,
.signature-card:focus > img,
.signature-card:focus-within > img { transform: scale(1.025); }
.signature-card:focus-visible { outline: 2px solid #f1d6a7; outline-offset: 4px; }
@media (max-width: 900px) {
  .signature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .signature-card { grid-column: span 1; min-height: 500px; }
  .signature-card.signature-wide { grid-column: 1 / -1; }
  .signature-card h3,
  .signature-card[data-dish="lobster"] h3 { font-size: 34px; }
}
@media (max-width: 600px) {
  .signature-grid { grid-template-columns: 1fr; }
  .signature-card,
  .signature-card.signature-wide,
  .signature-card[data-dish="lobster"] { min-height: 470px; }
  .signature-card:not(.signature-wide) { grid-column: auto; }
  .signature-card > div:not(.signature-photo-pending),
  .signature-card[data-dish="lobster"] > div { left: 24px; right: 24px; bottom: 24px; }
  .signature-card h3,
  .signature-card[data-dish="lobster"] h3 { font-size: 30px; }
  .signature-card p { font-size: 15px; line-height: 1.65; }
  .signature-card[data-dish="ga-dot-hoa-diem-son"] > img { object-position: 68% center; }
  .signature-card[data-dish="lobster"] > img { object-fit: contain; object-position: center 20%; }
}
@media (hover: none) {
  .signature-card p { max-height: none; margin-top: 12px; opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .signature-card > img, .signature-card p { transition: none; }
}