/* Base styles */
body {
  margin-bottom: 100px;
  padding-top: 190px;
  background-color: #f7f7f7; /* Light background color */
  color: #060606; /* Dark text color for contrast */
  font-family: 'Space Mono', monospace;
  font-size: 18px; /* Base font size for scalability */
}

p {
  font-size: 1rem; /* Use em units for relative sizing */
}

header {
  display: flex;
  flex-direction: column;
  align-items: start;
  position: fixed;
  height: 220px;
  background-color: transparent;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  cursor: default;
  border: none;
}

.header-content {
  margin-top: 60px;
  margin-left: 60px;
  color: #060606;
}

.bottom-section {
  display: flex;
  flex-direction: row;
  justify-content: start;
}

.bottom-section-text, .top-section-text {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  color: #060606;
  text-decoration: none;
}

.bottom-section-text:hover, .top-section-text:hover {
  color: #f7f7f7;
}

h1, h2 {
  font-size: 1.4rem;
  margin: 10px;
  padding: 10px 15px;
  font-weight: 700;
  background-color: #f7f7f7;
  border: none;
}

h1:hover, h2:hover {
  color: #f7f7f7;
  background-color: #060606;
  text-decoration: underline;
}

h3 {
  font-family: 'Space Mono', monospace;
  font-size: 1.4rem;
  color: #f7f7f7; /* Same as the background color */
  margin-left: 90px;
  margin-top: 0;
  margin-bottom: 0;
}

.work-grid {
  display: flex;
  width: 100%;
  height: auto;
  align-items: center;
  margin: 0 60px; /* Consistent margins */
}

.work-image {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px;
  width: 100%;
  max-width: 90vw; /* Prevent overflow */
  height: auto; /* Ensure natural height */
  box-sizing: border-box;
  margin: auto;
}

.work-info {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-size: 1rem;
  line-height: 1.8;
  font-weight: 400;
  padding: 40px 70px 30px 0;
  cursor: default;
}

.work-details {
  display: flex;
  padding: 20px 70px 20px 70px;
  flex-direction: column;
  align-items: start;
  justify-content: start;
  font-size: 1rem;
  line-height: 1.8;
}

.subtitles {
  display: flex;
  flex-direction: row;
  align-items: start;
  justify-content: start;
  font-size: 1rem;
}

h4 {
  font-size: 1rem;
  color: #060606;
  margin: 0;
}

.artist-statement {
  display: flex;
  flex-direction: row;
  align-items: start;
  justify-content: start;
  font-size: inherit;
  margin-top: 0;
}

.work-title, .work-mounting, .work-media, .work-size, .work-classification {
  margin: 0px;
}

/* Preserve different display sizes for images */
.madonna-preview {
  width: 52%;
  height: auto;
}

.chaos-preview {
  width: 90%;
  height: auto;
}

.tepuyes-preview {
  width: 46%;
  height: auto;
}

.quinta-republica-preview {
  width: 88%;
  height: auto;
}

.orchids-preview {
  width: 90%;
  height: auto;
}

.portrait-of-luisana-preview {
  width: 70%;
  height: auto;
}

.altar-preview {
  width: 50%;
  height: auto;
}

br {
  color: transparent;
}

img {
  max-width: 100%; /* Prevents image from overflowing container */
  height: auto; /* Maintains aspect ratio */
  display: block; /* Removes inline display space */
}

/* Mobile Styles */
@media (max-width: 768px) {
  body {
    margin-bottom: 50px; /* Halved */
    padding-top: 120px; /* Halved + 20px */
    font-size: 12.5px; /* About 70% of the original size */
  }

  header {
    height: 110px; /* Halved */
    margin-top: 6px; /* Adjusted */
  }

  .header-content {
    margin-top: 25px; /* Halved - 5px */
    margin-left: 25px; /* Halved - 5px */
  }

  h1, h2 {
    font-size: 1rem;
    margin: 5px; /* Halved */
    padding: 5px 7.5px; /* Halved */
  }

  .bottom-section {
    display: flex;
    flex-direction: row;
    justify-content: start;
  }

  h3 {
    font-size: 1rem; /* Reduced to 70% of original */
    margin-left: 45px; /* Halved */
  }

   .work-grid {
    margin: 0 auto; /* Center the grid container */
    padding: 0 10px; /* Add padding to prevent touching screen edges */
    align-items: center; /* Ensure items are centered */
  }

  .work-image {
    padding: 0; /* Remove extra padding */
    margin: 0 auto; /* Center the work-image container */
    width: 100%; /* Full width to avoid overflow */
    max-width: 90vw; /* Maintain max-width for responsiveness */
    box-sizing: border-box; /* Include padding in width calculation */
  }
  
  .work-info {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    font-size: 0.65rem; /* Reduced to 65% */
    padding: 20px 28px 15px 0; /* Halved-ish */
  }

  .work-info p {
    font-size: 0.6rem; /* Reduced to 60% */
    margin-block: 0;
  }

  .work-details {
    padding: 10px 35px 10px 35px; /* Halved */
    font-size: 0.65rem; /* Reduced to 65% */
  }

  .subtitles, .artist-statement {
    flex-direction: column; /* Stack elements vertically on mobile */
    font-size: 0.65rem; /* Reduced to 65% */
  }

  h4 {
    font-size: 0.65rem; /* Reduced to 65% */
  }
  .work-title, .work-mounting, .work-media, .work-size, .work-classification {
    font-size: 0.65rem; /* Reduced to 65% */
  }
}