/* Блок «Почему OmniStudy работает» (templates/public/home/why.html).
   Четыре карточки сеткой 2×2: значок слева, заголовок и текст справа. */

.wy-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.wy-card {
  display: grid; grid-template-columns: 72px minmax(0, 1fr); column-gap: 22px; row-gap: 8px; align-content: start;
  padding: 30px 28px 32px; border-radius: 28px; background: var(--surface);
  box-shadow: 0 30px 60px -34px rgba(25, 30, 80, .28), 0 2px 6px rgba(25, 30, 80, .05);
}
.wy-card img { grid-row: span 2; width: 72px; height: 72px; object-fit: contain; }
.wy-card h3 { margin: 0; font-size: 21px; line-height: 1.25; font-weight: 800; letter-spacing: -.015em; color: var(--ink); text-wrap: balance; }
.wy-card p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--ink-2); }
@media (max-width: 900px) {
  .wy-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .wy-card { grid-template-columns: 56px minmax(0, 1fr); column-gap: 18px; padding: 24px 22px; }
  .wy-card img { width: 56px; height: 56px; }
}
/* Телефон: значок и заголовок в строку, текст под ними во всю ширину карточки. */
@media (max-width: 560px) {
  .wy-card { grid-template-columns: 52px minmax(0, 1fr); align-items: center; column-gap: 14px; row-gap: 12px; padding: 22px 20px; }
  .wy-card img { grid-row: auto; width: 52px; height: 52px; }
  .wy-card h3 { font-size: 20px; }
  .wy-card p { grid-column: 1 / -1; }
}