.portfolio {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0px 1.5vw;
  margin: 15px 0;
}
.portfolio h2 {
  margin: 15px 0;
  font: normal 16px/1.0 'Oswald', sans-serif;
}
.portfolio-cover {
  position: relative;
  /* aspect-ratio: 1.5; */
  overflow: hidden;
}
.portfolio-cover img.cover {
  width: 100%;
  display: block;
  transition: transform 0.3s;
}
.portfolio-cover:hover img.cover {
  transform: scale(1.2);
}
.portfolio-cover a.cover {
  display: block;
  position: absolute;
  inset: 0;
  background: white;
  transition: opacity 0.3s;
  opacity: 0;
}
.portfolio-cover:hover a.cover {
  opacity: 0.2;
}
.portfolio-cover a.red-btn {
  position: absolute;
  right: 4px;
  bottom: 4px;
  border: 1px solid white;
}
.portfolio p {
  margin-top: 10px;
}
.portfolio p::first-line {
  font-weight: 400;
}

@media screen and ( min-width: 576px ) {
}

@media screen and ( min-width: 768px ) {
  .portfolio {
    gap: 0px calc(1.5 * (min(1200px,100vw) - 300px) / 100);
  }
}

@media screen and ( min-width: 992px ) {
}