@import '_vars'

header
    max-width: $main-width
    margin: 0 auto
    font-size: 40px
    margin-bottom: 15rem

    h1
        line-height: 4rem

div.featured__facts
    padding: 1.5rem
    margin-block: 2rem
    display: flex
    vertical-align: middle
    transition: all 200ms

    &:hover
        scale: 1.025
        filter: brightness(1.1) saturate(1.1)
        box-shadow: 0 0 30px $primary-glow

    img, svg
        width: 50px
        height: 50px
        object-fit: cover

    h2
        vertical-align: middle
        margin-block: auto
        margin-left: 1rem
        font-size: 1.5rem

        span
            color: $primary-light

div.user-quotes
    // display: grid
    // grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))
    // grid-gap: 2rem

    div.user-quote__field
        padding: 1.5rem
        cursor: pointer
        margin-block: 2rem
        background: $primary-soft
        border: 2px solid $primary-glow
        border-radius: $edge
        position: relative
        transition: all 200ms
        box-shadow: 0 0 30px transparent
        min-height: 200px

        &:hover
            scale: 1.025
            filter: brightness(1.1) saturate(1.1)
            box-shadow: 0 0 30px $primary-glow

        &::before
            font-family: 'Times New Roman', Times, serif
            content: '\201c'
            font-size: 150px
            color: $primary-soft
            position: absolute
            bottom: -1rem
            left: 1rem
            
            // show at the bottom left
            transform: rotate(180deg)

        img
            cursor: pointer
            width: 100px
            height: 100px
            border-radius: 50%
            border: 3px solid $primary-glow
            position: absolute
            top: 1rem
            right: 1rem
            object-fit: scale-down

        span.user-quote__username
            font-size: 1rem
            font-weight: 600
            color: $primary-light

        p
            margin-block: 0
            font-size: 1.5rem
            padding-right: 7rem

@media (max-width: 800px)
    header
        font-size: 26px
        
        h1
            line-height: 3rem

        h3
            font-size: 28px