/* vars: --c-accent,--c-dark,--c-ink,--c-ink-ghost,--c-ink-mid,--c-surface,--f-serif */
.other {
  padding: clamp(60px, 8vw, 100px) clamp(16px, 5vw, 80px);
  border-top: 1px solid var(--c-ink-ghost);
}
.other__h2 {
  font-family: var(--f-serif);
  font-size: clamp(2.25rem, 4.5vw, 3.5rem);
  line-height: .88; text-transform: uppercase; text-align: center; margin-bottom: 40px;
}
.other__h2 em { color: var(--c-accent); font-style: normal; }
.other__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px;
}
@media (max-width: 768px) { .other__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 500px) { .other__grid { grid-template-columns: 1fr; } }
.other__card {
  background: var(--c-surface); border: 1px solid var(--c-ink-ghost);
  padding: clamp(20px, 3vw, 32px); cursor: pointer;
  transition: background .3s, border-color .3s, opacity .7s ease, transform .7s cubic-bezier(.16,1,.3,1);
  position: relative; overflow: hidden; text-decoration: none; color: inherit; display: block;
}
.other__card:hover { background: var(--c-dark); border-color: rgba(245, 154, 0, .15); }
.other__card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--c-accent); transform: scaleX(0); transform-origin: left; transition: transform .4s;
}
.other__card:hover::before { transform: scaleX(1); }
.other__card h3 {
  font-family: var(--f-serif); font-size: 1.25rem; text-transform: uppercase;
  margin-bottom: 6px; transition: color .3s; color: var(--c-ink);
}
.other__card:hover h3 { color: var(--c-accent); }
.other__card p { font-size: 0.875rem; font-weight: 400; color: var(--c-ink-mid); line-height: 1.6; }
.other__card-ico { font-size: 1.5rem; display: block; margin-bottom: 8px; }