/* Responsive Styles */

/* 
  Mobile-first images are handled by max-width: 100% in base reset usually, 
  but let's be explicit here.
*/
img {
  max-width: 100%;
  height: auto;
}

/* Tablet (768px to 1023px) */
@media (max-width: 1023px) {
  .grid-3, .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .section {
    padding: var(--section-pad-y-tablet) 0;
  }
}

/* Mobile (up to 767px) */
@media (max-width: 767px) {
  .grid-2, .grid-3, .grid-4 {
    grid-template-columns: 1fr;
    gap: var(--gap-sm);
  }

  .flex-between {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gap-sm);
  }

  /* Make buttons full width on small screens usually */
  .btn {
    width: 100%;
  }

  .section {
    padding: var(--section-pad-y-mobile) 0;
  }
  
  /* Modal adjustments */
  .modal-content {
    padding: 24px;
    margin: 16px;
    max-height: 90vh;
    overflow-y: auto;
  }
}