#portfolio.products-section {
  width: 100%;
  background: var(--page-bg);
}

.modal-image-wrap {
  background: #fff;
  padding: 22px 26px 14px;
}

.modal-image {
  object-fit: contain;
}

.modal-image-overlay {
  display: none;
}

@media (min-width: 900px) {
  #portfolio.products-section {
    aspect-ratio: 16 / 9;
    height: auto;
    min-height: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    padding: clamp(34px, 3.4vw, 52px) 0;
  }

  #portfolio > .container {
    width: 100%;
  }

  #portfolio .section-header {
    margin-bottom: clamp(18px, 1.7vw, 26px) !important;
  }

  #portfolio .section-tag {
    margin-bottom: 10px;
  }

  #portfolio .section-title {
    font-size: clamp(30px, 3.1vw, 42px);
    margin-bottom: 0;
  }

  #portfolio .portfolio-tabs-container {
    margin-bottom: clamp(16px, 1.6vw, 24px);
  }

  #portfolio .carousel-flat-viewport {
    padding: 8px 10px 22px;
  }

  #portfolio .carousel-flat-track {
    gap: 18px;
  }

  #portfolio .carousel-flat-card {
    flex-basis: clamp(270px, 22.5vw, 310px);
    height: clamp(352px, 27.5vw, 390px);
    border-radius: 24px;
  }

  #portfolio .card-img-wrap-flat {
    height: clamp(164px, 13.5vw, 190px);
  }

  #portfolio .card-content-flat {
    padding: clamp(16px, 1.35vw, 19px);
  }

  #portfolio .card-title-flat {
    font-size: clamp(17px, 1.35vw, 19px);
    margin-bottom: 7px;
  }

  #portfolio .card-desc-flat {
    font-size: clamp(12px, 0.95vw, 13.5px);
    line-height: 1.55;
  }

  #portfolio .card-btn-flat {
    margin-top: 8px;
  }
}

@media (max-width: 899px) {
  #portfolio.products-section {
    aspect-ratio: auto;
    min-height: 0;
    overflow: visible;
    padding: 72px 0;
  }

  #portfolio .section-header {
    margin-bottom: 32px !important;
  }

  #portfolio .portfolio-tabs-container {
    margin-bottom: 30px;
  }

  #portfolio .carousel-flat-card {
    height: 420px;
  }

  #portfolio .card-content-flat {
    padding: 20px;
  }

  #portfolio .card-title-flat {
    margin-bottom: 8px;
  }

  #portfolio .card-btn-flat {
    margin-top: 10px;
  }
}

@media (max-width: 560px) {
  #portfolio.products-section {
    padding: 56px 0;
  }

  #portfolio .portfolio-tab-btn {
    padding-inline: 22px;
  }

  #portfolio .carousel-flat-card {
    flex-basis: min(82vw, 310px);
    height: 405px;
  }
}