div.template-container {
  @apply w-full h-32 flex flex-row justify-between items-center px-4;

}

button.templateBoard {
  @apply w-[30%] h-4/5 bg-background-400 rounded shadow mx-3 transition-all;

  &:hover {
    filter: brightness(0.9);
    @apply transition-all;
  }
}

button#createBlank {
  @apply flex items-center justify-center;
  background-color:#ffbb99;
  background-image:
  radial-gradient(at 49% 9%, hsla(44,65%,61%,1) 0px, transparent 50%),
  radial-gradient(at 83% 92%, hsla(209,81%,74%,1) 0px, transparent 50%),
  radial-gradient(at 2% 69%, hsla(302,72%,77%,1) 0px, transparent 50%);
}

#kanban {
  background-image: url('../../../../../../../assets/images/template-boards/kanban.png');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

#sprint-retro {
  background-image: url('../../../../../../../assets/images/template-boards/sprint-retro.png');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}


#useCase {
  background-image: url('../../../../../../../assets/images/template-boards/usecase-diagram.png');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

