.scd-scr {
  position: relative; width: 240px; height: 150px; margin: 0 auto;
  display: flex; justify-content: center; align-items: center;
}
.scd-scr__c {
  position: relative;
  width: 84px; height: 116px; margin: 0 -8px;
  background: #e0387b;
  border: 2px solid #1a0033;
  border-radius: 6px;
  transform: rotate(var(--r));
  display: grid; place-items: center;
  box-shadow: 0 6px 14px -4px rgba(224,56,123,0.6);
  overflow: hidden;
  cursor: pointer;
}
.scd-scr__p {
  font: 900 24px/1 ui-monospace, monospace;
  color: #3eff7f;
  text-shadow: 0 0 8px rgba(62,255,127,0.4);
  letter-spacing: 0.06em;
}
.scd-scr__f {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(135deg, transparent 25%, rgba(255,255,255,0.5) 50%, transparent 75%),
    linear-gradient(135deg, #cfd8dc 0%, #90a4ae 50%, #cfd8dc 100%);
  transition: opacity .4s;
}
.scd-scr__f::after {
  content: 'SCRATCH';
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%) rotate(-12deg);
  font: 900 11px ui-monospace, monospace;
  color: rgba(26,0,51,0.5); letter-spacing: 0.16em;
}
.scd-scr__c:hover .scd-scr__f { opacity: 0; }