@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;500&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Montserrat', sans-serif;
}

a {
  text-decoration: none;
  color: #34675c;
}

a:hover {
  color: red;
}

.body {
  min-height: 100vh;
  padding-block: 50px;
  padding-inline: 20px;
  background-color: #14140f80;

  & .app__container {
    max-width: 1200px;
    margin: 0 auto;

    display: grid;
    place-items: center;
    grid-template-columns: repeat(3, minmax(300px, 1fr));
    gap: 10px;

    & .project {
      width: 100%;
      aspect-ratio: 4/3;
      background-color: #fff;
      padding: 15px;

      .project__name {
        text-align: center;
        font-size: 16px;
        color: #f26800;
      }

      > img {
        width: 100%;
        aspect-ratio: 16/9;
        object-fit: cover;
        box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
      }

      .project__info {
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: space-around;
        column-gap: 10px;

        padding: 10px 0px;
        font-size: 14px;
      }
    }
  }
}