.skills {
  background-image: url("../assets/img/backgrounds/skills-background.webp");
  background-size: 110% 110%;
  background-position: bottom center;
  justify-content: center;
  background-repeat: no-repeat;
  padding-bottom: clamp(8rem, 15vw, 20rem);

  @media (max-width: 900px) {
    padding-bottom: clamp(16rem, 40vw, 22rem);
  }
}

.skills__header {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: clamp(1rem, 4vw, 5rem);
  padding-top: 6rem;

  @media (max-width: 900px) {
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
}

.skills__heading {
  flex-shrink: 0;
}

.skills__label {
  display: flex;
  color: var(--base-color-bright);
  font-size: clamp(1.25rem, 2.25vw, 2.25rem);
  justify-content: flex-end;
}

.skills__title {
  color: var(--base-color-bright);
  font-size: clamp(3.75rem, 7vw, 8rem);
  font-weight: bold;
  position: relative;
  display: inline-block;
  margin-top: 2rem;
  margin-bottom: 2rem;
  isolation: isolate;

  &::before {
    content: "";
    position: absolute;
    inset: -36px -10%;
    background-image: url(../assets/img/scribbles/skills-circle.svg);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    animation: reveal-corner 4s ease-in-out infinite;
    filter: brightness(0) saturate(100%) invert(27%) sepia(90%) saturate(2000%)
      hue-rotate(207deg);
  }

  @media (max-width: 900px) {
    font-size: clamp(3rem, 11vw, 6rem);
  }
}

.skills__text {
  background-image: url(../assets/img/ripped-paper/skills-paper.webp);
  width: min(55rem, 100%);

  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: flex;

  @media (max-width: 600px) {
    background-image: url(../assets/img/mobile/skills-paper-mobile.webp);

    width: 100%;
  }

  & > p {
    display: flex;
    font-size: clamp(0.9rem, 1.5vw, 1.15rem);
    justify-content: center;
    padding-block: 2.5rem;
    padding-inline: 2.5rem;
    align-items: center;

    @media (max-width: 600px) {
      font-size: clamp(1rem, 3.5vw, 1.25rem);
    }
  }
}
.skills__content {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  gap: 2.5rem clamp(2rem, 6vw, 6rem);

  @media (max-width: 900px) {
    flex-direction: column;
  }
}

.skills__list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 8rem));
  row-gap: 2rem;
  list-style: none;
  padding: 2rem 0 0;

  @media (max-width: 600px) {
    grid-template-columns: repeat(3, 1fr);
  }
}

.skills__item {
  display: flex;
  color: var(--base-color-bright);
  align-items: center;
  gap: 0.5rem;
  font-size: 1.25rem;
  text-align: center;
  flex-direction: column;

  @media (max-width: 600px) {
    font-size: clamp(1rem, 3vw, 1.25rem);
  }
}

.skills__icon {
  height: clamp(2.75rem, 8vw, 5.125rem);
  width: auto;
  filter: grayscale(1);
  transition:
    transform 0.2s ease,
    filter 0.2s ease;

  @media (hover: none) {
    filter: none;
  }

  .skills__item:hover & {
    filter: grayscale(0);
    transform: scale(0.7);

    @media (max-width: 900px) {
      transform: none;
    }
  }
}