/* Portfolio Grid Component Styles */

.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  padding: 1.5rem;
  background: var(--pico-background-color, #f5f5f5);
  max-width: 1400px;
  margin: 0 auto;
}

/* Add subtle gutter effect with contrasting background */
.portfolio-grid::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, #f8f9fa 0%, #f0f1f2 100%);
  z-index: -1;
}

/* Tablet: Maintain 2 columns but reduce gap */
@media (max-width: 992px) {
  .portfolio-grid {
    gap: 1.25rem;
    padding: 1.25rem;
  }
}

/* Mobile: Stack to single column */
@media (max-width: 768px) {
  .portfolio-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: 1rem;
  }
}

/* Small mobile: Reduce padding further */
@media (max-width: 576px) {
  .portfolio-grid {
    gap: 1rem;
    padding: 0.75rem;
  }
}