.common-header-wrapper {
  background-image: url(../img/portfolio/bg-portfolio-header.svg);
}

#icon-exp {
  font-size: .75em;
  text-align: right;
}
#icon-exp li {
  display: inline;
}
#icon-exp li:not(:last-child):after {
  content: " |";
}

#portfolio-exp {
  background: #fff;
  margin-left: auto;
  margin-top: -1em;
  padding: 1em;
  text-align: justify;
  width: 70%;
}
#portfolio-exp .exp {
  border-top: 1px solid;
  min-height: 10em;
}

#portfolio-date {
  text-align: right;
}

#portfolio-img {
  background: #eee;
  width: 60%;
  padding: 2em;
}
#portfolio-img > img {
  height: auto;
  width: 100%;
  vertical-align: middle;
}

#portfolio-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin: 2em auto;
}

#works-list {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
#works-list img {
  border: 1px #ccc solid;
  padding: 5px;
  width: 100%;
}


@media (max-width: 960px) {
  #portfolio-exp {
    margin-top: 0;
    min-height: 1em;
    width: 90%;
  }

  #portfolio-img {
    padding: 1em;
    width: 80%;
  }

  #works-list {
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  }
}