.notice {
    margin: 48px 0;

    &__inner {
        border: 1px solid currentColor;
        padding: 16px;
    }

    &__content {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    &__title {
        all: initial;
        font: 600 20px/1 $font-family-sans-serif;
        color: inherit;
        display: flex;
        align-items: center;
        gap: 16px;

        &:before {
            content: '';
            display: block;
            aspect-ratio: 43 / 40;
            height: 70px;
            background: currentColor;
            mask: var(--icon-alert) no-repeat center top / contain;
        }
    }

    &__text {
        all: initial;
        font: 400 12px/1.333 $font-family-sans-serif;
        color: inherit;
        margin: 0;
    }

    @media screen and (min-width: 992px) {
        &__inner {
            display: flex;
            align-items: center;
            gap: 16px;

            &:before {
                content: '';
                display: block;
                aspect-ratio: 43 / 40;
                height: 52px;
                background: currentColor;
                mask: var(--icon-alert) no-repeat center top / contain;
            }
        }

        &__title {
            font-size: 18px;

            &::before {
                content: unset;
            }
        }

        &__text {
            font-size: 14px;
        }
    }
}
