.map-table_container{   /* holds map and table */
    display: flex;
    justify-content: center;  /* Align map and table next to each other */
    gap: 0.125rem;  /* Space between the map and table */
    flex-wrap: nowrap;  /* Allow the layout to wrap in smaller screens */
    margin: 0.3125rem auto;
    width: 100%; /* Match the width of the image grid */
    max-width: 56.25rem; /* Optional: Max width for consistency */
}

.map-container {
    width: 60%;
    display: flex;
    flex-direction: column;
}

#weathermap {
  width: 100%; /* Increase map width by 40px */
  height: 29rem; /* You can adjust this to your desired height */
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--border-radius); /* rounded corners */
  margin-left: 0;
  flex-shrink: 0;
}

#weather-coords {           /* lat, lng for mousemove */
    text-align: center;
    margin-top: 0;
    font-size: 1rem;
}

.table-container {  /* Table container style */
    width: 40%;
    max-width: 25rem;
    margin-left: 0.5rem;  /* between map & table */
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--border-radius);
    overflow: hidden;
}

table {
  width: 100%; /* Ensure the table takes up the full width of its container */
  height: 100%; /* as above */
  border-collapse: collapse;
  font-size: 1rem;  /* Set the font size */
}

table th, table td {
    padding: 0.6875rem 0.125rem;  /* fitting text into table with no wrap full screen */
    border: .0625rem solid var(--border-color);  /* inside lines */
    border-radius: var(--border-radius);
    text-align: left;
}

table th {
    background-color: #f4f4f4;
}

.weather-image-container {
    display: grid;
    flex-wrap: wrap;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    justify-items: center;
    width: 100%;
    max-width: 56.25rem;
    margin: 0 auto;
}
/* Grid items */
.grid-item {
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--border-radius);
    text-align: center;
    background-color: #f4f4f4;
}

/* Style for images */
.grid-item img {
    width: 17.5rem;
    height: 7rem;
    object-fit: cover;
    object-position: top;
    display: block;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 870px) {
    .weather-image-container {
        grid-template-columns: repeat(2, 1fr); /* Switch to two columns for images */
    }
    table {
        font-size: 0.875rem; /* Decrease font size for smaller screens */
    }
    table th,
    table td {
        padding: 0 0.125rem; /* Decrease padding to reduce cell height */
    }
}

@media (max-width: 590px) {
    .weather-image-container {
        grid-template-columns: 1fr; /* Switch to one column for images */
    }

    .map-table_container {
        flex-direction: column; /* Stack the map and table vertically */
        align-items: center; /* Center the map and table horizontally */
    }
    .map-container,
    .table-container {
        width: 95%; /* Take up full width */
        max-width: none; /* Allow full width */
        margin: 0 auto; /* Center the containers */
    }
    .table-container {
        margin-top: .625rem; /* Add some space above the table when it drops below the map */
    }
}