.sb {
    background-image: url('/files/banner-bg.webp');
    transform: translateY(120%);
    transition: all .3s ease-in-out
}

.sb.active {
    transform: translateY(0)
}

.sb h4 {
    text-shadow: 0 2px rgba(0, 0, 0, .32)
}

.sb img {
    width: 150px;
}

.sb:before {
    background-color: rgba(0, 0, 0, .8);
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%
}

.sb 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;
    display: inline-block;
    line-height: 50px;
    margin-left: auto;
    padding-left: 40px;
    padding-right: 40px;
    position: relative;
    text-shadow: 0 2px rgba(0, 0, 0, .32);
    white-space: nowrap
}

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

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

.sb 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
}

.sb a:hover:after, .sb 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))
}