.skills-section {
  font-family: var(--font-family-jost);
}

.skills-grid {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: 0.5rem 0;

  margin-bottom: 5rem;
}

.skills-grid:last-of-type {
  margin-bottom: 0;
}

.skills-type {
  grid-column: 1;
  grid-row: 1;
  align-self: center;

  margin-bottom: 1rem;

  font-size: 1.5rem;
  font-weight: 500;
  text-transform: uppercase;
}

.skills-legend,
.skill-label {
  font-size: var(--font-size-base-text);
}

.skills-legend {
  grid-column: 1;
  grid-row: 2;

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

  margin-bottom: 1rem;
  padding-bottom: 0.2rem;

  font-weight: 400;

  border-bottom: 2px solid #dfe4e7;
}

.skill-label,
.skill-track {
  margin-top: 0.5rem;
}

.skill-label {
  grid-column: 1;
  grid-row: auto;

  font-weight: 300;
}

.skill-track {
  grid-column: 1;
  grid-row: auto;
}

.skill-default-track {
  position: relative;
  width: 100%;
  height: 4px;
  overflow: hidden;

  border-radius: 999px;

  background-color: #EEF1F3;
}

.skill-fill {
  height: 100%;

  display: block;

  border-radius: 999px 0 0 999px;

  background: linear-gradient(90deg, #6F767B, var(--theme-color));
}

/* Skills */

.skill-fill--ms-office {
  width: 95%;
}

.skill-fill--solidworks {
  width: 90%;
}

.skill-fill--ansys-space-claim {
  width: 70%;
}

.skill-fill--ansys-fluent {
  width: 90%;
}

.skill-fill--icem {
  width: 80%;
}

.skill-fill--excel-vba {
  width: 80%;
}

.skill-fill--spyder-python {
  width: 50%;
}

.skill-fill--erosion-monitoring {
  width: 95%;
}

.skill-fill--cfd {
  width: 85%;
}

.skill-fill--data-analysis {
  width: 85%;
}

.skill-fill--data-visualization-plotting {
  width: 75%;
}

.skill-fill--aim {
  width: 88%;
}

.skill-fill--fmeca {
  width: 80%;
}

.skill-fill--rcm {
  width: 80%;
}

.skill-fill--pmrs {
  width: 80%;
}

.skill-fill--ffs {
  width: 50%;
}

.skill-fill--cms {
  width: 50%;
}

.skill-fill--mm {
  width: 60%;
}

.skill-fill--ml {
  width: 25%;
}


.skill-fill--pids-reading {
  width: 95%;
}

.skill-fill--drawing-creation {
  width: 90%;
}

.skill-fill--bom-creation {
  width: 90%;
}

.skill-fill--report-writing {
  width: 90%;
}

/* Media Queries */

@media (min-width: 1000px) {
  .skills-grid {
    grid-template-columns: 20% 1fr;
    grid-auto-rows: auto;
    gap: 1rem 2rem;
  }

  .skills-type {
    margin: 0;

    font-size: var(--font-size-base-text);

    color: #222222;
  }

  .skills-legend {
    grid-column: 2;
    grid-row: 1;
  }

  .skill-label {
    align-self: center;
  }

  .skill-track {
    align-self: center;
    grid-column: 2;
  }
}