.shoal-promo{display:flex;align-items:center;gap:20px;box-sizing:border-box;padding:24px;max-width:1120px;width:calc(100% - 32px);margin:16px auto;border:1px solid #a9c8c3;border-radius:20px;background:#e8f2eb;color:#21444c;text-decoration:none}
.hub-extras-grid .shoal-promo{width:100%;margin:0}
.shoal-promo-art{position:relative;display:block;flex:0 0 145px;height:140px}
.shoal-mini-board{display:grid;grid-template-columns:repeat(3,30px);gap:1px;width:max-content;padding:2px;border-radius:6px;background:#315f65;transform:rotate(-6deg)}
.shoal-mini-board i{display:grid;place-items:center;width:30px;height:30px;background:#f9fcf8;font:700 16px system-ui;font-style:normal;color:#21444c}
.shoal-mini-board i:nth-child(5){background:#acd8cd}
.shoal-promo canvas{position:absolute;width:100px;height:auto;bottom:0;right:-4px}
.shoal-promo-copy{display:grid;gap:8px;min-width:0}
.shoal-promo-copy small{font-size:11px;letter-spacing:.1em}
.shoal-promo-copy strong{font-size:30px;line-height:1.15;color:#21444c}
.shoal-promo-copy>span{font-size:14px;line-height:1.6}
.shoal-promo-copy b{font-size:14px;color:#126a70}
.shoal-promo:hover{background:#d9eae1;border-color:#568d8b;color:#21444c}
.shoal-promo:focus-visible{outline:3px solid #b77d27;outline-offset:4px}
@media(max-width:600px){.shoal-promo{padding:18px;gap:14px}.shoal-promo-art{flex-basis:90px;height:120px}.shoal-mini-board{grid-template-columns:repeat(3,25px)}.shoal-mini-board i{width:25px;height:25px}.shoal-promo canvas{width:80px;right:0}.shoal-promo-copy strong{font-size:26px}}