:root {
  --card-grid-gap: 1rem; /* Espaçamento entre os itens */
  --card-grid-column-count-desktop: 3; /* Colunas no desktop */
  --card-grid-column-count-tablet: 2; /* Colunas no tablet */
  --card-grid-column-count-mobile: 1; /* Colunas no celular */
}

.card-grid {
  display: grid;
  gap: var(--card-grid-gap);
  grid-template-columns: repeat(var(--card-grid-column-count-desktop), 1fr);
}

@media (max-width: 1024px) {
  .card-grid {
    grid-template-columns: repeat(var(--card-grid-column-count-tablet), 1fr);
  }
}

@media (max-width: 768px) {
  .card-grid {
    grid-template-columns: repeat(var(--card-grid-column-count-mobile), 1fr);
  }
}

kbd {
  background-color: #f3f3f3;
  border: 1px solid #ccc;
  border-radius: 2px;
  box-shadow: 0 1px 0 #ccc;
  color: #666;
  display: inline-block;
  font-family: 'Courier New', Courier, monospace;
  margin: 0.2em;
  font-weight: 600;
  padding: 0.1em 0.4em;
  text-shadow: 0 1px 0 #fff;
  text-align: center;
  vertical-align: middle;
  user-select: none; /* Evita que o texto seja selecionado */
}

.flex {
  display: flex;

  &.column {
    flex-direction: column;
  }

  &.justify-between {
    justify-content: space-between;
  }
}

.truncate-line {
  display: -webkit-box;
  -webkit-line-clamp: 1; /* Exibe até 2 linhas */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
}

.gap {
  &-1 {
    gap: 1em;
  }
  &-2 {
    gap: 2em;
  }
  &-3 {
    gap: 3em;
  }
  &-4 {
    gap: 4em;
  }
}
