.projects {
  height: 100%;
  align-items: flex-start;
  padding-top: 8rem;
  overflow: hidden;
  background-color: var(--white-color);

  .base-limitator {
    .title {
      font-size: 2.2rem;
      font-weight: 600;
      line-height: 6rem;
      color: var(--dark-color);
      opacity: 0;
      transform: translateY(-50px);
      transition: opacity 1s ease, transform 1s ease;

      &.animate {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .projects-container {
      display: flex;
      flex-direction: column;
      gap: 4rem;

      .project-link {
        text-decoration: none;
        color: inherit;
        display: block;
        opacity: 0;
        transform: translateY(50px);
        transition: opacity 1s ease, transform 1s ease;

        &:hover {
          text-decoration: none;
          color: inherit;
        }

        &.animate {
          opacity: 1;
          transform: translateY(0);
        }

        .project-card {
          display: flex;
          align-items: flex-start;
          gap: 3rem;
          position: relative;
          padding: 2.5rem;
          background-color: var(--card-background);
          border-radius: 16px;
          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
          transition: all 0.3s ease;
          border: 1px solid rgba(229, 231, 235, 0.8);
          width: 100%;

          &:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1), 0 4px 10px rgba(0, 0, 0, 0.06);
            border-color: var(--primary-color);
          }

          &:focus-within {
            outline: 2px solid var(--focus-color);
            outline-offset: 2px;
          }

          .project-image {
            width: 100%;
            max-width: 28rem;
            height: 16rem;
            object-fit: cover;
            border-radius: 10px;
            flex-shrink: 0;
          }

          .project-info {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: flex-start;
            gap: 4px;
            flex: 1;
            width: 100%;

            .project-title {
              font-size: 2.4rem;
              color: var(--dark-color);
              font-weight: 700;
              margin-bottom: 1rem;
            }

            .project-tools {
              display: flex;
              align-items: center;
              flex-wrap: wrap;
              gap: 1rem;
              margin-bottom: 1rem;

              .stack-chip {
                font-size: 1.2rem;
                font-weight: 600;
                display: flex;
                align-items: center;
                justify-content: center;
                padding: 0.6rem 1.2rem;
                background-color: var(--secondary-background-color);
                color: var(--text-color);
                border-radius: 20px;
                border: 1px solid rgba(229, 231, 235, 0.8);
                transition: all 0.3s ease;

                &.javascript {
                  background-color: var(--javascript-color);
                  color: var(--dark-color);
                  border-color: var(--javascript-color);
                }

                &.ruby-on-rails {
                  background-color: var(--ruby-on-rails-color);
                  color: var(--white-color);
                  border-color: var(--ruby-on-rails-color);
                }

                &.git {
                  background-color: var(--git-color);
                  color: var(--white-color);
                  border-color: var(--git-color);
                }

                &.vue {
                  background-color: var(--vue-color);
                  color: var(--white-color);
                  border-color: var(--vue-color);
                }

                &.node {
                  background-color: var(--node-color);
                  color: var(--white-color);
                  border-color: var(--node-color);
                }

                &.mysql {
                  background-color: var(--mysql-color);
                  color: var(--white-color);
                  border-color: var(--mysql-color);
                }

                &.php {
                  background-color: var(--php-color);
                  color: var(--white-color);
                  border-color: var(--php-color);
                }

                &.html {
                  background-color: var(--html-color);
                  color: var(--white-color);
                  border-color: var(--html-color);
                }

                &.css {
                  background-color: var(--css-color);
                  color: var(--white-color);
                  border-color: var(--css-color);
                }
              }
            }

            .project-description {
              font-size: 1.5rem;
              color: var(--text-secondary);
              text-align: justify;
              line-height: 1.6;
            }
          }
        }
      }
    }
  }
}

@media (max-width: 820px) {
  .projects .base-limitator .projects-container .project-link .project-card {
    flex-direction: column;
    padding: 1.5rem;
    gap: 2rem;

    .project-image {
      object-fit: contain;
      max-width: none;
    }

    .project-info {
      .project-title {
        font-size: 2rem;
      }

      .project-description {
        font-size: 1.4rem;
      }
    }
  }
}