@media (max-width: 860px) {
    .df-app-dashboard-page {
        padding: 0;
    }

    .df-app-dashboard-shell {
        display: flex;
        flex-direction: column;
        min-height: 0;
    }

    .df-app-dashboard-page .df-host-dashboard-main {
        padding: 20px var(--space-md) 42px;
    }

    .df-app-sidebar {
        position: static;
        min-height: 0;
        border-right: 0;
        border-bottom: 1px solid rgba(45, 28, 15, .10);
    }

    .df-app-dashboard-page .df-host-topbar {
        margin: -20px calc(var(--space-md) * -1) 0;
        padding: 14px var(--space-md);
    }

    .df-app-dashboard-page .df-host-menu,
    .df-app-menu {
        grid-template-columns: 1fr;
    }

    .df-app-dashboard-columns,
    .df-app-overview-hero {
        grid-template-columns: 1fr;
    }

    .df-app-staff-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .df-app-action-grid {
        grid-template-columns: 1fr;
    }

    .df-app-demo-toggle-card {
        grid-template-columns: 1fr;
    }

    .df-account-page,
    .df-dashboard-page {
        padding: 96px var(--space-md) 48px;
    }

    .df-app-dashboard-page.df-dashboard-page {
        padding: 0;
    }

    .df-account-layout {
        grid-template-columns: 1fr;
    }

    .df-account-intro {
        min-height: auto;
    }

    .df-account-grid,
    .df-dashboard-grid {
        grid-template-columns: 1fr;
    }

    .df-dashboard-hero {
        align-items: flex-start;
        flex-direction: column;
    }

    .df-dashboard-identity {
        grid-template-columns: 54px minmax(0, 1fr);
    }

    .df-dashboard-identity img {
        width: 54px;
        height: 54px;
    }

    .df-dashboard-hero-actions {
        justify-content: flex-start;
    }

    .df-dashboard-card.is-wide {
        grid-column: auto;
    }

    .df-dashboard-booking {
        align-items: flex-start;
        flex-direction: column;
    }

    .df-renter-trip-card,
    .df-renter-trip-card.is-empty {
        grid-template-columns: 1fr;
    }

    .df-renter-trip-card img {
        width: 100%;
        height: 180px;
    }

    .df-renter-trip-card a,
    .df-renter-trip-side {
        justify-self: start;
        justify-items: start;
    }

    .df-renter-detail-hero,
    .df-renter-detail-grid,
    .df-renter-nearby-grid,
    .df-booking-inbox-item,
    .df-invoice-row {
        grid-template-columns: 1fr;
    }

    .df-invoice-summary {
        align-items: flex-start;
        flex-direction: column;
    }

    .df-invoice-row > div:last-child {
        justify-items: start;
    }

    .df-renter-detail-hero > div {
        padding: 0 14px 14px;
    }

    .df-host-property {
        grid-template-columns: 70px minmax(0, 1fr);
        min-width: 0;
    }

    .df-host-property-list {
        overflow-x: visible;
    }

    .df-host-property-media,
    .df-host-property-media img {
        width: 70px;
        height: 60px;
    }

    .df-host-property-head {
        display: none;
    }

    .df-host-property-cell {
        grid-column: 1 / -1;
        text-align: left;
    }

    .df-host-property-cell::before {
        display: inline-flex;
        min-width: 110px;
        color: var(--color-muted);
        font-size: 11px;
        font-weight: 900;
        text-transform: uppercase;
    }

    .df-host-property-cell:nth-of-type(1)::before {
        content: "Open aanvragen";
    }

    .df-host-property-cell:nth-of-type(2)::before {
        content: "Favorieten";
    }

    .df-host-property-cell:nth-of-type(3)::before {
        content: "Status";
    }

    .df-staff-user-list .df-host-property-cell:nth-of-type(1)::before {
        content: "Rol/status";
    }

    .df-host-property-actions {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }

    .df-dashboard-booking-side {
        justify-items: start;
    }

    .df-host-dashboard-page {
        padding: 88px var(--space-md) 42px;
    }

    .df-host-dashboard-shell {
        display: flex;
        flex-direction: column;
    }

    .df-host-sidebar {
        position: static;
        width: 100%;
    }

    .df-host-menu {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .df-host-menu a {
        min-height: 38px;
    }

    .df-host-form-tabs {
        grid-template-columns: 1fr;
    }

    .df-host-tab-nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .df-host-calendar-toolbar,
    .df-host-block-form-main {
        align-items: stretch;
        grid-template-columns: 1fr;
    }

    .df-host-calendar-toolbar {
        display: grid;
    }

    .df-host-calendar-layout,
    .df-host-calendar-overview,
    .df-renter-calendar-next {
        grid-template-columns: 1fr;
    }

    .df-host-calendar-kpis,
    .df-renter-calendar-summary {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .df-host-calendar-filter select {
        min-width: 0;
        width: 100%;
    }

    .df-calendar-detail {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 620px) {
    .df-app-staff-stats,
    .df-app-dashboard-page .df-dashboard-stats,
    .df-host-calendar-kpis,
    .df-renter-calendar-summary {
        grid-template-columns: 1fr;
    }

    .df-app-topbar-user span {
        display: none;
    }

    .df-account-grid,
    .df-dashboard-stats,
    .df-host-check-list,
    .df-host-submit-grid,
    .df-profile-form-grid {
        grid-template-columns: 1fr;
    }

    .df-host-rule-row {
        grid-template-columns: 1fr;
    }

    .df-profile-card-head {
        grid-template-columns: 58px minmax(0, 1fr);
    }

    .df-profile-card-head img {
        width: 58px;
        height: 58px;
    }

    .df-host-menu {
        grid-template-columns: 1fr;
    }

    .df-host-calendar-months {
        grid-template-columns: 1fr;
    }

    .df-host-calendar-months .df-host-calendar + .df-host-calendar {
        border-top: 1px solid rgba(45, 28, 15, .055);
        border-left: 0;
    }

    .df-host-section,
    .df-host-welcome,
    .df-host-sidebar {
        padding: 18px;
    }

    .df-host-tab-nav {
        grid-template-columns: 1fr;
    }

    .df-host-calendar-panel {
        overflow-x: auto;
    }

    .df-host-calendar {
        overflow: visible;
    }

    .df-host-calendar-months {
        min-width: 1040px;
    }
}

@media (max-width: 1180px) {
    #df-host-calendar .df-host-calendar-layout {
        grid-template-columns: 1fr;
    }

    #df-host-calendar .df-host-calendar-aside {
        grid-column: 1;
        grid-row: auto;
    }

    #df-host-calendar .df-host-calendar-aside {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #df-host-calendar .df-host-calendar-aside > .df-host-calendar-side-card {
        border-right: 1px solid rgba(45, 28, 15, .08);
    }
}

@media (max-width: 820px) {
    #df-host-calendar.df-host-section {
        padding: 20px;
    }

    #df-host-calendar .df-host-calendar-toolbar,
    #df-host-calendar .df-host-calendar-overview,
    #df-host-calendar .df-host-calendar-aside {
        grid-template-columns: 1fr;
    }

    #df-host-calendar .df-host-calendar-toolbar-actions {
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    #df-host-calendar .df-host-calendar-filter-menu {
        justify-self: start;
    }

    #df-host-calendar .df-host-calendar-filter label,
    #df-host-calendar .df-host-calendar-filter label:first-of-type {
        width: 100%;
        min-width: 0;
    }

    #df-host-calendar .df-host-calendar-months {
        min-width: 860px;
    }

}