:root {
  --primary: #55805f;
  --secondary: #F6F6F6;
  --white: #fff;
  --black: #000;
}

.hint-wrapper {
  font-family: 'Playfair', sans-serif;
  background-color: var(--primary);
  color: var(--white);
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  font-size: 20px;
}

.hint-title-text {
  font-weight: 700;
}

.hint-title {
  display: flex;
  gap: 10px;
  line-height: 24px;
}

.hint-description {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hint-icon img {
  width: 24px;
  height: 24px;
}

@media screen and (min-width: 768px) {
  .hint-wrapper {
    padding: 36px;
  }
}