install swiper, start styling image gallery

web/src/components/blocks/swiper.scss

@@ -0,0 +1,98 @@
+.swiper {
+  width: 100%;
+  height: 100%;
+}
+
+.swiper-slide {}
+
+.swiper-button-next,
+.swiper-button-prev {
+  &:before {
+    content: "→";
+    display: block;
+    padding: var(--spacing-sitepadding-inline);
+    font-size: var(--font-size-h3);
+    position: absolute;
+    color: var(--color-goldenBeige);
+  }
+}
+
+.swiper-button-next {
+  &:before {
+    content: "→";
+    right: 0;
+  }
+
+  &:after {
+    content: "Neste";
+    visibility: hidden;
+  }
+}
+
+.swiper-button-prev {
+  &:before {
+    content: "←";
+    left: 0;
+  }
+
+  &:after {
+    content: "Forrige";
+    visibility: hidden;
+  }
+}
+
+.swiper-pagination {
+  padding-top: var(--spacing-sitepadding-inline);
+  padding-left: calc(var(--spacing-sitepadding-inline) + var(--size-col-1));
+  position: absolute;
+  top: 0;
+  bottom: auto;
+  text-align: left;
+}
+
+@media (max-width: 1100px) {
+
+  .swiper-button-next,
+  .swiper-button-prev {
+    &:before {
+      padding: 1rem;
+      font-size: var(--font-size-h5);
+    }
+  }
+}
+
+@media (max-width: 800px) {
+
+  .swiper-button-next,
+  .swiper-button-prev {
+    bottom: 1rem;
+    top: auto;
+
+    &:before {
+      padding: 1rem;
+      font-size: var(--font-size-h5);
+    }
+  }
+
+  .swiper-pagination {
+    padding-top: 1.75rem;
+  }
+
+  .swiper-slide {
+
+    figure {
+      width: 100vw;
+      height: 60vh;
+      margin-bottom: 2rem;
+
+      figcaption {
+        position: absolute;
+        bottom: 5rem;
+        left: 50%;
+        transform: translateX(-50%);
+        width: 100%;
+        padding: 0 2rem;
+      }
+    }
+  }
+}