/*
|--------------------------------------------------------------------------
| FIGURINHAS
|--------------------------------------------------------------------------
|
| Complemento do comunidades-v1.css.
| Header, menu, identidade e footer continuam globais.
|
*/


.stickers-page .communities-hero {

    padding-bottom:
        24px;

}


.stickers-page .communities-hero h1 {

    margin-bottom:
        6px;

}


.stickers-page .communities-hero p {

    max-width:
        640px;

}


/*
|--------------------------------------------------------------------------
| CONTEÚDO MAIS PRÓXIMO DO HERO
|--------------------------------------------------------------------------
*/

.stickers-page .communities-content {

    padding-top:
        24px;

}


.stickers-pack {

    width:
        100%;

}


.stickers-pack-header {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        16px;

    margin-bottom:
        14px;

}


.stickers-pack-header h2 {

    margin:
        0;

    font-size:
        19px;

}


.stickers-pack-header span {

    flex:
        0 0 auto;

    font-size:
        12px;

    opacity:
        .65;

}


/*
|--------------------------------------------------------------------------
| GRID
|--------------------------------------------------------------------------
*/

.stickers-grid {

    display:
        grid;

    grid-template-columns:
        repeat(
            5,
            minmax(
                0,
                1fr
            )
        );

    gap:
        12px;

}


.sticker-card {

    aspect-ratio:
        1 / 1;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        8px;

    overflow:
        hidden;

    border:
        1px solid
        rgba(
            0,
            0,
            0,
            .07
        );

    border-radius:
        14px;

    background:
        #fff;

    box-shadow:
        0 6px 20px
        rgba(
            7,
            36,
            61,
            .045
        );

}


.sticker-card img {

    display:
        block;

    width:
        100%;

    height:
        100%;

    max-width:
        190px;

    max-height:
        190px;

    object-fit:
        contain;

    user-select:
        none;

    pointer-events:
        none;

    -webkit-user-drag:
        none;

}


/*
|--------------------------------------------------------------------------
| WHATSAPP
|--------------------------------------------------------------------------
*/

.stickers-whatsapp {

    margin-top:
        22px;

    padding:
        20px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    border:
        1px solid
        rgba(
            0,
            0,
            0,
            .08
        );

    border-radius:
        14px;

    background:
        #fff;

}


.stickers-whatsapp-copy strong {

    display:
        block;

    margin-bottom:
        5px;

    font-size:
        17px;

}


.stickers-whatsapp-copy p {

    margin:
        0;

    font-size:
        13px;

    line-height:
        1.5;

    opacity:
        .7;

}


.stickers-whatsapp-button {

    flex:
        0 0 auto;

    min-height:
        48px;

    padding:
        0 20px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        7px;

    border-radius:
        10px;

    background:
        #1fa855;

    color:
        #fff !important;

    text-decoration:
        none !important;

    font-weight:
        800;

    transition:
        .18s ease;

}


.stickers-whatsapp-button:hover {

    background:
        #168d46;

    transform:
        translateY(
            -1px
        );

}


/*
|--------------------------------------------------------------------------
| AVISO
|--------------------------------------------------------------------------
*/

.stickers-notice {

    margin-top:
        14px;

}


.stickers-empty {

    padding:
        35px 20px;

    text-align:
        center;

}


/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/

@media (
    max-width:
    760px
) {

    .stickers-page .communities-hero {

        padding-top:
            22px;

        padding-bottom:
            16px;

    }


    .stickers-page .communities-content {

        padding-top:
            14px;

    }


    .stickers-page .communities-hero h1 {

        font-size:
            29px;

        line-height:
            1.08;

    }


    .stickers-page .communities-hero p {

        font-size:
            14px;

        line-height:
            1.45;

    }


    /*
    | Três já aparecem logo na primeira impressão.
    */

    .stickers-grid {

        grid-template-columns:
            repeat(
                3,
                minmax(
                    0,
                    1fr
                )
            );

        gap:
            7px;

    }


    .sticker-card {

        padding:
            3px;

        border-radius:
            11px;

    }


    .stickers-whatsapp {

        display:
            block;

        margin-top:
            15px;

        padding:
            15px;

    }


    .stickers-whatsapp-copy {

        margin-bottom:
            12px;

    }


    .stickers-whatsapp-button {

        width:
            100%;

    }

}


@media (
    max-width:
    350px
) {

    .stickers-grid {

        grid-template-columns:
            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            );

    }

}