/ alux-living / alux-living / css / responsive.css

/* Responsive styles for the Alux Living website */

/* Mobile styles */
@media (max-width: 600px) {
    header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    nav {
        flex-direction: column;
        gap: 10px;
    }
    
    .hero {
        padding: 30px 5.5%;
    }
    
    .filters {
        flex-direction: column;
        padding: 10px 5.5%;
    }
    
    .property-area {
        grid-template-columns: 1fr;
    }
    
    .map {
        height: 300px;
    }
}

/* Tablet styles */
@media (min-width: 601px) and (max-width: 800px) {
    .hero {
        padding: 40px 5.5%;
    }
    
    .filters {
        padding: 15px 5.5%;
    }
    
    .property-area {
        grid-template-columns: 1fr;
    }
    
    .map {
        height: 350px;
    }
}

/* Desktop styles */
@media (min-width: 801px) {
    .filters {
        padding: 18px 5.5%;
    }
    
    .property-area {
        grid-template-columns: 52% 48%;
    }
    
    .map {
        height: auto;
    }
}