HTML: Компонент «Клавиатура»

Создайте компонент клавиатуры, используя возможности модулей CSS Flex и CSS Grid:

В этом испытании вам доступна разметка верхнего ряда клавиатуры и вспомогательные классы. Ориентируясь на них, доработайте компонент по макету.

Клавиши

• По умолчанию каждая клавиша занимает две колонки внутри сетки
• Текст внутри клавиш должен быть отцентрован по всем осям
• Расстояние между клавишами: 10px
• Мнемоники, которые помогут в вёрстке кнопок:
  • <: <
  • >: >
  • ᐊ: ᐊ
  • ᐃ: ᐃ
  • ᐁ: ᐁ
  • ᐅ: ᐅ

Исходя из расположения клавиш в шаблоне, вам нужно создать дополнительные вспомогательные классы вида span-*.

Подсказки

• Перед началом работы высчитайте оптимальное количество колонок внутри сетки. Размер каждой колонки будет равняться 1fr. Для расчетов проанализируйте первый ряд, который доступен в файле index.html
• Классы p-0, border-none и w-100 помогут сверстать клавиши вверх и вниз