@use "helpers";

#page-about{
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    padding-bottom: 120px;

    @media(max-width:991px){
        padding-bottom: 50px;
    }

    .page-body{
        display: flex;
        width: 100%;
        max-width: 960px;
        margin: 0 auto;
        gap: 40px;

        @media(max-width:991px){
            gap: 30px;
            display: block;
        }

        .column-content{
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            width: 100%;
            gap: 24px;

            @media(max-width:991px){
                gap: 30px;
            }

            .text{
                display: flex;
                flex-direction: column;

                p{
                    display: block;
                    margin: 0px;
                    color: helpers.$textoDark;
                    font: normal 15px helpers.$fontMedium;
                    line-height: 25px;
                    letter-spacing: 0.05em;
                }

                .title {
                    font-family: helpers.$fontBold;
                    color: helpers.$highlight;
                }
            }

            .bn-content{
                display: flex;
                outline: 0px;
                width: 100%;

                @media(max-width:991px){
                    justify-content: center;
                }

                img {
                    aspect-ratio: 144 / 149;
                    object-fit: cover;
                    max-width: 100%;

                    @media(max-width:991px){
                        margin-bottom: 30px;
                    }
                }
            }
        }

        .banners-pequeno {
            display: flex;
            gap: 20px;

            @media(max-width:991px){
                display: none;
            }
        }

    }
}