.container{
	justify-self: center;
	max-width: 1000px;
	margin: 0px;
  padding: 0 var(--space-4);
	width: 100%}
.flexd{
	align-items: center;
	display: flex;
	gap: var(--space-3)}
.flexd.end{
	justify-content: end}
.flexd_gap{
	align-items:center;
	display:flex; 
	justify-content:space-between}
.elastic{
	overflow:hidden; 
	text-overflow:ellipsis;
	width:100%;
	white-space:nowrap}
.card{
	background: var(--white);
	border: 1px solid var(--gray-300);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	gap: var(--space-3);
	padding: var(--space-4)}
.card.active{
	border: 2px solid var(--green-700)}
.pill{
	background: var(--green-100);
	border-radius: var(--radius-md);
	color: var(--green-700);
	display: inline-block;
	font-size: var(--fs-sm);
	font-weight: 500
	margin: 0;
	padding: 4px 10px}
.pill.warn{
	background-color: var(--yellow-400)}
.stars .icon{
	--icon: var(--star-icon);
	display: inline-block;
	height: 20px;
	width: 20px}
.stars .half{
  background: linear-gradient(to right, var(--yellow-400) 50%, var(--gray-300) 50%) !important}
.icon{
	--icon-size: 18px;
	-webkit-mask-image: var(--icon);
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: 100% 100%;
	background-color: currentColor;
	color: var(--gray-700);
	height: var(--icon-size);
	mask-image: var(--icon);
	mask-repeat: no-repeat;
	mask-size: 100% 100%;
	width: var(--icon-size)}
.party{
	align-items:center;
  display:grid;
  gap: var(--space-2);
  grid-template-columns: auto 1fr auto}
.party .elastic{display:inline-block}