/* ===============================
   GRID LAYOUT
================================ */
.rs-layout-grid {
    display: grid !important;
    gap: 12px;
}

/* columns */
.rs-layout-grid.columns-2 { grid-template-columns: repeat(2, 1fr); }
.rs-layout-grid.columns-3 { grid-template-columns: repeat(3, 1fr); }
.rs-layout-grid.columns-4 { grid-template-columns: repeat(4, 1fr); }
.rs-layout-grid.columns-5 { grid-template-columns: repeat(5, 1fr); }
.rs-layout-grid.columns-6 { grid-template-columns: repeat(6, 1fr); }

/* ===============================
   🔥 EQUAL HEIGHT FIX (GRID)
================================ */
.rs-layout-grid .rsorangetech-item {
    height: 240px;          /* 👈 sab box same height */
    overflow: hidden;
}

.rs-layout-grid .rsorangetech-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;     /* 👈 image cut hogi, stretch nahi */
    display: block;
}


/* ===============================
   MASONRY LAYOUT
================================ */
.rs-layout-masonry {
    column-gap: 15px;
}

.rs-layout-masonry.columns-2 { column-count: 2; }
.rs-layout-masonry.columns-3 { column-count: 3; }
.rs-layout-masonry.columns-4 { column-count: 4; }
.rs-layout-masonry.columns-5 { column-count: 5; }
.rs-layout-masonry.columns-6 { column-count: 6; }

.rs-layout-masonry .rsorangetech-item {
    break-inside: avoid;
    margin-bottom: 12px;
}


/* ===============================
   MOBILE FIX
================================ */
@media (max-width: 600px) {

    /* Grid → 1 column */
    .rs-layout-grid {
        grid-template-columns: 1fr !important;
    }

    .rs-layout-grid .rsorangetech-item {
        height: 180px;      /* 👈 mobile height */
    }

    /* Masonry → 1 column */
    .rs-layout-masonry {
        column-count: 1 !important;
    }
}

/* Images */
.rsorangetech img {
    width: 100%;
    display: block;
    border-radius: 4px;
}

.rsorangetech {
    display: block;               /* block container */
    max-width: 1400px;            /* maximum gallery width */
    margin: 0 auto;               /* center horizontally */
    column-gap: 15px;             /* spacing between columns */
    width: 100%;                  /* responsive width */
}
.rsorangetech.layout-grid img,
.rsorangetech.layout-masonry img {
    width: 100%;                  /* fill column width */
    display: block;
    margin-bottom: 15px;          /* vertical spacing */
    border-radius: 4px;            /* optional rounding */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* optional shadow */
    transition: transform 0.3s ease;
}

.rsorangetech img:hover {
    transform: scale(1.03);       /* subtle hover effect */
}