/*
| Breakpoint Range     | Common Devices (approximate)                                                               |
| -------------------- | ------------------------------------------------------------------------------------------ |
| **479px and below**  | Small mobile phones (older iPhones SE, small Androids, very compact screens)               |@media (max-width: 479px)
| **480px to 639px**   | Regular mobile phones (iPhone 6/7/8, mid-size Androids)                                    |@media (min-width: 480px) and (max-width: 639px)
| **640px to 767px**   | Large mobile phones / small phablets (iPhone Plus, Galaxy Note, small tablets in portrait) |@media (min-width: 640px) and (max-width: 991px)
| **768px to 991px**   | Tablets (iPad portrait, small tablets landscape)                                           |@media (min-width: 768px) and (max-width: 991px)
| **992px to 1199px**  | Small laptops / tablets landscape (Netbooks, iPad Pro 11", smaller Chromebooks)            |@media (min-width: 992px) and (max-width: 1199px)
| **1200px to 1399px** | Standard desktops / laptops (most common MacBooks, 13–15" laptops, typical monitors)       |@media (min-width: 1200px) and (max-width: 1399px)
| **1400px and above** | Large desktops / wide monitors (Full HD 24"+ monitors, ultrawide screens, TVs)             |@media (min-width: 1400px)

/* CSS for the zoomed image preview */
.zoomed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    cursor: zoom-out;
    transition: opacity 0.3s ease;
}

.zoomed img {
    max-width: 70%;
    max-height: 70%;
    transform: scale(1);
    transition: transform 0.3s ease;
}

.zoomed img.zoom-in {
    transform: scale(1.5); /* Adjust scale as needed */
}