/* portfolio.css - BestOfferReveiew Portfolio pagina specifieke stijlen */

.portfolio-intro {
  margin-top: var(--space-12);
  margin-bottom: var(--space-12);
  text-align: center;
}

.portfolio-section {
  margin-bottom: var(--space-16);
}

/*.grid aanpassingen*/
.graphic-design-grid,
.illustration-grid,
.testimonials-grid {
  display: grid;
  gap: var(--space-8);
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
}
p {
  max-width: 100%;
}
.web-development-grid {
  display: grid;
  gap: var(--space-8);
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
}
.portfolio-intro img {
  width: 100%;
}
.photography-grid,
.video-editing-grid {
  display: grid;
  gap: var(--space-12);
  align-items: center;
}

@media (max-width: 900px) {
  .photography-grid, .video-editing-grid {
    grid-template-columns: 1fr !important;
    gap: var(--space-6);
  }
}

.illustration-grid .card, .graphic-design-grid .card, .testimonials-grid .card {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.card img {
  margin-bottom: var(--space-4);
  border-radius: var(--radius-md);
}

.testimonials-grid .card {
  background: var(--gray-50);
  color: var(--color-text);
  font-style: italic;
  min-height: 160px;
}

.testimonial-author {
  display: block;
  margin-top: var(--space-3);
  font-style: normal;
  color: var(--gray-600);
  text-align: right;
}

.portfolio-contact {
  max-width: 700px;
  margin: var(--space-16) auto var(--space-16) auto;
  background: #fff;
  padding: var(--space-10) var(--space-6);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.contact-details > div {
  margin-bottom: var(--space-3);
  font-size: 1.1rem;
}
@media (max-width: 600px) {
  .portfolio-intro {
    margin-top: var(--space-6);
    margin-bottom: var(--space-6);
  }
  .portfolio-contact {
    padding: var(--space-6) var(--space-2);
  }
}