.br_banner {
    align-items: center;
    background-image: url('/files/banner-bg-2.webp');
    background-position: 50%;
    background-size: cover;
    border-color: rgba(149, 255, 217, .15);
    display: flex;
    flex-direction: column;
    gap: 30px;
    justify-content: center;
    overflow: hidden;
    padding: 30px;
    position: relative;
    z-index: 1;
    text-align: center;
    width: 100%;
}

.br_banner::after {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgba(0, 0, 0, 0.4);
    content: '';
}

.br_banner::backdrop {
    border-width: 1px
}

@media (min-width: 1024px) {
    .br_banner {
        padding: 70px
    }
}

.br_banner {
    box-shadow: inset 10px 10px 60px 0 rgba(149, 255, 217, .11), 0 28px 38px 0 rgba(0, 0, 0, .18)
}

.br_banner h3 {
    text-shadow: 0 2px rgba(0, 0, 0, .32);
}

.br_banner a {
    --tw-border-opacity: 1;
    --tw-gradient-from: #0090FF;
    --tw-gradient-to: rgba(255, 185, 0, 0);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
    --tw-gradient-to: #75c8fd;
    background-image: linear-gradient(to top, var(--tw-gradient-stops));
    border-color: #0090FF;
    border-radius: 12px;
    border-width: 1px;
    box-shadow: 0 4px 0 #000000, 0 0 23px rgba(0, 0, 0, .55), inset 0 3px 0 #ffffff;
    text-shadow: 0 2px rgba(0, 0, 0, .32);
    display: inline-block;
    line-height: 60px;
    padding-left: 60px;
    padding-right: 60px;
    position: relative
}

@media (min-width: 768px) {
    .br_banner a {
        line-height: 76px
    }
}

.br_banner a {
    /*box-shadow: 0 4px 0 #9b4200, 0 0 23px rgba(255, 242, 166, .55), inset 0 3px 0 #fff2a6;*/
    /*text-shadow: 0 2px rgba(155, 66, 0, .32)*/
}

.br_banner a:before {
    bottom: -27px;
    content: url(/files/star-left.png);
    left: 20px;
    position: absolute
}

@media (min-width: 768px) {
    .br_banner a:before {
        bottom: -35px
    }
}

.br_banner a:after {
    content: url(/files/star-right.png);
    position: absolute;
    right: 20px;
    top: -36px
}

@media (min-width: 768px) {
    .br_banner a:after {
        top: -45px
    }
}

.br_banner a:hover {
    --tw-gradient-from: #1a64fc;
    --tw-gradient-to: rgba(255, 228, 0, 0);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
    --tw-gradient-to: #41c6ff
}

.br_banner a:hover:after, .br_banner a:hover:before {
    --tw-scale-x: 1.5;
    --tw-scale-y: 1.5;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}