.gang-announcement {
  position: relative;
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 17px;
  margin: 18px 0;
  padding: 20px 22px;
  overflow: hidden;
  background: linear-gradient(110deg, color-mix(in srgb, var(--gang-color) 13%, #12161b), #11151a);
  border: 1px solid color-mix(in srgb, var(--gang-color) 38%, #252b33);
  border-radius: 12px;
}

.gang-announcement::after {
  content: 'ANNOUNCEMENT';
  position: absolute;
  right: 20px;
  top: -12px;
  color: color-mix(in srgb, var(--gang-color) 7%, transparent);
  font: 700 54px 'Space Grotesk';
  pointer-events: none;
}

.gang-announcement > * { position: relative; z-index: 1; }
.gang-announcement.unassigned { --gang-color: #747d89; }
.announcement-mark { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 11px; background: color-mix(in srgb, var(--gang-color) 20%, #15191f); color: var(--gang-color); font: 700 21px 'Space Grotesk'; }
.gang-announcement span { color: var(--gang-color); font-size: 8px; font-weight: 700; letter-spacing: 1.4px; }
.gang-announcement h2 { margin: 4px 0; font-size: 16px; }
.gang-announcement p { margin: 0; max-width: 700px; color: #8a939e; font-size: 10px; line-height: 1.55; }
.gang-announcement small { display: block; margin-top: 7px; color: #626c77; font-size: 8px; }

@media (max-width: 760px) {
  .gang-announcement { grid-template-columns: 40px 1fr; }
  .gang-announcement > .btn { grid-column: 1 / -1; }
}