html{
    --header-height:83px
}

html, body{
    height: 100%;
}

header{
    padding:0 32px;
}

    header h1{
        margin:0;
        padding:0
    }

        header img{
            width:292px
        }

main{
    align-items:center;
    height: calc(100% - var(--header-height));
    display:flex;
    gap:32px;
    justify-content:center;
}

    main > aside{
        max-width:640px;
        text-align: center;
        width: 100%;
    }

    main > .content{
        max-width:640px;
        width: 100%;
    }

        main > .content .chat-wrap{
            bottom:24px;
            height:36px;
            position: absolute;
            right:24px;
            text-align: right;
            width: 100%;
        }

            main > .content .chat-wrap .btn-chat{
                background:url(../img/icons/headphones.svg) no-repeat center left 13px #FFCD00;
                border:none;
                border-radius:32px;
                color:#002E6D;
                cursor:pointer;
                font:14px/20px Cartero, sans-serif;
                padding:8px 12px 8px 36px;
            }

        #ada-button-frame {
            display: none;
        }

        main > .content .text .btn-back{
            margin-bottom: 32px;
        }

        main > .content .text{
            max-width: 416px;
            padding-right: 16px;
            width: 100%;
        }

            main > .content h1{
                margin-bottom:16px;
            }

            main > .content .text > p{
                margin:0 0 32px;
            }

            main > .content .text > ul{
                list-style:none;
                margin:0 0 32px 0;
                padding:0;
            }

                main > .content .text > ul > li:not(:last-child){
                    margin-bottom:32px
                }

                main > .content .text > ul > li > button{
                    max-width: 416px;
                    width:100%
                }

                main > .content .text .detail-m{
                    text-align:center
                }

#popup-bono-cultural-2023{
    max-width:480px;
}

@media only screen and (max-width: 768px) {

    html{
        --header-height:64px;
        height:100%;
    }

    header{
        padding:0 16px
    }

    header img{
        width:225px
    }

    main {
        align-items:start;
        height: 100%;
        justify-content:center;
        margin-top:0;
    }

        main > aside{
            display:none
        }

        main > .content{
            padding:0 16px;
        }

            main > .content .chat-wrap{
                margin:32px 0;
                position: static;
            }

            main > .content .text{
                height:calc(100% - var(--header-height));
                margin-top:0;
                max-width:100%;
                padding:0 16px;
            }

            main > .content .text{
                height: 100%;
                max-width:none;
                padding:0 0 0 0;
            }

            main > .content .text > ul > li > button{
                max-width: 100%;
            }

    #popup-bono-cultural-2023{
        max-width:100%;
    }

}