/* Responsive styles */

/* Large desktop (default) */
/* The main styles already handle this */

/* Medium desktop and tablet landscape */
@media (max-width: 1200px) {
  .gallery-grid {
    gap: var(--space-2);
  }
  
  h1 {
    font-size: 2.2rem;
  }
  
  h2 {
    font-size: 1.8rem;
  }
  
  .subtitle {
    font-size: 1.1rem;
  }
}

/* Tablet portrait */
@media (max-width: 992px) {
  :root {
    --space-3: 1.25rem;
    --space-4: 1.75rem;
  }
  
  .gallery-grid {
    grid-template-columns: 2fr 3fr;
    grid-template-rows: auto 1fr auto;
  }
  
  .text-content {
    grid-column: 1 / 3;
    grid-row: 1 / 2;
    padding-right: 0;
    max-height: 300px;
    margin-bottom: var(--space-3);
  }
  
  .text-container {
    height: auto;
  }
  
  .main-image-container {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
  }
  
  .main-image-wrapper {
    height: auto;
    aspect-ratio: 2/3;
  }
  
  .thumbnails-container {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: flex-start;
    overflow-y: visible;
    padding-left: var(--space-2);
  }
  
  .thumbnail {
    width: calc(50% - var(--space-1));
  }
  
  .image-details {
    grid-column: 1 / 3;
    grid-row: 3 / 4;
    margin-top: var(--space-3);
  }
}

/* Mobile landscape */
@media (max-width: 768px) {
  .gallery-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto;
  }
  
  .text-content {
    grid-column: 1;
    grid-row: 1;
    margin-bottom: var(--space-2);
  }
  
  .main-image-container {
    grid-column: 1;
    grid-row: 2;
    margin-bottom: var(--space-2);
  }
  
  .main-image-wrapper {
    height: auto;
    aspect-ratio: 2/3;
  }
  
  .thumbnails-container {
    grid-column: 1;
    grid-row: 3;
    padding-left: 0;
    justify-content: space-between;
  }
  
  .thumbnail {
    width: calc(33.33% - var(--space-1));
  }
  
  .image-details {
    grid-column: 1;
    grid-row: 4;
  }
}

/* Mobile portrait */
@media (max-width: 576px) {
  :root {
    --space-2: 0.875rem;
    --space-3: 1rem;
  }

  h1 {
    font-size: 1.75rem;
  }
  
  h2 {
    font-size: 1.5rem;
    margin-top: var(--space-3);
  }
  
  h3 {
    font-size: 1.25rem;
  }
  
  .container {
    padding: var(--space-2);
  }
  
  .main-image-wrapper {
    height: auto;
    aspect-ratio: 2/3;
  }
  
  .thumbnail {
    width: calc(50% - 0.5rem);
    aspect-ratio: 2/3;
  }
  
  .image-details {
    padding: var(--space-2);
  }
}