.portfolio {
  max-width:             50em;
  margin:                0 auto;
  margin-top:            2.5rem;
  text-align:            center;
  display:               grid;
  justify-content:       center;
  justify-items:         inherit;
  grid-gap:              40px;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  grid-auto-rows:        1fr;
}

.portfolio-item {
  color:           inherit;
  display:         grid;
  justify-content: stretch;;
  align-items:     space-between;
  border-radius:   15px 45px;
  overflow:        hidden;
  box-sizing:      border-box;
  box-shadow:      0 4px 8px 0 rgba(0, 0, 0, 0.2);
  box-shadow:      0 6px 20px 0 rgba(0, 0, 0, 0.19);
  transition:      box-shadow 0.5s;
}

.portfolio-item:hover {
  color:               inherit;
  text-decoration:     none;
  border-bottom-style: none;
  box-shadow:          0 4px 8px 0 rgba(0, 0, 0, 0.2);
  box-shadow:          0 6px 20px 0 rgba(0, 0, 0, 0.39);
}

.portfolio-item .image{
  max-width: 100%;
  aspect-ratio: 1 / 1;
  box-sizing:    border-box;
}

.portfolio-item .transparent {
  /* padding: 10px; */
}

.portfolio-item .caption {
  color:         var(--color-typography);
  font-size:     1.4rem;
  line-height:   1.1;
  font-weight:   700;
  margin-bottom: 1.5rem;
  overflow-wrap: break-word;
  word-wrap:     break-word;
}

@media screen and (max-width: 472px) {
  .portfolio {
    grid-gap:              2.5rem;
    grid-template-columns: 0.9fr;
  }

  .portfolio-item {
    color:           inherit;
    display:         flex;
    flex-flow:       row nowrap;
    justify-content: flex-start;
    align-items:     center;
    align-content:   center;
    border-radius:   10px 30px;
  }

  .portfolio-item .image {
    max-width:    30%;
    height:       100%;
    flex:         1 0 auto;
    margin:       0;
    margin-right: 2em;
  }

  .portfolio-item .caption {
    text-align: left;
    font-size:  4.5vw;
    margin:     0;
  }
}