diff --git a/assets/style.css b/assets/style.css
index 5ec6fbf..a2c0b2c 100644
--- a/assets/style.css
+++ b/assets/style.css
@@ -20,7 +20,8 @@ h5, .text-12 { font-size: 12pt; line-height: 15pt; font-weight: normal }
 .flex { display: flex !important }
 
 .grid { display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: auto; gap: 22pt }
-.grid > .column { grid-column: span var(--span); display: grid }
+.grid > .column { grid-column: span var(--span) }
+.grid > .column:has(> .align-self-center) { display: grid }
 .grid img { width: 100%; max-width: 100% }
 
 .border-top { border-top: 1px solid var(--black) }
@@ -73,6 +74,14 @@ code { font-family: Kobata !important; font-weight: normal }
 .embed video { width: 100%; }
 .embeded-iframe { border: none; width: 100% }
 
+.siema { position: relative; transition: height .2s }
+.siema button { position: absolute; top: 50%; background: #fff; color: var(--blue); border: none; font-size: 1rem; margin: 0; opacity: 0; transition: opacity .5s }
+.siema button:hover { cursor: pointer; }
+.siema:hover button { opacity: 1 }
+.siema button.prev { left: 0; }
+.siema button.next { right: 0; }
+.siema img { width: 100%; object-fit: contain }
+
 .calendar-entry { display: grid; grid-template-columns: 199pt 508pt }
 
 .menu-button { display: none; width: 47px; height: 48px; flex-direction: column; justify-content: center; box-sizing: content-box }
@@ -80,7 +89,7 @@ code { font-family: Kobata !important; font-weight: normal }
 .menu-button:hover { color: var(--lila) }
 .menu-button:hover div { background: var(--lila) }
 
-#menu-container { width: 498px; position: absolute; left: 0; top: 0; bottom: 0; pointer-events: none; }
+#menu-container { max-width: 498px; position: absolute; left: 0; top: 0; bottom: 0; pointer-events: none; }
 #menu-container button, #menu-container a { pointer-events: initial }
 nav { display: none }
 nav { height: 100%; padding-top: 89pt !important; justify-content: space-between; flex-direction: column; box-sizing: border-box; }
@@ -90,6 +99,26 @@ nav > div { margin-left: -2px }
 
 footer { background: var(--white) }
 
+.headline { padding-left: 179pt }
+.content-footer { display:flex; justify-content: space-between }
+.content-footer-socials { display: flex; justify-content: space-between; align-items: center; width: 439px; }
+
+@media (max-width: 750px) {
+  footer { font-size: 22pt !important; letter-spacing: 0 !important; padding: 11pt !important }
+  .headline { padding-left: 79pt }
+  .headline h4 { max-width: calc(100dvw - 22pt - 37pt - 37pt - 37pt - 22pt) }
+  .content-footer { flex-direction: column; }
+  .content-footer-socials { width: 100% }
+  .calendar-entry { grid-template-columns: 1fr }
+
+  .project-list { text-align: center; }
+  .project-list a, .project-list span { display: block }
+
+  .grid { display: block; }
+  .siema button { font-size: 12px; opacity: 1 }
+  video { width: 100%; }
+}
+
 .embed-btn { display:block; position:absolute !important; top:0; right:0; bottom:0; left:0; z-index:1; background-position:50%; background-size: 15.5% auto; background-repeat:no-repeat; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 8'%3E%3Crect fill='rgba(0,0,0,.65)' width='13' height='8' rx='1' ry='1'/%3E%3Cpolygon fill='%23fff' points='5 6 9 4 5 2'/%3E%3C/svg%3E") }
 .embed-btn:hover { cursor: pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 8'%3E%3Crect fill='%231AB7EA' width='13' height='8' rx='1' ry='1'/%3E%3Cpolygon fill='%23fff' points='5 6 9 4 5 2'/%3E%3C/svg%3E") }
 .embed-btn.yt { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 68 48'%3E%3Cpath fill='%23212121' fill-opacity='.8' d='M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z'/%3E%3Cpath fill='%23fff' d='m45 24-18-10v20'/%3E%3C/svg%3E") }
diff --git a/site/snippets/footer.php b/site/snippets/footer.php
index 36d957f..317afcd 100644
--- a/site/snippets/footer.php
+++ b/site/snippets/footer.php
@@ -1,8 +1,8 @@
 <?php $dontShowFooter = isset($dont_show_footer) && $dont_show_footer === true ?>
 
 <?php if (!$dontShowFooter): ?>
-<div class="container <?= remember("") ?>" style="display:flex; justify-content: space-between">
-	<div style="display: flex; justify-content: space-between; align-items: center; width: 439px;">
+<div class="container content-footer <?= remember("") ?>">
+	<div class="content-footer-socials">
 		<a href="https://www.instagram.com/thealit_fkl/" class="block link">Instagram</a>
 		<a href="https://www.thealit.de" class="block link">Thealit</a>
 		<a href="https://www.thealit.de/newsletter" class="block link">Newsletter</a>
diff --git a/site/snippets/header.php b/site/snippets/header.php
index fa93e7e..2bab7f3 100644
--- a/site/snippets/header.php
+++ b/site/snippets/header.php
@@ -16,7 +16,7 @@
 
 <div id="menu-container">
 	<div style="display: flex; height: 36pt; position: absolute; top: 22pt; left: 22pt">
-		<div style="width: 376pt; margin-left: 1px;">
+		<div style="margin-left: 1px;">
 			<button id="menu_open" aria-label="Menu Open" class="menu-button no-button flex" style="gap: 10px"><div></div><div></div><div></div></button>
 			<button id="menu_close" aria-label="Menu Close" class="menu-button no-button" style="margin-top: 4px"><div style="transform: rotate(45deg);"></div><div style="transform: translate(0,-6px) rotate(135deg);"></div></button>
 		</div>
diff --git a/site/templates/calendar.php b/site/templates/calendar.php
index 68ab613..0d65482 100644
--- a/site/templates/calendar.php
+++ b/site/templates/calendar.php
@@ -1,6 +1,6 @@
 <?php snippet('header') ?>
 
-<div class="bg-white-green container" style="padding-left: 179pt; padding-bottom: 79pt">
+<div class="bg-white-green container headline" style="padding-bottom: 79pt">
     <h4 class="uppercase font-kobata leading-none"><?= $page->title() ?></h4>
 </div>
 
diff --git a/site/templates/default.php b/site/templates/default.php
index 28491c3..7e8e779 100644
--- a/site/templates/default.php
+++ b/site/templates/default.php
@@ -1,6 +1,6 @@
 <?php snippet('header') ?>
 
-<div class="<?= randomBg() ?> container" style="padding-left: 179pt; padding-bottom: 79pt">
+<div class="<?= randomBg() ?> container headline" style="padding-bottom: 79pt">
     <h4 class="uppercase font-kobata leading-none"><?= $page->title() ?></h4>
 </div>
 
diff --git a/site/templates/projects.php b/site/templates/projects.php
index 0ed32f2..f6c6829 100644
--- a/site/templates/projects.php
+++ b/site/templates/projects.php
@@ -3,11 +3,11 @@
 /** @var Kirby\Cms\Site $site */
 /** @var Kirby\Cms\Page $page */ ?>
 
-<div class="bg-orange-white container" style="padding-left: 179pt">
+<div class="bg-orange-white container headline">
     <h4 class="uppercase font-kobata leading-none"><?= $page->title() ?></h4>
 </div>
 
-<div class="bg-orange-white container">
+<div class="bg-orange-white container project-list">
     <?php foreach ($page->children()->listed() as $project): ?>
         <a href="<?= $project->url() ?>" class="link" style="line-height: 57pt">
             <span class="font-kobata"><?= $project->start_date()->toDate('d.m.') ?>-<?= $project->end_date()->toDate('d.m.') ?></span>
@@ -16,7 +16,7 @@
     <?php endforeach ?>
 </div>
 
-<div class="container bg-white-lila" style="padding-left: 179pt">
+<div class="container bg-white-lila headline">
     <h4 class="uppercase font-kobata leading-none">ART RESIDENCIES + INTERMISSIONS</h4>
 </div>