.study-session-card{position:relative;&:has(.reactions-panel.open),&:has(.actions-menu[open]) { z-index:20; } > .header { display:flex; flex-direction:column; gap:0.75rem; @media (min-width:40rem) { flex-direction:row; align-items:center; justify-content:space-between; } > .author-row { display:flex; align-items:center; justify-content:space-between; > .menu-mobile { display:block; @media (min-width:40rem) { display:none; } } } > .side { display:flex; gap:1rem; > .pill { width:fit-content; } > .menu-desktop { display:none; @media (min-width:40rem) { display:block; } } } } > .activity-name { font-weight:500; } > .description { white-space:pre-wrap; line-height:1.625; } > .resource-link { display:flex; flex-direction:column; gap:0.5rem; padding:0.5rem 1rem; background-color:var(--gray-light); border-radius:0.375rem; &:hover { opacity:75%; } @media (min-width:40rem) { flex-direction:row; align-items:center; } > .resource-link-info { display:flex; align-items:center; gap:0.5rem; flex:1; min-width:0; > svg { flex-shrink:0; width:1rem; height:1rem; } > .resource-link-title { font-size:0.875rem; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } } } > hr { border:0; border-top:1px solid var(--gray); } > .footer { display:flex; flex-direction:column; gap:1rem; @media (min-width:40rem) { flex-direction:row; align-items:center; justify-content:space-between; } > .reactions { display:flex; align-items:center; gap:0.25rem; > .comments { display:flex; align-items:center; gap:0.25rem; > svg { width:1.25rem; height:1.25rem; } } } > .meta { display:flex; flex-direction:column; gap:0.5rem; font-size:0.875rem; color:var(--text-muted); @media (min-width:40rem) { flex-direction:row; align-items:center; } > .duration,> .date { display:flex; align-items:center; gap:0.25rem; > svg { width:1rem; height:1rem; } } } }}