.container {
  align-items: center;
  gap: var(--mirai-ui-space-L);
  max-width: var(--mirai-chat-content-max-width);
  width: 100%;
}

.actions {
  justify-content: center;
  gap: var(--mirai-ui-space-M);
  width: 100%;
}

.card {
  align-items: center;
  background-color: var(--mirai-ui-content-background);
  border: solid var(--mirai-chat-border-size) var(--mirai-chat-border-color);
  border-radius: var(--mirai-chat-border-radius);
  gap: var(--mirai-ui-space-L);
  margin-top: var(--mirai-ui-space-S);
  max-width: var(--mirai-ui-breakpoint-S);
  width: 100%;
}

.stars {
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
}

.starContainer {
  align-items: center;
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: calc(var(--mirai-chat-space) / 2);
}

.star {
  transition: color var(--mirai-ui-motion-expand) var(--mirai-ui-motion-easing);
}

.star.active {
  color: goldenrod;
}


/* S */
@media only screen and (max-width: 480px) {
  .container {
    padding: 0 var(--mirai-ui-space-M);
  }

  .card {
    gap: var(--mirai-ui-space-M);
    padding: var(--mirai-ui-space-L) var(--mirai-ui-space-M);
  }
}

/* M & L */
@media only screen and (min-width: 431px) {
  .card {
    gap: var(--mirai-ui-space-L);
    padding: var(--mirai-ui-space-XL);

  }
}
