@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap')
@import "common.sass"
    
#modal
    // width: 100%
    // height: 100%
    width: 500px
    height: 250px
    background-color: blueviolet
    border-radius: 1rem
    display: flex
    flex-direction: column
    justify-content: start
    align-items: center
    padding: 1rem

.cards-horizontal
    width: 100%
    display: flex
    flex-direction: row
    justify-content: space-evenly
    align-items: center

.cards-vertical
    width: 100%
    display: flex
    flex-direction: column
    justify-content: start
    align-items: center

section
    width: 100%
    height: 100%
    display: flex
    flex-direction: column
    justify-content: start
    align-items: center

.container
    padding: 0.5rem 0
    h4
        padding: 0.5rem 0
        filter: greyscale(0.2)

.container.center
        @include center
        flex-direction: column
        width: 100%
.container.left
        display: flex
        flex-direction: column
        justify-content: start
        align-items: start

.card
    border: 1px solid gray
    flex: 1
    border-radius: 5px
    margin: 0px 5px
    @include center
    flex-direction: column
    min-height: 5rem
    &:hover
        cursor: pointer
        filter: brightness(1.2)