.skills-container {
  width: 100%;
  max-width: 1000px;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;

  padding: 5rem 0;
}

.skills-content {
  width: 100%;

  display: flex;
  gap: 2rem;
}

.skill-card {
  width: 100%;

  display: flex;
  flex-direction: column;
  gap: 0.5rem;

  padding: 0 1rem 1rem 1rem;
  border-radius: 0.5rem;

  box-shadow: 0 0 0.5rem 0 var(--gray7);
}

.skill-top-icon {
  width: 100%;

  display: flex;
  justify-content: center;

  margin: -2.5rem 0 1rem 0;
}

.skill-top-icon > div {
  width: 5rem;
  height: 5rem;

  display: flex;
  justify-content: center;
  align-items: center;

  border-radius: 50%;

  background: var(--black8);
}

.fa-file-code,
.fa-database,
.fa-code { font-size: 3rem; color: var(--white9)}

.skill-card > span {
  display: flex;
  align-items: center;
  gap: 0.3rem;

  font-weight: 500;
}

.skill-card > span .fa-check { color: var(--blue9); }


@media (max-width: 1065px) {
  .skills-container { padding: 3rem 1rem; }
}

@media (max-width: 782px) {
  .skills-content {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 4rem;
  }

  .skill-card {
    width: 100%;
    max-width: 250px;
  }
}