.complete,
.partial {
  align-items: center;
  box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.16);
  cursor: pointer;
  display: grid;
  gap: var(--Spacing-x-one-and-half);
  padding: var(--Spacing-x2);
  z-index: 1;
  background-color: var(--Base-Surface-Primary-light-Normal);
}

.complete {
  grid-template-columns: 1fr 36px;
}

.partial {
  grid-template-columns: minmax(auto, 150px) min-content minmax(
      auto,
      150px
    ) auto;
}

.icon {
  align-items: center;
  background-color: var(--Base-Button-Primary-Fill-Normal);
  border-radius: 50%;
  display: flex;
  height: 36px;
  justify-content: center;
  justify-self: flex-end;
  width: 36px;
}

@media screen and (min-width: 768px) {
  .complete,
  .partial {
    display: none;
  }
}