main {
  background-color: var(--base-gray-200);
  padding-bottom: 6rem;

  #my-projects {
    padding-block: 4.5rem 3.5rem;
    flex-direction: column;
    align-items: center;

    p {
      padding-bottom: 0.5rem;
      color: var(--principal-red);
    }
  }

  .grid {
    grid-template-columns: repeat(auto-fit, minmax(20.625rem, 1fr));
    gap: 1.5rem;
    padding-bottom: 4rem;

    /* g915x-landing */     .project-card:nth-child(1)  img { border: 0.75rem solid var(--principal-blue);   border-bottom: none; }
    /* Sniptap */           .project-card:nth-child(2)  img { border: 0.75rem solid var(--principal-blue);   border-bottom: none; }
    /* Bolos Cris */        .project-card:nth-child(3)  img { border: 0.75rem solid var(--principal-purple); border-bottom: none; }
    /* Festivite */         .project-card:nth-child(5)  img { border: 0.75rem solid var(--principal-purple); border-bottom: none; }
    /* NLW Pocket */        .project-card:nth-child(6)  img { border: 0.75rem solid var(--principal-yellow); border-bottom: none; }
    /* NLW Agents */        .project-card:nth-child(7)  img { border: 0.75rem solid var(--principal-purple); border-bottom: none; }
    /* Estrelas do Amanhã */.project-card:nth-child(9)  img { border: 0.75rem solid var(--principal-red);    border-bottom: none; }
    /* Convert */           .project-card:nth-child(10) img { border: 0.75rem solid var(--principal-blue);   border-bottom: none; }
    /* GTA */               .project-card:nth-child(12) img { border: 0.75rem solid var(--principal-yellow); border-bottom: none; }
    /* Santorini */         .project-card:nth-child(14) img { border: 0.75rem solid var(--principal-blue);   border-bottom: none; }
    /* Comida Brasileira */ .project-card:nth-child(15) img { border: 0.75rem solid var(--principal-red);    border-bottom: none; }
    /* Indie New Year */    .project-card:nth-child(16) img { border: 0.75rem solid var(--principal-yellow); border-bottom: none; }
    

    .project-card {
      background-color: var(--base-gray-300);
      border-radius: 0.75rem;
      padding: 0.75rem 0.75rem 0;
      text-decoration: none;
      color: inherit;

      h3 {
        padding-block: 1.5rem 0.5rem;
      }

      p {
        padding-bottom: 1.31rem;
      }

      h3, p {
        padding-left: 0.25rem;
      }

      img {
        width: 100%;
        height: auto;
        object-fit: cover;
        border-radius: 0.5rem;
        object-position: center;
      }
    }
  }
}

.toggle-button {
  background-color: var(--base-gray-300);
  color: #F38E95; /* vermelho mais claro para melhor contraste WCAG */
  border: 1px solid var(--principal-red);
  border-radius: 0.5rem;
  padding: 0.75rem 1.5rem;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  align-items: center;
  gap: 0.5rem;
  margin: 0 auto;
  transition: background-color 0.3s ease, color 0.3s ease,
              transform 0.3s ease, box-shadow 0.3s ease;
  animation: pulseButton 2s infinite;

  &:hover {
    background-color: var(--principal-red);
    color: white;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(227, 100, 110, 0.3);
    animation: none;
  }

  &:active {
    transform: translateY(0);
  }
}

@keyframes pulseButton {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.05); }
}