portico: Add background image to /security hero.

Also restructures the HTML to be more similar to other pages that have a
background image for their hero.

static/styles/landing-page.scss

@@ -2262,6 +2262,10 @@ nav ul li.active::after {
     background-image: url(/static/images/landing-page/mit-lobby-7.jpg);
 }
 
+.portico-landing.why-page .bg-pycon.security {
+    background-image: url(/static/images/landing-page/security.jpg);
+}
+
 .portico-landing.why-page .bg-pycon .bg-dimmer {
     position: absolute;
     width: 100%;

templates/zerver/security.html

@@ -7,6 +7,7 @@
 {% block customhead %}
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 {{ render_bundle('landing-page') }}
+
 {% endblock %}
 
 {% block portico_content %}
@@ -14,9 +15,14 @@
 {% include 'zerver/landing_nav.html' %}
 
 <div class="portico-landing why-page">
-    <div class="hero small-hero">
-        <h1 class="center">Zulip Security</h1>
+    <div class="hero bg-pycon security">
+        <div class="bg-dimmer"></div>
+        <div class="content">
+            <h1 class="center">Zulip Security</h1>
+            <p></p>
+        </div>
     </div>
+
     <div class="main">
         <div class="padded-content">
             <div class="inner-content">