@import ../../../styles/helpers

.section
    text-align: left
    padding: 184px 0 184px 0

.container
    position: relative
    &:first-child
        +t
            text-align: center
    &:not(:first-child)
        margin-top: 180px;
        &:last-child
            text-align: left
            & .title
                font-size: 48px
                margin-left: 0
                margin-right: 0
            & .text
                max-width: 100%
                margin: 0
                color: $neutrals5

.stage
    margin-bottom: 16px

.title
    max-width: 100%
    width: fit-content
    margin: 0 0 32px
    +t
        margin: 0 auto 32px
        max-width: 550px
    &:not(:first-child)
        margin-top: 96px

h1.title
    margin-bottom: 56px

.text
    max-width: 440px
    margin: 0 0 48px
    color: $neutrals4
    & h2
        margin-top: 24px
        color: $neutrals6
        overflow-wrap: anywhere
    & .btns
        margin-top: 12px
        & a
            width: 160px
            height: 40px
    +t
        margin: 0 auto 48px
    
p img
    display: block
    margin: 12px 0
    border-radius: 12px

.search
    max-width: 312px
    margin: 0 auto

.btns
    display: flex
    justify-content: flex-start
    +t
        justify-content: center
    +m
        display: block

.button
    min-width: fit-content
    width: 160px
    +m
        width: 50%
    +a
        width: 70%
    &:not(:last-child)
        margin-right: 16px
        +m
            margin: 0 0 16px


.embed
    position: absolute
    right: 0
    top: 50%
    transform: translate(-5%,-50%)
    width: 50%
    height: fit-content
    text-align: right
    +t
        position: relative
        left: 0
        top: 0
        transform: none
        width: 100%
        margin-bottom: 120px
        text-align: center

    
.iframe
    position: relative
    // left: 50%
    // top: 50%
    // transform: translateX(-50%)