.apartments-title-container{

    padding-top: 88px;

    width: 100%;

    height: 308px;

    background-color: var(--neutral-01);

    border-bottom-left-radius: 32px;

    border-bottom-right-radius: 32px;

    box-shadow:  0px 0px 25px 0px hsla(0, 0%, 0%, 0.3);

    z-index: 10;

    position: relative;





    display: flex;

    justify-content: flex-start;

    align-items: center;

    flex-direction: column;

    gap:32px;

}









.apartments-title{

    margin-top: 32px;

    font-size: 48px;

    line-height: 60px;

    font-weight: var(--extraBold);



}



.type-filter-buttons-container{

    display: flex;

    justify-content: center;

    align-items: center;

}



.type-filter-buton{

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 8px;

    padding: 12px 28px 12px 28px;

    background-color: var(--neutral-01);

    border: solid 1px var(--border-primary);



    width: 280px;

    height: 48px;

}





.type-filter-buton.right{

    border-top-right-radius: 16px;

    border-bottom-right-radius: 16px;



}



.type-filter-buton.left{

    border-top-left-radius: 16px;

    border-bottom-left-radius: 16px;



}



.type-filter-buton.active{

    background-color: var(--primary);

    border: none;

}



.type-filter-buton.active .filter-type-btn-text{

    color: var(--inverse);

}



.type-filter-buton.active .filter-icon{

    filter: var(--filter-inverse);

}





.type-filter-buton:is(:hover, :focus-visible){

    cursor: pointer;

}



.filter-type-btn-text{

    font-size: 14px;

    line-height: 20px;

    font-weight: var(--medium);

    color: var(--primary);



}





/* Table Container Styles */

.search-by-apartment-table-container {

    margin-top: 2rem;

    position: relative;

}



.apartments-table-view-container {

    margin-top: 0;

    border: 1px solid #e0e0e0;

    border-radius: 8px;

    transition: all 0.3s ease;

}



.apartments-card-view-container {

    display: none;

    margin-top: 2rem;

}



.apartments-card-view-container.active {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));

    gap: 2rem;

}



/* Table Styles */

.properties-table {

    width: 100%;

    border-collapse: collapse;

    background: white;

}



.properties-table th,

.properties-table td {

    padding: 1rem;

    text-align: left;

    border-bottom: 1px solid #e0e0e0;

}



.properties-table th {

    background-color: #f8f9fa;

    font-weight: 600;

    position: sticky;

    top: 0;

    z-index: 1000; /* Increased from 1 */

}



.properties-table a {

    text-decoration: none;

    color: inherit;

}

.properties-table a:hover,

.properties-table a:focus {

    text-decoration: none;

}



.container-switch-table-card {

    width: 100%;

    height: 40px;

    display: flex;

    justify-content: flex-end;

    align-items: center;

}



/* Rest of your existing parking.css styles below... */



.apartments-content-container {

    margin-top: -32px;

    width: 100%;

    height: 1200px;

    display: none;

    background-color: var(--neutral-02);

    padding: 80px 80px 48px 80px;

}



.apartments-content-container.active {

    width: 100%;

    height: auto;

    display: flex;

    justify-content: center;

    align-items: flex-start;

    gap: 24px;

}



.virtual-building-container {

    display: flex;

    justify-content: center;

    align-items: flex-start;

    gap: 24px;

}





.virtual-building-image {

    width: 1000px;

    height: 600px;

    border-radius: 32px;

}



.virtual-building-filter-container {

    width: 290px;

    height: 378px;

    background-color: var(--neutral-01);

    border-radius: 32px;

    box-shadow: 0px 0px 6px 0px hsla(0, 0%, 0%, 0.2);

    padding: 32px 16px;

    display: flex;

    justify-content: flex-start;

    align-items: flex-start;

    flex-direction: column;

}



.search-by {

    font-size: 16px;

    line-height: 24px;

    font-weight: var(--semiBold);

}







.filter-name {

    font-size: 14px;

    line-height: 20px;

    font-weight: var(--semiBold);

    color: var(--tertirary);

    margin-top: 24px;

}



.virtual-filter-floor-container {

    margin-top: 12px;

    display: grid;

    grid-template-rows: auto;

    grid-template-columns: repeat(5, 1fr);

    gap: 8px;

}



.single-filter-container {

    width: 36px;

    height: 36px;

    display: flex;

    justify-content: center;

    align-items: center;

    border: solid 1px var(--border-primary);

    border-radius: 8px;

    font-size: 14px;

    line-height: 20px;

    color: var(--primary);

    background-color: var(--white);

}





    .single-filter-container:is(:hover,:focus-visible) {

        cursor: pointer;

        color: var(--primary);

        background-color: var(--neutral-02);

    }





    .single-filter-container.active {

        color: var(--inverse);

        background-color: var(--primary);

    }



.button-filters-virtual {

    margin-top: 24px;

}





.checkbox-container {

    margin-top: 12px;

    display: flex;

    flex-direction: column;

    justify-content: flex-start;

    align-items: flex-start;

    gap: 12px;

}



.parking-checkbox-filter-container {

    display: flex;

    justify-content: flex-start;

    align-items: center;

    gap: 8px;

}



.parking-checkbox-filter {

    background-color: var(--neutral-01);

    display: flex;

    justify-content: center;

    align-items: center;

    width: 24px;

    height: 24px;

    border-radius: 50%;

    border: solid 1px var(--border-secondary);

}





.parking-filter-text {

    font-size: 14px;

    line-height: 20px;

    font-weight: var(--semiBold);

}





.checkmark-icon-parking {

    display: none;

}





.parking-checkbox-filter-container.active .checkmark-icon-parking {

    display: block;

}



.close-filters{

    display: none;

}

/* SEARCH BY APARTMENT */

.apartments-table-view-container {

    display: none;

}



    .apartments-table-view-container.active {

        display: block;

        border: none;

        max-height: 600px;

        position: relative;

    }



.search-by-apartment-container {

    margin-top: -32px;

    width: 100%;

    height: 1200px;

    display: none;

    background-color: var(--neutral-02);

    padding: 80px 80px 48px 80px;

}



    .search-by-apartment-container.active {

        width: 100%;

        height: auto;

        display: flex;

        justify-content: center;

        align-items: flex-start;

        gap: 24px;

    }



.search-by-apartment-filters {

    width: 290px;

    height: auto;

    background-color: var(--neutral-01);

    border-radius: 32px;

    box-shadow: 0px 0px 6px 0px hsla(0, 0%, 0%, 0.2);

    padding: 32px 16px;

    display: flex;

    justify-content: flex-start;

    align-items: flex-start;

    flex-direction: column;

}



/* Styling both sliders */

input[type="range"] {

    -webkit-appearance: none;

    appearance: none;

    position: absolute;

    width: 100%;

    height: 4px;

    background: none;

    pointer-events: none;

}



    /* Adjust thumb position */

    input[type="range"]::-webkit-slider-thumb {

        -webkit-appearance: none;

        appearance: none;

        width: 16px;

        height: 16px;

        background: var(--icons-primary);

        border: solid 1px var(--neutral-06);

        border-radius: 50%;

        pointer-events: auto;

        cursor: pointer;

        transform: translateY(0);

        position: relative;

        z-index: 1;

    }





/* Values Display */

.slider-values {

    margin-top: 16px;

    display: flex;

    justify-content: space-between;

    width: 100%;

    font-size: 12px;

    font-weight: bold;

}



.slider-value {

    font-size: 14px;

    font-weight: var(--semiBold);

    line-height: 20px;

    color: var(--primary);

}











.show-available-only {

    display: flex;

    justify-content: flex-start;

    align-items: center;

    gap: 8px;

    margin-top: 24px;

}



.available-checkbox {

    width: 32px;

    height: 32px;

    border-radius: 50%;

    border: solid 1px var(--border-primary);

    display: flex;

    justify-content: center;

    align-items: center;

}





    .available-checkbox:is(:hover, :focus-visible) {

        cursor: pointer;

    }



    .available-checkbox.active .checkmark-icon {

        display: block;

    }



.checkmark-icon {

    display: none;

}



.available-text {

    font-size: 14px;

    line-height: 16px;

    font-weight: var(--medium);

    letter-spacing: 1px;

    color: #656565;

}





.apartments-filter {

    width: 240px;

    height: 40px;

    margin-top: 16px;

    padding: 10px 12px;

    

}



.cancel-filters {

    width: 182px;

    height: 40px;

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 8px;

    background-color: var(--white);

    border: solid 1px var(--border-subtle);

    border-radius: 20px;

    align-self: center;

    box-shadow: 0px 0px 1px 0px hsla(0, 0%, 0%, 0.3);

    margin-top: 32px;

    padding: 10px 12px;

    



    /* Make the entire container show the pointer cursor */

    cursor: pointer;

}



/* If you want the text more visible by default, pick a bolder color */

.cancel-filters-text {

    font-size: 14px;

    line-height: 20px;

    font-weight: var(--semiBold);

    color: var(--primary); /* Instead of var(--neutral-05) */

}



/* If you want a hover effect, you can lighten/darken the background 

   or change the text/icon color on hover. Example: */

.cancel-filters:hover {

    background-color: var(--neutral-03);

}



.cancel-filters:hover .cancel-filters-text {

    color: var(--primary);

}



.cancel-filter-icon {

    filter: var(--filter-neutral-05);

}



/* Change the icon color on hover as well */

.cancel-filters:hover .cancel-filter-icon {

    filter: var(--filter-primary);

}



.filter-results {

    font-size: 14px;

    line-height: 20px;

    font-weight: var(--semiBold);

    color: var(--tertirary);

    align-self: center;

    margin-top: 16px;

}





.filter-button-mobile{

    display: none;

    justify-content: center;

    align-items: center;

    gap: 8px;

    border: solid 1px var(--border-primary);

    border-radius: 24px;

    padding: 8px 16px;

    margin-right: auto;

    position: relative;

}





.filter-icon-mobile{

    width: 20px;

    height: 20px;

}





.filter-btn-text-mobile{

    font-size: 14px;

    line-height: 20px;

    font-weight: var(--semiBold);

    color: var(--primary);

}







.applied-filters-counter{

    position: absolute;

    top: -10px;

    right: -10px;

    width: 24px;

    height: 24px;

    border-radius: 50%;

    background-color: var(--primary);



    color: var(--inverse);

    font-size: 14px;

    line-height: 20px;

    font-weight: var(--semiBold);



    display: flex;

    justify-content: center;

    align-items: center;

}









/* TABLE CONTAINER */



.search-by-apartment-table-container {

    width: 966px;

    max-width: 966px;

    height: auto;

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    justify-content: flex-start;

    margin-top: 0; /* Reduced from 2rem */

    position: relative;

}



.container-switch-table-card {

    width: 100%;

    height: 40px;

    display: flex;

    justify-content: flex-end;

    align-items: center;

    background-color: transparent !important; /* override if needed */

    box-shadow: none !important;             /* remove any shadows */

    border: none !important;                 /* remove any border if present */

    margin-top: 0px;

    padding: 0;/* adjust spacing if you want it lower */

}



.btn-switch {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 8px;

    width: 120px;

    height: 40px;

    background-color: transparent;

    border: none; /* Ensure no border */

    box-shadow: none; /* Ensure no shadow */

    outline: none; /* Remove focus outline if not needed */

}



.switch-btn-icon {

    width: 20px;

    height: 20px;

    filter: var(--filter-neutral-08);

}



.switch-btn-text {

    font-size: 14px;

    line-height: 20px;

    font-weight: var(--regular);

    color: var(--neutral-08);

}



.btn-switch.active .switch-btn-text {

    color: var(--primary);

    font-weight: var(--semiBold);

}



.btn-switch.active .switch-btn-icon {

    filter: var(--filter-primary);

}



.btn-switch:is(:hover, :focus-visible) {

    cursor: pointer;

    background-color: transparent;

    border: none; /* Ensure no border on hover/focus */

    box-shadow: none; /* Ensure no shadow on hover/focus */

    outline: none; /* Remove focus outline if not needed */

}



.btn-switch:is(:hover, :focus-visible) .switch-btn-icon {

    filter: var(--filter-neutral-15);

}



.btn-switch.active:is(:hover, :focus-visible) .switch-btn-icon {

    filter: var(--filter-neutral-15);

}



.btn-switch:is(:hover, :focus-visible) .switch-btn-text {

    color: var(--primary);

}

.apartments-table-header {

    width: 966px;

    height: 56px;

    margin-top: 0;

    display: flex;

    justify-content: flex-start;

    align-items: center;

    gap: 44px;

    padding: 18px 74px 18px 16px;

    position: sticky;

    top: 0;

    z-index: 10;

}





.table-header-content {

    font-size: 14px;

    line-height: 20px;

    font-weight: var(--medium);

    color: var(--secondary);

    display: flex;

    justify-content: center;

    align-items: center;

    text-align: center;

    height: 20px;

}







.number {

    width: 46px;

}



.type {

    width: 90px;

}



.floor {

    width: 35px;

}



.entry {

    width: 35px;

}



.area-full {

    width: 87px;

    height: 40px;

}



.area-apartment {

    width: 80px;

}



.exposure {

    width: 115px;

}



.price {

    min-width: 90px;

}



.status {

    width: 87px;

}



    .status.open {

        background-color: rgba(41, 163, 104, 0.2);

        padding: 4px 14px;

        border-radius: 8px;

        color: var(--success);

        text-align: center;

        display: flex;

        justify-content: center;

        align-items: center;

    }



    .status.sold {

        background-color: rgba(185, 44, 49, 0.25);

        padding: 4px 14px;

        border-radius: 8px;

        color: var(--error);

        text-align: center;

        display: flex;

        justify-content: center;

        align-items: center;

    }



    .status.reserved {

        background-color: rgba(178, 143, 0, 0.25);

        padding: 4px 14px;

        border-radius: 8px;

        color: var(--yellow-03);

        text-align: center;

        display: flex;

        justify-content: center;

        align-items: center;

    }





.exposure.table {

    text-align: center;

    display: flex;

    justify-content: center;

    align-items: center;

    flex-direction: column;

    height: 48px;

    gap: 8px;

}



.exposure-sun-icon {

    width: 20px;

    height: 20px;

    filter: var(--filter-primary);

}



.apartments-table-content-container {

    margin-top: 12px;

    display: flex;

    flex-direction: column;

    justify-content: flex-start;

    align-items: center;

    gap: 12px;

    max-height: 550px;

    overflow-y: auto;

}



.apartments-table-content {

    width: 966px;

    height: 96px;

    background-color: var(--neutral-01);

    border: solid 1px var(--border-primary);

    border-radius: 24px;

    box-shadow: 0px 0px 1px 0px hsla(0, 0%, 0%, 0.3);

    padding: 24px;

    display: flex;

    justify-content: flex-start;

    align-items: center;

    gap: 44px;

    text-decoration: none;

}



/* Remove underlines in the row links (like "View Details") */

.apartments-table-content a {

    text-decoration: none;

    color: inherit;

}

.apartments-table-content a:hover,

.apartments-table-content a:focus {

    text-decoration: none;

}



.apartment-table-input {

    font-size: 14px;

    line-height: 20px;

    font-weight: var(--semiBold);

    color: var(--primary);

    display: flex;

    justify-content: flex-start;

    align-items: center;

    text-align: center;

    padding: 4px;

}



.table-arrow-container {

    width: 32px;

    height: 32px;

    background-color: var(--neutral-01);

    border-radius: 50%;

    display: flex;

    justify-content: center;

    align-items: center;

    opacity: 0;

    transition: 0.3s ease;

}



.table-content-forward-arrow {

    width: 16px;

    height: 16px;

}



.apartments-table-content:is(:hover, :focus-visible) {

    cursor: pointer;

    background-color: var(--neutral-02);

}





    .apartments-table-content:is(:hover, :focus-visible) .table-arrow-container {

        opacity: 1;

    }







/* APARTMENTS CARDS */



.property-card-click{

    text-decoration: none;

}





.apartments-card-view-container {

    width: 966px;

    height: auto;

    display: none;

    margin-top: 2rem;

}



    .apartments-card-view-container.active {

        display: grid;

        grid-template-rows: auto;

        grid-template-columns: repeat(2, 1fr);

        justify-content: flex-start;

        align-items: flex-start;

        gap: 32px;

        width: max-content;

    }



.apartment-card {

    width: 342px;

    height: 574px;

    background-color: var(--white);

    border-radius: 32px;

    box-shadow: 0px 0px 2px 0px hsla(0, 0%, 0%, 0.3);

}





.apartment-card:is(:hover, :focus-visible) {

    border: solid 1px var(--border-primary);

}





.apartment-image-container {

    width: 342px;

    height: 342px;

    padding: 16px;

    border-top-left-radius: 32px;

    border-top-right-radius: 32px;

    background-position: center center;

    background-size: contain;

    background-repeat: no-repeat;

    border-bottom: solid 1px var(--border-subtle);

}



.price-container {

    width: 144px;

    height: 44px;

    background-color: var(--neutral-01);

    border: solid 1px var(--border-subtle);

    display: flex;

    justify-content: center;

    align-items: center;

    flex-direction: column;

    border-radius: 24px;

}



.apartment-card-status {

    font-size: 12px;

    line-height: 16px;

    font-weight: var(--bold);

}



    .apartment-card-status.open {

        color: var(--success);

    }



    .apartment-card-status.sold {

        color: var(--error);

    }



    .apartment-card-status.reserved {

        color: var(--yellow-03);

    }



.apartment-card-price {

    font-size: 14px;

    line-height: 20px;

    font-weight: var(--bold);

}





.apartment-card-details-container {

    margin: 16px 18px 24px 18px;

    display: flex;

    justify-content: center;

    align-items: flex-start;

    flex-direction: column;

}



.apartment-details-card {

    width: 100%;

    display: flex;

    justify-content: flex-start;

    align-items: flex-start;

    gap: 5px;

    padding-bottom: 20px;

    border-bottom: solid 1px var(--border-subtle);

}



.apartment-detail-container {

    height: 56px;

    display: flex;

    flex-direction: column;

    gap: 8px;

    padding: 8px;

}



.detail-apartment-type {

    font-size: 12px;

    line-height: 16px;

    font-weight: var(--semiBold);

    color: var(--quertanary);

}



.detail-apartment-input {

    font-size: 12px;

    line-height: 16px;

    font-weight: var(--semiBold);

}





.apartment-status-card-container {

    display: flex;

    justify-content: space-between;

    align-items: center;

    width: 100%;

    margin-top: 22px;

}



.apartment-status-card-text {

    font-size: 12px;

    line-height: 16px;

    font-weight: var(--semiBold);

    color: var(--secondary);

}



.apartment-card-buttons-container {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 16px;

}



.phone-button-apartment-card {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 8px;

    background-color: var(--white);

    border: solid 1px var(--border-primary);

    padding: 8px 16px;

    border-radius: 24px;

    text-decoration: none;

    font-size: 14px;

    line-height: 20px;

    font-weight: var(--semiBold);

    width: 142px;

    height: 40px;

}



.apartment-card-button {

    width: 142px;

    height: 40px;

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 8px;

    background-color: var(--primary); /* Black background */

    border: none;

    border-radius: 24px;

    text-decoration: none;

    padding: 8px 16px;

    transition: background-color 0.3s ease;

}



.apartment-card-button .btn-text {

    font-size: 14px;

    line-height: 20px;

    font-weight: var(--semiBold);

    color: var(--inverse); /* White text */

}



.apartment-card-button .btn-icon {

    filter: var(--filter-inverse); /* White arrow icon */

}







@media (width < 1280px) {





    .btn-switch.table{

        display: none;

    }

}



@media (width < 1040px) {

    .apartments-card-view-container.active{



        grid-template-columns: repeat(1, 1fr);



    }



}





@media (width < 700px) {

    .apartments-title-container{



        gap:24px;

    }









    .apartments-title{

        margin-top: 24px;

        font-size: 28px;

        line-height: 32px;



    }



    .type-filter-buttons-container{

        display: flex;

        justify-content: center;

        align-items: center;

        flex-direction: column;

        gap: 8px;

    }



    .type-filter-buton{

        display: flex;

        justify-content: center;

        align-items: center;

        gap: 8px;

        padding: 12px 28px 12px 28px;

        background-color: var(--neutral-01);

        border: solid 1px var(--border-primary);

        border-radius: 16px;

    }









    .filter-button-mobile{

        display: flex;

    }



    .search-by-apartment-filters{

        display: none;

    }



    .apartments-card-view-container.active {

        display: flex;

        flex-direction: column;

        justify-content: center;

        align-items: center;

        gap: 32px;

        width: 100%;

        margin-top: 32px;

    }



    .container-switch-table-card {

        width: 100%;

        height: 40px;

        justify-content: flex-start;

        margin-top: 16px;

    }



    .btn-switch.table{

        display: none;

    }

    .search-by-apartment-filters.active{

        display: flex;

    }









    .search-by-apartment-filters {

        width: 290px;

        height: 800px;

        position: fixed;

        display: flex;

        justify-content: flex-start;

        align-items: flex-start;

        flex-direction: column;

        position: fixed;

        top: 0;

        left: 0;

        width: 100vw;

        height: 100vh;

        border-radius: 0px;

        z-index: 100000;

        background-color: rgba(255, 255, 255, 1);

        padding:48px 24px;

        box-shadow: 0px 0px 6px 0px hsla(0, 0%, 0%, 0.2);

        visibility: hidden;

        opacity: 0;

        transform: translateY(-100%);

        transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;

        overflow-y: auto;

    }



    .search-by {

        font-size: 20px;

        line-height: 28px;

        font-weight: var(--bold);

        max-width: 160px;

    }





    .search-by-apartment-filters.active {

        visibility: visible;

        opacity: 1;

        transform: translateY(0);

        overflow-y: auto;

    }



    .close-filters {

        position: absolute;

        top: 48px;

        right: 24px;

        background: none;

        border: none;

        font-size: 24px;

        cursor: pointer;

        padding: 0px;

        display: block;

    }





    .apartments-filter {

        width: 240px;

        height: 40px;

        margin-top: 16px;

        justify-self: center;

        align-self: center;

    }







    .search-by-apartment-table-container {

        width: auto;

        max-width: 966px;

        height: auto;

        display: flex;

        flex-direction: column;

        align-items: flex-start;

        justify-content: flex-start;

    }





}

@media (width < 360px) {





    .apartment-card{

        width: 300px;

        height: 540px;

        background-color: var(--white);

        border-radius: 32px;

        box-shadow:  0px 0px 2px 0px hsla(0, 0%, 0%, 0.3);



    }



    .apartment-image-container{

        width: 300px;

        height: 300px;



    }









    .phone-button-apartment-card{





        width: 132px;



    }



    .apartment-card-button{

        width: 142px;

        height: 40px;

    }



    .apartment-card-button .btn-text{

        font-size: 12px;

    }



}

@media (width < 340px) {







    .apartments-title{

        margin-top: 24px;

        font-size: 24px;

        line-height: 28px;



    }







    .type-filter-buton{



        width: 280px;

    }



    .filter-type-btn-text {

        text-align: center;

        font-size: 12px;

    }





}



@media (width < 1280px) {

    /* Hide the 'table' switch if you want that same effect at smaller widths */

    .btn-switch.table {

        display: none;

    }



    /* The container that holds the table toggles */

    .search-by-apartment-table-container {

        

        margin: 0;

        padding: 0 24px;   /* a bit of side padding */

    }



    /* The actual table container is forced wide so it can scroll horizontally */

    .apartments-table-view-container.active {

        min-width: 966px;   /* match your table’s “desktop” width */

        padding: 0 16px;

        margin: 0 -24px;    /* negative margin matches the side padding above */

    }



    /* So the header + content row also stretch to that min-width */

    .apartments-table-header,

    .apartments-table-content-container {

        min-width: 966px;

        width: 100%;

    }

}



/* For smaller tablets / large phones < 768px */

@media (width < 768px) {

    /* This container might need smaller padding on narrower screens */

    .search-by-apartment-table-container {

        padding: 0 16px;

    }



    .apartments-table-view-container.active {

        margin: 0 -16px;

        padding: 0 12px; /* a bit less side padding here */

    }



    .apartments-table-header {

        padding: 10px 12px; /* top/bottom, left/right padding for the header row */

    }



    /* If you have big negative margins/padding in your .apartments-content-container or

       .search-by-apartment-container, you can override them here to avoid them

       squashing the layout on mobile. E.g.: */

    .apartments-content-container {

        padding: 24px 16px 40px 16px;

        margin-top: 0; /* remove any negative top margin if used */

    }



    .search-by-apartment-container {

        padding: 24px 16px 40px 16px;

        margin-top: 0;

    }

}



/* For very small screens < 480px */

@media (width < 480px) {

    .search-by-apartment-table-container {

        padding: 0 12px;

    }



    .apartments-table-view-container.active {

        margin: 0 -12px;

        padding: 0 8px;

    }



    .apartments-table-content {

        padding: 12px;

    }



    .apartments-content-container,

    .search-by-apartment-container {

        width: 100%;

        max-width: 100%;

        padding: 16px;

        margin-top: 0;

    }

}