@import "@/common/styles/colors"

.module-area
  display: flex
  gap: 0.3rem

.module-item
  display: flex
  flex-direction: column
  align-items: center
  padding: 1.5rem 1.5rem
  cursor: pointer
  gap: 0.5rem
  border-radius: 15px
  border: 1px solid #FFFFFF
  transition: ease-in-out all 0.3s
  width: 5rem

.module-item:hover
  border: 1px solid $gray

  & .module-icon
    background-color: $primary-hover

  & h3
    color: $gray


.module-icon
  display: flex
  justify-content: center
  align-items: center
  width: 1rem
  height: 1rem
  background-color: $primary
  padding: 1.5rem
  font-size: 24pt
  border-radius: 5rem
  color: $white

.module-item h3
  text-align: center
  margin: 0
  color: $light-gray