.hero 
    display: flex
    justify-content: space-between
    align-items: center
    gap: 32px
    flex-wrap: wrap

    .dots
        position: absolute
        top: 40%
        width: 12vmin
        left: 70%
        z-index: 4

    &__logo
        position: absolute
        width: 30vmin
        top: 10%
        z-index: 1
        aspect-ratio: 1
    
    &__image
        position: relative
        z-index: 2
        border-bottom: 1px solid var(--primary)

    &__content, &__illustrations
        flex: 1 1 0

    &__illustrations
        position: relative
        display: flex
        flex-direction: column

    &__title 
        min-width: 300px

        font:
            size: 32px
            weight: 600
        
        span 
            color: var(--primary)
    
    &__description
        color: var(--gray)
        margin-top: 32px
        margin-bottom: 32px
    
    &__status
        padding: 8px
        border: 1px solid var(--gray)
        color: var(--gray)
        margin: 0 auto
        display: inline-flex
        justify-content: center
        align-items: center
        position: relative
        top: -1px
        z-index: 5
        gap: 8px
        font-weight: 500

        &::before
            content: ""
            display: inline-block
            aspect-ratio: 1
            width: 16px
            background-color: var(--primary-op)
            border: 1px solid var(--primary)

        a
            color: var(--white)
            text-decoration: underline

            &:hover
                color: var(--primary)
        
