images.sass

#viewImages
    &:hover
        #view-images-hill
            fill: #ec6819
        #view-images-sun
            animation: sun-bounce 1s 1 ease-in-out
            @keyframes sun-bounce
                0%, 20%, 50%, 80%, 100%
                    transform: translateY(0)
                40%
                    transform: translateY(300px)
                60%
                    transform: translateY(-60px)
    #view-images-hill
        transition: fill 0.6s ease-in-out

#imagesView
    overflow: auto
    width: 100%
    height: 100%
    display: flex
    justify-content: center
    flex-wrap: wrap
    padding-bottom: 6px

    &.hidden, & *.hidden
        display: none !important

    #btnLoadMore
        display: inline-block
        border-radius: 6%
        border: 1px solid var(--accent-green)
        background-color: var(--accent-blue30)
        transition: all 0.2s
        padding: 2px
        margin: 6px
        max-height: 20px
        cursor: pointer

        &:hover
            background-color: var(--accent-blue50)
            box-shadow: 0 12px 16px 0 var(--color-border50), 0 17px 50px 0 var(--color-border)

        &:active
            background-color: green

.previewImg
    border: 1px solid gray
    margin: 10px
    transition: all 0.6s
    overflow: hidden
    cursor: pointer

    &:hover
        box-shadow: 0 0 8px turquoise

.hr-text
    width: 100%
    line-height: 1em
    position: relative
    outline: 0
    border: 0
    color: black
    text-align: center
    height: 1.5em
    opacity: .5

    &::before
        content: ''
        background: linear-gradient(to right, transparent, #818078, transparent)
        position: absolute
        left: 0
        top: 50%
        width: 100%
        height: 1px

    &::after
        content: attr(data-content)
        position: relative
        display: inline-block
        color: black
        padding: 0 .5em
        line-height: 1.5em
        color: var(--fill-primary)
        background-color: var(--fill-quarternary)