<div class="container">
</div>

.container {
  display: block;
  width: 100vw;
  height: 100vh;

  &::before,
  &::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
  }

  // Set the purple to blue gradient for use as the main border below featured story.
  &::before {
    background-image: linear-gradient( to right, #6a26b5, #007bc2 );
    height: 100px;
    top: 0;
  }

  // Apply a white overlay to create the faded out affect over the top.
  &::after {
    background-image: linear-gradient( to top, #ffffff, rgba( 255, 255, 255, 0.7 ) );
    height: 90px;
    top: 10px;
  }
}

/* A pen to create both a border with a gradient effect applied and a background that matches but fades to white. */