main section {
  width: 75%;
  max-width: 800px;
}

@media only screen and (max-width: 640px) {
  main section {
    width: 90%;
  }
}

@media only screen and (max-width: 400px) {
  main section {
    width: 95%;
  }
}

.portfolio-item {
  margin-bottom: 50px;
}

.portfolio-image {
  width: 100%;
  height: auto;
  display: block;
  filter: grayscale(1);
  margin-bottom: 15px;
  border: var(--text-color) 1px solid;
  transition: filter 0.4s ease, border-color 0.4s ease;
}

.portfolio-image:hover {
  filter: grayscale(0);
}

.portfolio-item h3 {
  font-size: 1.5em;
  font-weight: normal;
  margin: 0 0 10px;
  color: var(--accent-color);
}

.portfolio-item p {
  margin: 0 0 12px;
}

.portfolio-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.portfolio-links .small-link {
  margin-left: 0;
}