#projetos {
  & .container-projetos {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    width: 100%;
    gap: 2rem;

    & article {
      display: flex;
      flex-direction: column;
      gap: 1rem;
      width: 100%;
      box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px,
        rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
      overflow: hidden;

      & img {
        width: 100%;
        height: 20rem;
        object-fit: cover;
        box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px,
          rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
        transition: 0.3s ease all;

        &:hover {
          transform: scale(1.05);
        }
      }

      & .txt-container {
        display: flex;
        flex-direction: column;
        gap: 2rem;
        padding: 1.5rem;

        & .txt-titulo {
          display: flex;
          justify-content: space-between;
          align-items: center;

          & .titulo {
            & h2 {
              font-size: 2rem;
            }

            & .curso {
              font-size: 1.5rem;
            }
          }

          & span {
            background-color: var(--vermelho-base);
            color: var(--branco);
            font-size: 1.2rem;
            border-radius: 1.5rem;
            padding: 0.5rem 1rem;
          }
        }

        & .descricao {
          font-size: 1.7rem;
          color: var(--cinza-texto-base);
        }

        & .tags {
          display: flex;
          gap: 1rem;

          & p {
            padding: 0.5rem 1rem;
            border-radius: 1.5rem;
            font-size: 1.2rem;
            font-weight: bold;
            color: var(--branco);
            cursor: default;

            &:hover {
              opacity: 0.8;
            }
          }

          & #arduino {
            background-color: #00979d;
          }

          & #react {
            background-color: #61dafb;
          }

          & #node {
            background-color: #339933;
          }

          & #iot {
            background-color: #7e57c2;
          }
        }

        & .container-alunos {
          & p {
            font-size: 1.5rem;
            color: var(--cinza-texto-base);
          }

          & .alunos {
            color: var(--preto);
          }
        }

        & a {
          font-size: 1.5rem;
          color: var(--vermelho-base);
          text-decoration: none;
          margin: 1rem 0;
        }
      }
    }
  }
}

#contato {
  background-color: var(--cinza-claro);

  .container-contato {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 5rem 2rem;
    gap: 2rem;
    width: 100%;
    border-radius: 1rem;
    background: linear-gradient(
      303deg,
      rgba(178, 0, 0, 0.17) 40%,
      rgba(30, 58, 138, 0.17) 83%
    );

    & h3 {
      font-size: 2.5rem;
    }

    & p {
      font-size: 1.5rem;
      width: 60%;
      text-align: center;
    }
  }
}

@media (max-width: 1023px) {
  /* Titulo */
  #titulo {
    padding: 0 4%;
    & p {
      width: 100%;
      text-align: justify;
    }
    & .interface {
      padding: 2rem 0;
    }
  }

  /* Projeto */

  #projetos {
    padding: 0 4%;
    & .interface {
      padding: 2rem 0;
      & .container-projetos {
        grid-template-columns: 1fr;
        & article {
          & .txt-container {
            & .descricao {
              text-align: justify;
            }
          }
        }
      }
    }
  }

  /* Contato */

  #contato {
    padding: 0 4%;
    & .interface {
      padding: 2rem 0;
      & .container-contato {
        padding: 2rem 2rem;
        & p {
          width: 100%;
          text-align: justify;
        }
        & .btn-vermelho {
          text-align: center;
          width: 100%;
        }
        & h3 {
          text-align: center;
        }
      }
    }
  }
}