/* Added fallbacks to help with CLS, feel free to remove if it doesn't help on your project */
/* Colours */
/* Fluid heading sizes - set your min/max sizes and you're done! */
/* Some device sizes to use with min-width */
/* adjusted breakpoints for above */
/* 100% widths look better than "Snapping" IMO */
/* Utility */
/* Additional Spacers -- don't think you'll need more than 7, but if you do -- maybe just use a custom class  :)  */
.banner {
  position: relative; }
  .banner:before {
    content: "";
    background: black;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.75) 30%, rgba(0, 0, 0, 0) 100%);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    z-index: 0; }
    @media (min-width: 769px) {
      .banner:before {
        background: linear-gradient(90deg, black 0%, rgba(0, 0, 0, 0) 50%); } }
  .banner .banner-content {
    z-index: 1; }