* {
    box-sizing: border-box;
    padding: 0;
    font-family: Arial, sans-serif;
}

h1, h2, h3, h4, h5, h6, p, ul, ol, dl { /* Add common block elements here */
    margin-top: 1em; /* This gives a default top margin to block elements */
    margin-bottom: 1em; /* This gives a default bottom margin */
    /* You can adjust '1em' to a specific pixel value like 20px if preferred */
}

/* Override for elements where you explicitly want no margin */
.sidebar h2, .sidebar h3 {
    margin-bottom: 0; /* Or whatever spacing you want in sidebar */
}

/* Add specific margin for content H2s */
.content h2 {
    margin-bottom: 20px; /* Adjust this value for space below H2s */
}


.container {
    display: flex;
    max-width: 1200px;
    margin: auto;
}

.sidebar {
    flex: 0 0 20%;
    background-color: #f4f4f4;
    padding: 20px;
    text-align: center;
}

.sidebar img {
    width: 100%;
    max-width: 200px;
    height: auto;
    border-radius: 10px;
}

/* Removed specific h2/h3 margin-top from sidebar h2/h3 if handled by general h2/h3 rule,
   but since you have it, keep it if you want that specific small margin.
   If you use the general h2 rule above, this one might override or be overridden.
   The .sidebar h2, .sidebar h3 rule is more specific than just 'h2', so it will take precedence.
   So if you want 10px in the sidebar and more elsewhere, this is good.
*/


.sidebar ul {
    list-style: none;
    padding: 0;
}

.content {
    flex: 1;
    padding: 20px;
}

.content img {
    width: 100%;
    height: auto;
    margin-bottom: 10px;
}

.footer {
    margin-top: 20px;
    text-align: center;
}

.footer img {
    width: 100%;
    max-width: 500px;
    height: auto;
}

.image-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); /* Creates a responsive grid of thumbs */
    gap: 10px; /* Space between images */
    margin-top: 2em; /* Space above the gallery */
    margin-bottom: 2em; /* Space below the gallery */
    justify-content: center; /* Centers items if there aren't enough to fill a row */
}

.image-gallery img {
    width: 100%; /* Make images fill their grid cell */
    height: auto; /* Maintain aspect ratio */
    display: block; /* Remove extra space below images */
    border: 1px solid #ccc; /* Optional: Add a border to thumbs */
    border-radius: 5px; /* Optional: Rounded corners for thumbs */
    transition: transform 0.2s ease-in-out; /* Smooth hover effect */
}

.image-gallery img:hover {
    transform: scale(1.05); /* Slightly enlarge on hover */
}

/* Adjust thumbnail size for very small screens if needed */
@media (max-width: 480px) {
    .image-gallery {
        grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
    }
}

@media (max-width: 768px) {
    .container {
        flex-direction: column;
    }

    .sidebar {
        flex: none;
        width: 100%;
        order: 2;
    }

    .content {
        flex: none;
        width: 100%;
        order: 1;
        padding: 15px;
    }

    .sidebar img {
        max-width: 150px;
    }

    .footer-container {
        flex-direction: column;
        align-items: center;
    }
    .footer-column {
        width: 100%;
        margin-bottom: 20px;
    }
}