*, :before, :after {
  margin: 0;
  margin-top: 30px;
  box-sizing: border-box;
}

html {
  background: #ececea;
  font-size: 125%;
  counter: art;
}
@media (max-width: 200px) {
  html {
    font-size: 62.5%;
  }
}

article {
  --wide: 0;
  --base: calc(var(--wide)*5rem);
  --size: 1.25rem;
  --left: calc(.5*(1 + var(--wide))*5rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  margin: 2em auto;
  padding-left: calc(var(--wide)*7.5rem);
  width: 32em;
  max-width: 90%;
  min-height: 6.25rem;
  font: 1em/ 1.25 roboto, trebuchet ms, verdana, arial, sans-serif;
  counter-increment: art;
  filter: drop-shadow(-1px 3px 3px rgba(0, 0, 0, 0.15));
}
@media (min-width: 640px) {
  article {
    --wide: 1 ;
  }
}
article:before, article:after {
  position: absolute;
}
article:before {
  left: .25em;
  color: #fff;
  font-size: var(--base);
  content: "0" counter(art);
}
article:after {
  --grad: linear-gradient(#fff, #e0e0e0);
  top: 0;
  right: 0;
  bottom: -1.25em;
  left: 0;
  z-index: -1;
  padding-left: inherit;
  border-bottom: solid 0.9375em transparent;
  transform: skewx(calc(var(--wide)*-22.5deg));
  background: var(--grad) 100% 50%/calc(100% - (var(--base) + var(--left) + var(--wide)*var(--size)) + 1px) 100% no-repeat padding-box, var(--grad) calc(var(--base) + (1 + 2*var(--wide))*var(--size)) 50%/var(--size) 100% no-repeat padding-box, radial-gradient(ellipse at 100% 50%, rgba(0, 0, 0, 0.13), transparent 35%) 0 50%/var(--size) 250% content-box, linear-gradient(var(--c0) 50%, var(--c1) 0) padding-box, radial-gradient(rgba(0, 0, 0, 0.1), transparent 70%) 100% 100%/calc(100% - (var(--base) + 2*var(--size))) 1.25em border-box no-repeat;
  content: "";
}

h3, p {
  padding-left: var(--left);
}

h3 {
  background: linear-gradient(var(--c0), var(--c1));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-transform: capitalize;
  filter: brightness(0.85);
}