<div></div>

$gs: 2em;
$ms: 2*$gs;
$c: fuchsia;

html, body, div { display: grid }

html { min-height: 100% }

body { background: #262626 }

div {
  place-self: center;
  overflow: hidden;
  border-radius: 7px;
  box-shadow: 2px 2px 5px #141414;
  
  &::before, &::after {
    --pattern: 
      linear-gradient(90deg, #000, #{$c}, #000);
    grid-area: 1/ 1;
    padding: Round(down, Min(23em, 45vmin), #{$gs});
    background: 
      /* map */
      linear-gradient(rgba($c, .47), #000), 
      linear-gradient($c, rgba(#000, .47)), 
      /* pattern */
      var(--pattern) 0 0/ #{$gs $gs};
    background-blend-mode: screen, multiply;
    filter: contrast(35) contrast(.65);
    content: ''
  }
  
  &::after {
    --pattern: 
      radial-gradient(#{$c}, #000 71%);
    mask: 
      repeating-conic-gradient(
          red 0% 25%, transparent 0% 50%) 
        0 0/ #{$ms $ms}
  }
}