Add photo to header

public/assets/styles.css

@@ -96,15 +96,36 @@ main {
 }
 
 .header__logo {
-  width: 13rem;
+  width: 19rem;
+  height: 6rem;
   max-width: 100%;
 
+  position: relative;
+  display: flex;
   margin-right: 1rem;
 }
+.header__logo a {
+  display: contents;
+}
+.header__logo a::before {
+  /* Make the link behave like display: block */
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
 .header__logo img {
   display: block;
+
   filter: drop-shadow(0 0 3px #bbb);
 }
+.header__photo {
+  margin-right: 1.5rem;
+
+  border-radius: 7%;
+}
 
 .header__aside {
   display: flex;
@@ -185,13 +206,7 @@ footer {
 }
 
 /* Media queries */
-@media (max-width: 600px) {
+@media (max-width: 680px) {
-  body {
-    padding: 2rem 2rem 1rem;
-  }
-}
-
-@media (max-width: 500px) {
   .header {
     flex-direction: column;
   }
@@ -210,6 +225,16 @@ footer {
   }
 }
 
+@media (max-width: 600px) {
+  body {
+    padding: 2rem 2rem 1rem;
+  }
+
+  .header__logo {
+    height: min(22vw, 6rem);
+  }
+}
+
 @media (max-width: 420px) {
   .linklist {
     -ms-grid-columns: 1fr;

site/snippets/header.php

@@ -18,9 +18,13 @@
     <header class="header">
       <h1 class="header__logo">
         <?php if($page->is('home')): ?>
+        <img src="<?= url('assets/photo.jpg') ?>" class="header__photo" alt="">
         <img src="<?= url('assets/logo.svg') ?>" alt="lukas bestle">
         <?php else: ?>
-        <a href="<?= url() ?>"><img src="<?= url('assets/logo.svg') ?>" alt="lukas bestle"></a>
+        <a href="<?= url() ?>">
+          <img src="<?= url('assets/photo.jpg') ?>" class="header__photo" alt="">
+          <img src="<?= url('assets/logo.svg') ?>" alt="lukas bestle">
+        </a>
         <?php endif ?>
       </h1>