body {
    font-family: sans-serif;
    margin: 0;
    padding: 0;
}

.grid-container {
    display: grid;
    grid-template-columns: 1fr; /* Single column on small screens */
    gap: 20px;
    padding: 20px;
}

header {
    grid-template-columns: 1fr auto; /* Logo and nav side by side */
    align-items: center;
}

header .logo img {
    max-height: 80px;
}

header .nav {
    display: flex;
    gap: 20px;
}

header .nav a {
    text-decoration: none;
    color: #333;
}

main section {
    border: 1px solid #ddd;
    padding: 20px;
}

.about img, .services img {
    max-width: 100%;
    height: auto;
    margin-top: 10px;
}

.gallery-images {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* Responsive gallery */
    gap: 10px;
}

.gallery-images img {
    width: 100%;
    height: auto;
}

footer {
    text-align: center;
    padding: 10px;
    background-color: #f0f0f0;
}

/* Media query for larger screens */
@media (min-width: 768px) {
    .grid-container {
        grid-template-columns: 1fr 1fr; /* Two columns on larger screens */
    }

    header {
        grid-column: 1 / 3; /* Header spans both columns */
    }

    #about, #services, #gallery, #contact, footer{
        grid-column: 1 / 3;
    }

    #about, #services{
        grid-template-columns: 1fr 1fr;
    }

    #about img, #services img{
        grid-column: 1/2;
    }

    #about div, #services div{
        grid-column: 2/3;
    }
}