/* Estilo automático para o tipo de post: post */
section.hero-interna {
    overflow: hidden;
    padding: 0px;
    position: relative;
    min-height: 53svh;

    img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        position: absolute;
        right: 0;
        filter: brightness(0.4);
        z-index: 0;
    }

    .hero-content {
        position: absolute;
        top: 30%;
        width: 100%;
        z-index: 2;
        /* pointer-events: none; */

        h1 {
            font-size: 64px;
            font-weight: 900;
            line-height: 100%;
            color: #FFFFFF;
            margin-bottom: 48px;
        }

        p {
            font-weight: 500;
            font-style: Medium;
            font-size: 18px;
            color: #FFFFFF;
        }

        nav[aria-label="breadcrumb"] {
            display: flex;
            align-items: center;
            gap: 8px;
            color: #FFFFFF;
            z-index: 99;

            a {
                font-style: normal;
                text-decoration: none;
                font-weight: 400;
                color: #FFFFFF;
            }

            p {
                font-weight: 500;
                font-size: 15px;
                line-height: 100%;
                text-decoration: underline;
                color: #FFFFFF;
                margin: 0;
            }
        }

        a.cta {
            background-color: #D5B991;
            font-size: 20px;
        }
    }
}

.tabs {
    padding: 14px;
    background-color: #EFEFEF;
    border-radius: 8px;
    flex-wrap: nowrap;
    overflow-x: auto;
    align-items: center;
    white-space: nowrap;
    text-wrap-mode: nowrap;


    span {
        width: fit-content;
        display: inline-block;
        border-radius: 5px;
        font-family: 'Linear Grotesk';
        font-size: 18px;
        border: none;
        transition: 300ms all ease-in-out;
        padding: 18px 24px;
        background-color: #00687E;
        color: #fff;
    }

    .date {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 8px;
    }

    p {
        margin: 0;
    }
}

.share {
    background-color: #EFEFEF;
    border-radius: 8px;
    padding: 24px;

    .date {
        display: flex;
        justify-content: start;
        align-items: center;
        gap: 8px;

        h4 {
            margin: 0;
        }
    }

    .menu-redes {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .rede-card {
        display: flex;
        width: 45px;
        height: 45px;
        background-color: #00687C;
        border-radius: 5px;
        justify-content: center;
        align-items: center;
    }
}

aside {
    display: flex;
    flex-direction: column;
    gap: 18px;

    .bluebox {
        background-color: #00687C;
        color: #fff;
        padding: 24px;
        border-radius: 8px;
        

        .date {
            display: flex;
            justify-content: start;
            align-items: center;
            gap: 8px;

            h4 {
                margin: 0;
            }
        }

        a.cta {
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #323A3C;
            background-color: #FFF;
        }
    }
}

@media (width <= 992px) {
    aside {
        .bluebox {
            padding: 36px 24px;
        }
    }
}