/* Explain: Layout accents for the hero section. */
.hero-band {
    position: relative;
    overflow: hidden;
}

.hero-band::before {
    position: absolute;
    top: -4rem;
    right: -6rem;
    width: 24rem;
    height: 24rem;
    content: '';
    background: rgba(255, 183, 3, 0.18);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M249.6 471.5c10.8 3.8 22.4-4.1 22.4-15.5V78.6c0-4.2-1.6-8.4-5-11C247.4 52 202.4 32 136 32 78.1 32 22.1 49.2 3.1 59.5C1.2 60.5 0 62.4 0 64.5V435c0 8.7 8.4 14.7 16.7 11.5C36.8 438.4 82.5 416 136 416c63.4 0 102.6 30 113.6 55.5zM304 471.5c11 25.5 50.2 55.5 113.6 55.5 53.5 0 99.2 22.4 119.3 30.5 8.3 3.2 16.7-2.8 16.7-11.5V64.5c0-2.1-1.2-4-3.1-5C531.9 49.2 475.9 32 418 32c-66.4 0-111.4 20-131 35.6-3.4 2.7-5 6.8-5 11V456c0 11.4 11.6 19.3 22.4 15.5z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M249.6 471.5c10.8 3.8 22.4-4.1 22.4-15.5V78.6c0-4.2-1.6-8.4-5-11C247.4 52 202.4 32 136 32 78.1 32 22.1 49.2 3.1 59.5C1.2 60.5 0 62.4 0 64.5V435c0 8.7 8.4 14.7 16.7 11.5C36.8 438.4 82.5 416 136 416c63.4 0 102.6 30 113.6 55.5zM304 471.5c11 25.5 50.2 55.5 113.6 55.5 53.5 0 99.2 22.4 119.3 30.5 8.3 3.2 16.7-2.8 16.7-11.5V64.5c0-2.1-1.2-4-3.1-5C531.9 49.2 475.9 32 418 32c-66.4 0-111.4 20-131 35.6-3.4 2.7-5 6.8-5 11V456c0 11.4 11.6 19.3 22.4 15.5z'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    transform: rotate(-15deg);
}

.hero-band::after {
    position: absolute;
    bottom: -6rem;
    left: -6rem;
    width: 22rem;
    height: 22rem;
    content: '';
    background: rgba(27, 42, 74, 0.06);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M249.6 471.5c10.8 3.8 22.4-4.1 22.4-15.5V78.6c0-4.2-1.6-8.4-5-11C247.4 52 202.4 32 136 32 78.1 32 22.1 49.2 3.1 59.5C1.2 60.5 0 62.4 0 64.5V435c0 8.7 8.4 14.7 16.7 11.5C36.8 438.4 82.5 416 136 416c63.4 0 102.6 30 113.6 55.5zM304 471.5c11 25.5 50.2 55.5 113.6 55.5 53.5 0 99.2 22.4 119.3 30.5 8.3 3.2 16.7-2.8 16.7-11.5V64.5c0-2.1-1.2-4-3.1-5C531.9 49.2 475.9 32 418 32c-66.4 0-111.4 20-131 35.6-3.4 2.7-5 6.8-5 11V456c0 11.4 11.6 19.3 22.4 15.5z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M249.6 471.5c10.8 3.8 22.4-4.1 22.4-15.5V78.6c0-4.2-1.6-8.4-5-11C247.4 52 202.4 32 136 32 78.1 32 22.1 49.2 3.1 59.5C1.2 60.5 0 62.4 0 64.5V435c0 8.7 8.4 14.7 16.7 11.5C36.8 438.4 82.5 416 136 416c63.4 0 102.6 30 113.6 55.5zM304 471.5c11 25.5 50.2 55.5 113.6 55.5 53.5 0 99.2 22.4 119.3 30.5 8.3 3.2 16.7-2.8 16.7-11.5V64.5c0-2.1-1.2-4-3.1-5C531.9 49.2 475.9 32 418 32c-66.4 0-111.4 20-131 35.6-3.4 2.7-5 6.8-5 11V456c0 11.4 11.6 19.3 22.4 15.5z'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    transform: rotate(20deg);
}

.hero-band > div {
    position: relative;
    z-index: 1;
}