<style>
  body {
    background: white;
    margin: 0;
    padding: 0;
  }

  .preview-div-wrapper {
    overflow: hidden;
    position: relative;
  }

  .preview-div {
    border: 0.25vw solid <%= @cat_color %>;
    box-shadow: 0.75vw .75vw 0px <%= @cat_color %>;
    width: 94vw;
    height: 46vw;
    margin: 1.2vw auto 1vw;
    overflow: hidden;
    position: relative;
    background-image: linear-gradient(to bottom, transparent 40%, <%= @cat_color %>);
    border-radius: 0.4vw;
  }

  .preview-info-header {
    color: black;
    margin: 2vw auto 0vw;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, "Roboto", monospace;
    font-size: 3.5vw;
    width: 92%;
  }

  .preview-title{
    padding: 0 2vw;
  }

  h1 {
    color: <%= HexComparer.new([@cat_color]).brightness(0.70) %>;
    width: 92%;
    margin: 0;
    padding: 1vw;
    font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", "Roboto", sans-serif;
  }

  .preview-body {
    font-size: 3.1vw;
    padding: 0 4vw;
    font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", "Roboto", sans-serif;
    color: <%= HexComparer.new([@cat_color]).brightness(0.77) %>;
  }

  .preview-category {
    font-size: 3.5vw;
    position: absolute;
    background: white;
    left: -2vw;
    bottom: 0vw;
    padding: 1vw 4vw;
    font-weight: 500;
    width: 100%;
    color: <%= @cat_color %>;
  }

  .preview-dev-logo {
    position: absolute;
    bottom: -2.25vw;
    right: -3vw;
    text-align: right;
  }
</style>
<div class="preview-div-wrapper">
  <div class="preview-div">
    <div class="preview-title">
      <% font_size = @listing.title.length > 65 ? 4 : 5 %>
      <h1 style="font-size:<%= font_size %>vw;"><%= @listing.title %> </h1>
    </div>
    <div class="preview-body">
      <%= sanitize_rendered_markdown(@listing.processed_html) %>
    </div>
    <div class="preview-category">
      <%= @category %>
    </div>
    <div class="preview-dev-logo">
      <%= inline_svg_tag("devlistings-horizontal.svg", class: "logo", size: "30vw*10vw", aria: false, title: "DEV logo") %>
    </div>
  </div>
</div>
