@use "helpers";

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

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

    .page-body{
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        justify-content: center;
        width: 100%;
        max-width: 1520px;
        margin: 0 auto;
        gap: 20px;

        .item{
            outline: 0px;
            display: flex;
            flex-direction: column;
            width: calc(25% - 20px);
            max-width: 365px;

            @media(max-width:1199px){
                width: calc(33.3% - 20px);
            }

            @media(max-width:991px){
                width: calc(50% - 20px);
            }

            @media(max-width:575px){
                width: 100%;
            }

            img{
                display: block;
                width: 100%;
            }

            .informations{
                display: flex;
                flex-direction: column;
                width: 100%;
                padding: 20px;
                gap: 20px;
                background-color: #F5F5F5;

                @media(max-width:575px){
                    padding: 15px;
                }

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

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