@font-face {
  font-family: 'Overused Grotesk';
  src: url('https://static.tildacdn.com/path-to-your-font/OverusedGrotesk-Regular.woff2') format('woff2'); /* замените на свой путь */
  font-weight: normal;
  font-style: normal;
}

.list-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 30px 20px;
  border-bottom: 1px solid #ddd;
  transition: background-color 0.3s, color 0.3s;
  cursor: pointer;
  font-family: 'Overused Grotesk', sans-serif;
}

.list-item:hover {
  background-color: #1C1C1C;
}

.list-item:hover .list-title,
.list-item:hover .list-subtitle,
.list-item:hover .list-number,
.list-item:hover .list-arrow {
  color: #fff;
}

.list-number {
  width: 50px;
  font-size: 36px;
  font-weight: normal;
  color: #000;
  flex-shrink: 0;
  font-family: 'Overused Grotesk', sans-serif;
}

.list-content {
  flex: 1;
  padding: 0 20px;
}

.list-title {
  font-size: 36px;
  font-weight: normal;
  margin-bottom: 5px;
  color: #000;
  font-family: 'Overused Grotesk', sans-serif;
}

.list-subtitle {
  font-size: 24px;
  font-weight: normal;
  color: #555;
  line-height: 1.4;
  font-family: 'Overused Grotesk', sans-serif;
}

.list-arrow {
  font-size: 36px;
  color: #000;
  flex-shrink: 0;
}