@charset "utf-8";

.portfolio-banner {
  width: 100%;
  height: 440px;
  background-image: url(../images/portfolio/cover/banner.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
}

.portfolio-category {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 60px 0%;
}

.portfolio-category-item {
  margin: 0 40px;
  padding: 4px 0;
  color: #000;
  text-decoration: none;
}

.portfolio-category-item:focus {
  border-bottom: 1px solid #000;
}

.portfolio-list {
  margin: 0 auto;
  margin-bottom: 60px;
    max-width: 1440px;
  display: flex;
  justify-content: center;
  align-items: start;
  flex-wrap: wrap;
  padding: 0 5%;
}

.portfolio-item {
  width: 32%;
  min-height: 360px;
  margin-bottom: 16px;
  margin-left: 8px;

  img {
    width: 100%;
    object-fit: cover;
    aspect-ratio: 4 / 3;
    transition: aspect-ratio 0.5s ease;
  }
  .portfolio-content {
    padding: 8px 0;
    text-align: center;
    opacity: 0;
    transition:
      opacity 0.3s ease,
      padding 0.3s ease;

    h3 {
      font-size: 15px;
      font-weight: normal;
    }
    p {
      font-size: 12px;
      color: #727272;
    }
  }
  &:hover {
    img {
      aspect-ratio: 16 / 9;
    }
    .portfolio-content {
      opacity: 1;
    }
  }
}

@media (max-width: 1399px) {
  .portfolio-item {
    min-height: 240px;
  }
}

@media (max-width: 991px) {
  .portfolio-list {
    width: 100%;
  }

  .portfolio-item {
    width: 48%;
    min-height: 300px;

    img {
      aspect-ratio: 16 / 9;
    }
    .portfolio-content {
      opacity: 1;
    }
  }
}

@media (max-width: 757px) {
  .portfolio-category {
    display: flex;
    flex-direction: column;
    padding: 24px 0;
  }
  .portfolio-category-item {
    margin: 2px 0px;
  }

  .portfolio-item {
    width: 100%;
    margin-left: 0px;
  }
}