@layer pages {
  .dashboards__show {
    .dashboard__main {
      --panel-size: unset;

      display: flex;
      flex-direction: column;

      gap: var(--block-space-half);
    }

    #joined-rooms {
      flex-grow: 1;
    }

    #recent-content {
      flex-grow: 1;
    }

    @media (max-width: 874px) {
      --panel-size: 100%;
    }

    @media (min-width: 875px) {
      --panel-size: unset;

      .dashboard__main {
        flex-direction: row-reverse;
        gap: var(--block-space);
      }

      #joined-rooms {
        flex-grow: 1;
      }

      #recent-content {
        flex-grow: 3;
      }
    }

    .dashboard__rooms-list {
      list-style: none;
      padding-inline-start: 0;
    }
  }
}