/* ========================================
   Portfolio page — portfolio.html
   ======================================== */
/* ========== PORTFOLIO PAGE ========== */
.portfolio-hero {
  position: relative;
  padding: 90px 0 50px;
  background-color: #0b1220;
  background-image:
    linear-gradient(105deg, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.62) 55%, rgba(0, 0, 0, 0.55) 100%),
    image-set(
      url("../../images/gallery-banner.webp") type("image/webp"),
      url("../../images/gallery-banner.jpg") type("image/jpeg")
    );
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.portfolio-hero .section-title {
  color: #ffffff;
}

.portfolio-subtitle {
  color: rgba(255, 255, 255, 0.88);
  font-size: 1.05rem;
  max-width: 560px;
  margin: 0 auto;
}

.section-portfolio-grid {
  padding-bottom: 80px;
}

.portfolio-grid .gallery-item {
  height: auto;
  aspect-ratio: 16 / 9;
}

.portfolio-grid .gallery-item .gallery-thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

@media (max-width: 991.98px) {
  .portfolio-hero {
    padding: 72px 0 40px;
  }

  .section-portfolio-grid {
    padding-bottom: 64px;
  }
}

@media (max-width: 767.98px) {
  .portfolio-hero {
    padding: 56px 0 32px;
  }

  .portfolio-subtitle {
    font-size: 0.98rem;
    max-width: none;
  }

  .section-portfolio-grid {
    padding-bottom: 48px;
  }
}