/* Base styles for mobile (single column layout) */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
}

.portfolio {
    width: 100%; /* Full width of the page */
    padding: 20px;
    box-sizing: border-box; /* Includes padding in width calculation */
    display: grid; /* Use grid layout */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Create a responsive grid */
    grid-gap: 20px; /* Space between images */
}

.portfolio img {
    width: 100%;
    height: 300px; /* Set a larger height for images */
    object-fit: cover; /* Ensures images fill the space while maintaining aspect ratio */
}

/* Media query for desktop view (grid layout) */
@media (min-width: 768px) {
    .portfolio {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(600px, 1fr));
        grid-gap: 20px;
    }

    .portfolio img {
        width: 100%;
        height: 600px; /* Fixed height for all images */
        object-fit: cover; /* Ensures images fill the space while maintaining aspect ratio */
        margin-bottom: 0;
    }
}