/* Hero Section for Sales Page */
.sales-hero {
    height: 35vh;
    min-height: 250px;
}

.sales-hero img {
    object-position: center 40%;
}

/* --- CRITICAL FIX FOR SIZE AND ALIGNMENT --- */
/* This class overrides the main layout specifically for the Sales page */
.sales-wrapper {
    display: block !important; /* Disables the split-screen grid */
    width: 95% !important;    /* Uses 95% of the screen width */
    max-width: 1600px !important; /* Allows it to get much wider than other pages */
    margin: 60px auto !important; /* Centers the gallery perfectly */
    padding: 0 20px;
}

/* Masonry Grid Layout */
.masonry-grid {
    column-count: 3; /* 3 Columns, but now they will be much wider */
    column-gap: 30px; /* More space between images */
    margin-bottom: 50px;
}

.grid-item {
    display: inline-block; /* Prevents columns from cutting images in half */
    width: 100%;
    margin-bottom: 30px; /* Increased spacing */
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Stronger shadow for pop */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    background: white;
}

.grid-item img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.5s ease;
}

/* Hover Effects */
.grid-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
    z-index: 2;
    position: relative;
}

.grid-item:hover img {
    transform: scale(1.03);
}

/* Responsive Adjustments */

/* On Laptops, drop to 2 columns to keep images big */
@media (max-width: 1200px) {
    .masonry-grid {
        column-count: 2;
    }
}

/* On Mobile, 1 column full width */
@media (max-width: 600px) {
    .masonry-grid {
        column-count: 1;
    }
    .sales-wrapper {
        width: 100% !important;
        padding: 0 15px;
    }
}