.transaction_card
    border-radius: var(--card-radius)
    background-color: var(--color-white)
    margin: 10px
    padding: 20px
    width: 100%
    font-family: "Montserrat"
    font-weight: 300
    display: grid
    grid-template-columns: .5fr 2fr 1fr 3fr 3fr 3fr

    p
        margin: 0
        margin-left: 30px
        display: flex
        justify-content: space-around
        justify-items: flex-begin
        width: calc(100% - 30px)

.transaction_date,
.transaction_payee,
.transaction_type,
.transaction_descr
    margin-bottom: 10px
    padding-bottom: 10px
    font-size: 1.2rem
    border-bottom: 1px solid var(--color-blue)
    
.transaction_date
    grid-column: 1 / span 2
.transaction_payee
    grid-column: 4 / span 1
.transaction_type
    grid-column: 3 / span 1
.transaction_descr
    grid-column: 5 / span 2

.transaction_amount
    grid-column: 5 / span 1
    text-align: right
    padding-right: 10px
.transaction_account
    grid-column: 2 / span 3
.transaction_extract
    grid_column: 1 / span 1
    color: var(--color-blue)