/* Custom CSS for masonry gallery component (without Tailwind) */
body {
 width:100vw;
 display:fixed;
 top:0;
 bottom:0;
 left:0;
 overflow:hidden;
}
}
/* Ensure html and body take full viewport height and hide scrollbars */
#portfolio-section {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden; /* Hide main body scrollbar */
    font-family: 'Inter', sans-serif; /* Using a common sans-serif font */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: #f3f4f6; /* Equivalent to bg-gray-100 */
    display: flex; /* Centers the container */
    justify-content: center; /* Centers horizontally */
    align-items: center; /* Centers vertically */
}

/* The main container now takes full viewport width/height and has no scrollbar */
.masonry-container {
    width: 100vw; /* Equivalent to w-screen */
    height: 100vh; /* Equivalent to h-screen */
    overflow: hidden; /* Hide container scrollbar, as movement is animated */
    display: flex; /* Equivalent to flex */
    justify-content: space-between; /* Equivalent to justify-between */
    padding: 1rem; /* Equivalent to p-4 */
    background-color: #fff; /* Equivalent to bg-white */
    border-radius: 0.5rem; /* Equivalent to rounded-lg */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* Equivalent to shadow-xl */
    box-sizing: border-box; /* Include padding in width/height */
}

.masonry-column {
    display: flex; /* Equivalent to flex */
    flex-direction: column; /* Equivalent to flex-col */
    width: calc(100% / 6 - 1.25rem); /* Equivalent to w-1/6 and px-2 (1rem padding + 0.25rem margin per side) */
    padding-left: 0.5rem; /* Equivalent to px-2 */
    padding-right: 0.5rem; /* Equivalent to px-2 */
    flex-shrink: 0; /* Prevent columns from shrinking */
}

.masonry-image {
    width: 100%; /* Images fill their column width */
    height: auto; /* Maintain aspect ratio */
    display: block; /* Remove extra space below images */
    margin-bottom: 1rem; /* Equivalent to mb-4 */
    border-radius: 0.5rem; /* Equivalent to rounded-lg */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* Equivalent to shadow-md */
}

.masonry-message {
    text-align: center; /* Equivalent to text-center */
    color: #4b5563; /* Equivalent to text-gray-600 */
    padding: 1rem; /* Equivalent to p-4 */
    width: 100%; /* Ensure it spans full width */
}

/* Responsive adjustments for columns */
@media (max-width: 1024px) { /* Equivalent to Tailwind's 'lg' breakpoint */
    .masonry-column {
        width: calc(100% / 4 - 1rem); /* Change to 4 columns, adjust spacing */
    }
}

@media (max-width: 768px) { /* Equivalent to Tailwind's 'md' breakpoint */
    .masonry-column {
        width: calc(100% / 3 - 0.75rem); /* Change to 3 columns, adjust spacing */
    }
}

@media (max-width: 640px) { /* Equivalent to Tailwind's 'sm' breakpoint */
    .masonry-container {
        padding: 0.5rem; /* Smaller padding */
    }
    .masonry-column {
        width: calc(100% / 2 - 0.5rem); /* Change to 2 columns, adjust spacing */
        padding-left: 0.25rem;
        padding-right: 0.25rem;
    }
    .masonry-image {
        margin-bottom: 0.75rem; /* Slightly smaller margin */
    }
}

@media (max-width: 480px) {
    .masonry-column {
        width: calc(100% / 1 - 0.25rem); /* Change to 1 column, adjust spacing */
        padding-left: 0.125rem;
        padding-right: 0.125rem;
    }
    .masonry-image {
        margin-bottom: 0.5rem; /* Smaller margin */
    }
}