.tm-home-sections {display:grid;grid-template-columns:minmax(0,1fr);gap:0 24px;align-items:start}
.tm-home-sections > section {min-width:0}
.tm-home-chat-list {display:grid;gap:10px;min-width:0}
html[data-teamilo-hig] .tm-home-chat-list {gap:12px}
.tm-home-chat-list > .empty {margin:0}

/* Personal conversations use the thread photo, including contacts outside the team. */
html body #app .tm-account-chat > .tm-chat-image.tm-chat-image-thread {border-radius:50%}
@media(max-width:600px){
 html:not([data-teamilo-hig]) .tm-home-chat-list {gap:8px}
}
@media(min-width:800px){
 .tm-home-sections {grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"chats events"}
 .tm-home-chats {grid-area:chats}.tm-home-events {grid-area:events}
}

/* Share heading and subtitle rows so wrapping in either column moves both lists together. */
@supports (grid-template-rows:subgrid) {
 @media(min-width:800px) {
  .tm-home-sections {grid-template-areas:none;grid-template-rows:max-content max-content auto}
  .tm-home-sections > :is(.tm-home-chats,.tm-home-events) {display:grid;grid-template-rows:subgrid;align-self:stretch}
  .tm-home-sections > .tm-home-chats {grid-area:1 / 1 / 4 / 2}
  .tm-home-sections > .tm-home-events {grid-area:1 / 2 / 4 / 3}
  html body #app .tm-home-sections > :is(.tm-home-chats,.tm-home-events) > .sectionhead {
   grid-row:1 / 3;display:grid;grid-template-rows:subgrid;grid-template-columns:minmax(0,1fr);
   row-gap:0!important;align-items:start!important;justify-content:normal;
  }
  .tm-home-sections > :is(.tm-home-chats,.tm-home-events) > .sectionhead > div {display:contents}
  .tm-home-sections > :is(.tm-home-chats,.tm-home-events) > .sectionhead h2 {grid-row:1}
  .tm-home-sections > :is(.tm-home-chats,.tm-home-events) > .sectionhead small {grid-row:2}
  .tm-home-chat-list {grid-row:3;align-self:start}
  .tm-home-event-list {grid-row:3 / -1;align-self:start;min-width:0}
 }
}