@use "../../../../styles/abstracts/variables";
@use "../../../../styles/abstracts/mixins";   

.announce {
    margin-top: 1.5rem;

    &__top{
        display: flex;
        align-items: center;
        color: variables.$col-white;
        gap: 10px;
        h2{
            font-weight: 500;
            font-size: .9rem;
            opacity: .8;
        }
    }

    &__bottom {
        background: #101012;
        color: variables.$col-white;
        border: 1px solid variables.$col-border-dark-new;
        border-radius: 10px;
        margin-top: .5rem;
        display: grid;
        grid-template-columns: 80px 1fr;
        grid-gap: 10px;

        &--left {
            background: variables.$col-orange;
            border-top-left-radius: 6px;
            border-bottom-left-radius: 6px;
            display: flex;
            align-items: center;
            padding: 0 .5rem;
            color: variables.$col-dark;
           h3{
            font-weight: 700;
            font-size: .75rem;
            color: #000 !important;
           }
        }

        &--right {
            padding: .5rem;
            h4{
                font-weight: 500;
                font-size: .95rem;
                font-family: variables.$font-header;
            }
            p{
                font-size: .72rem;
                padding-top: .2rem;
                font-weight: 400 !important;
                padding-bottom: .3rem;
                line-height: 1.7;
            }
        }
    }
}