Fix masonry layout #28

src/views/Kanban.vue

@@ -68,88 +68,4 @@ function openDialog(targetStepSlug) {
   position: absolute;
   right: calc(-0.75rem);
 }
-
-/* Masonry */
-.kanban .masonry > * {
-  margin-bottom: var(--space-16);
-}
-.kanban .masonry > *:only-child {
-  column-span: all;
-  transform: translateY(50%);
-}
-@media (min-width: 40rem) {
-  .kanban .masonry {
-    column-count: 2;
-  }
-}
-@media (min-width: 65rem) {
-  .kanban .masonry {
-    column-count: 3;
-  }
-}
-@media (min-width: 90rem) {
-  .kanban .masonry {
-    column-count: 4;
-  }
-}
-
-/* Image */
-.image {
-  border-radius: var(--rounded-2xl);
-  overflow: hidden;
-  position: relative;
-  cursor: pointer;
-}
-.image.has-description::after {
-  content: "";
-  display: inline-block;
-  width: 1rem;
-  height: 1rem;
-  background: var(--icon-color, currentColor);
-  mask-repeat: no-repeat;
-  mask-position: center;
-  mask-size: 1rem;
-  mask-image: var(--icon-description);
-  position: absolute;
-  top: 1.25rem;
-  right: 1.25rem;
-}
-.image[aria-selected="true"] {
-  outline: 2px solid var(--color-focus-ring);
-}
-.image[aria-selected="true"]::after {
-  content: attr(data-count);
-  position: absolute;
-  top: var(--space-12);
-  right: var(--space-12);
-  border-radius: 50%;
-  color: var(--color-white);
-  font-weight: 700;
-  background: var(--color-grey-800);
-  display: grid;
-  place-items: center;
-  text-align: center;
-  width: 1.5rem;
-  height: 1.5rem;
-}
-.image .tag {
-  position: absolute;
-  top: var(--space-12);
-  left: var(--space-12);
-}
-
-/* Kanban */
-.kanban {
-  --header-height: 2.25rem; /* 36px */
-  --header-bg-color: var(--color-grey-200);
-  --header-title-bg-color: var(--color-grey-700);
-  --gap: var(--gutter);
-  position: relative;
-  display: flex;
-  gap: var(--gap);
-  overflow-x: auto;
-  margin: 0 calc(-1 * var(--gutter));
-  padding: 0 var(--gutter);
-  height: calc(100vh - var(--gutter) * 2 - var(--header-height) - 3.25rem);
-}
 </style>