.tools {}
.tools__head {
  max-width: 960px;
  margin-bottom: clamp(40px, 5vw, 72px);
  display: flex; flex-direction: column; gap: 16px;
}

.tools__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 18px;
}

.tool {
  isolation: isolate;
  grid-column: span 4;
  background-image: url('../img/bg-4o1twCE787.webp');
  background-size: cover;
  background-position: center;
  border: 1px solid #2a2a35;
  border-radius: var(--r-xl);
  position: relative;
  overflow: hidden;
  min-height: 360px;
  display: flex; flex-direction: column;
  transition: transform .4s var(--ease), border-color .3s var(--ease);
}
.tool::before {
  content: '';
  position: absolute; inset: 0;
  background: rgba(8,8,10,.78);
  z-index: -1;
}
.tool:hover { transform: translateY(-3px); }
.tool:hover .tool__photo img { transform: scale(1.05); }

.tool--wide { grid-column: span 4; }

.tool__photo {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  flex-shrink: 0;
}

.tool__photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: transform .7s var(--ease);
}

.tool__body {
  padding: 24px 28px 28px;
  display: flex; flex-direction: column; gap: 10px;
  flex: 1;
}

.tool h3 { font-size: 22px; letter-spacing: -.02em; }
.tool p  { color: var(--c-text-2); font-size: 14.5px; line-height: 1.6; }

@media (max-width: 960px) {
  .tool, .tool--wide { grid-column: span 12; min-height: auto; }
  .tool__photo { aspect-ratio: 16 / 9; }
}