set up cultural page

site/config.stx

@@ -1,2 +1,5 @@
 [?]
-[=baseurl https://swaous.asuscomm.com/dev/avrahamsociety]
+[=baseurl http://localhost:8080]
+[i config devWorld]
+[=baseurl https://swaous.asuscomm.com/dev/avrahamsociety]
+[/]

site/culturalstuff/culture2.html

@@ -0,0 +1,5 @@
+[?]
+[=img https://media.istockphoto.com/id/1337471900/vector/star-of-david-graphic-abstract-background-with-three-doves.webp?s=2048x2048&w=is&k=20&c=M47-JucDhH5TQs500koB-siTbCxce2DLUfQjC5Y9gKA=]
+[=text-]
+    Text related to the cultural image.
+[/]

site/culturalstuff/culture3.html

@@ -0,0 +1,5 @@
+[?]
+[=img https://media.istockphoto.com/id/1337471900/vector/star-of-david-graphic-abstract-background-with-three-doves.webp?s=2048x2048&w=is&k=20&c=M47-JucDhH5TQs500koB-siTbCxce2DLUfQjC5Y9gKA=]
+[=text-]
+    Text related to the cultural image.
+[/]

site/culture.html

@@ -1,11 +1,13 @@
 [!]
 [=content-]
 <div id="culture">
-    [for culturalstuff cultureThing]
+    [f culturalstuff cultureThing]
+    <div>
         <img src="[^cultureThing.img]" />
         <p>
             [^cultureThing.text]
         </p>
+    </div>
     [/]
 </div>
 [/]

site/main.css

@@ -274,6 +274,17 @@ small {
     #main > div.bottom > img {
         max-width: 90vw;
     }
+
+    #culture > div {
+        flex-direction: column !important;
+        justify-content: stretch;
+    }
+    
+    #culture > div > img {
+        width: 100% !important;
+        box-sizing: border-box;
+        padding: 30px;
+    }
 }
 
 #plug {
@@ -382,4 +393,25 @@ p#liblurb {
     padding-bottom: 5% !important;
     background-image: linear-gradient(white, rgb(255, 255, 255, 0.7), white);
     background-color: transparent;
+}
+
+#culture > div {
+    display: flex;
+}
+
+#culture > div:nth-child(2n) {
+    flex-direction: row-reverse;
+}
+
+#culture > div > * {
+    width: 100%;
+}
+
+#culture > div > img {
+    width: 50vw;
+}
+
+#culture > div > p {
+    padding: 10%;
+    box-sizing: border-box;
 }