diff --git a/index.html b/index.html
index cad0f096d..1dfa36274 100644
--- a/index.html
+++ b/index.html
@@ -414,60 +414,50 @@ <h3><a href="/blog/2023-use-case-digital-signage.html">Digital Signage</a></h3>
 <h2>Use Cases</h2>
 <slide-show controls="navigation" class="use-cases">
   <section>
-    <div>
-      <div class="spotlight">
-        <h3><a href="/blog/2023-success-digital-signage.html">Digital Signage</a></h3>
-        <p>Digital signage web rendering players have many advantages and are a trend nowadays. They feature use of HTML for composing the user interface, simple and effortless provisioning and scheduling new contents to the screen from the cloud, a robust environment with an automatic crash recovery system, and more.</p>
-        <p><a href="/blog/2023-success-digital-signage.html" class="cta btn large">Learn More</a></p>
-      </div>
+    <div class="spotlight">
+      <h3><a href="/blog/2023-success-digital-signage.html">Digital Signage</a></h3>
+      <p>Digital signage web rendering players have many advantages and are a trend nowadays. They feature use of HTML for composing the user interface, simple and effortless provisioning and scheduling new contents to the screen from the cloud, a robust environment with an automatic crash recovery system, and more.</p>
+      <p><a href="/blog/2023-success-digital-signage.html" class="cta btn large">Learn More</a></p>
       <img height="250" src="/assets/img/use_case-digital_signage.png" alt="">
     </div>
   </section>
   <section>
-    <div>
-      <div class="spotlight">
-        <h3>Point of Sale</h3>
-        <p>Just as the web helps billions of online users make purchases every day, embedded browsers can serve as the basis for building the point of sale systems used by brick and mortar merchants.</p>
-      </div>
-      <img height="250" src="https://images.unsplash.com/photo-1556742517-fde6c2abbe11?q=80&w=2187&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="">
-    </div>
+    <div class="spotlight">
+      <h3>Point of Sale</h3>
+      <p>Just as the web helps billions of online users make purchases every day, embedded browsers can serve as the basis for building the point of sale systems used by brick and mortar merchants.</p>
+    	<img height="250" src="https://images.unsplash.com/photo-1556742517-fde6c2abbe11?q=80&w=2187&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="">
     </div>
+  </div>
   </section>
   <section>
-    <div>
-      <div class="spotlight">
-        <h3>Infotainment Systems</h3>
-        <p>The web’s ability to create interactive interfaces and stream media make embedded browsers an excellent choice for building the infotainment systems in automobiles, airplanes and trains.</p>
-      </div>
-      <img height="400" src="https://images.unsplash.com/photo-1700934509422-075b6e2830bb?q=80&w=2127&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="">
+    <div class="spotlight">
+      <h3>Infotainment Systems</h3>
+      <p>The web’s ability to create interactive interfaces and stream media make embedded browsers an excellent choice for building the infotainment systems in automobiles, airplanes and trains.</p>
+    	<img height="400" src="https://images.unsplash.com/photo-1700934509422-075b6e2830bb?q=80&w=2127&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="">
     </div>
   </section>
   <section>
-    <div>
-      <div class="spotlight">
-      	<h3>Smart TVs and set-top-boxes</h3>
-        <p>Television has long used embedded browsers in many ways, from video playback to creating the guides and interactive menus. The Web, with its natural multimedia-related capabilities, is a natural fit for consuming both traditional TV-based content as well as on demand content from industry-leading streaming services.</p>
-      </div>
-      <img height="250" src="https://www.igalia.com/assets/i/pe-industries/mini-tv.jpg" alt="">
+    <div class="spotlight">
+    	<h3>Smart TVs and set-top-boxes</h3>
+      <p>Television has long used embedded browsers in many ways, from video playback to creating the guides and interactive menus. The Web, with its natural multimedia-related capabilities, is a natural fit for consuming both traditional TV-based content as well as on demand content from industry-leading streaming services.</p>
+    	<img height="250" src="https://www.igalia.com/assets/i/pe-industries/mini-tv.jpg" alt="">
     </div>
   </section>
   <section>
-    <div>
-      <div class="spotlight">
-    		<h3 class="usecase">Home appliances</h3>
-        <p>Embedded browsers are increasingly used in home appliances of all kinds: From providing temperature information and settings for climate control systems, to browsing recipes and engaging programs on your favorite cooking machine, to controlling the distribution of sound across smart speakers around your home.</p>
-      </div>
-      <img height="250" src="https://plus.unsplash.com/premium_photo-1729431432431-fabe5caa7078?q=80&w=2168&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="">
+    <div class="spotlight">
+  		<h3 class="usecase">Home appliances</h3>
+      <p>Embedded browsers are increasingly used in home appliances of all kinds: From providing temperature information and settings for climate control systems, to browsing recipes and engaging programs on your favorite cooking machine, to controlling the distribution of sound across smart speakers around your home.</p>
+    	<img height="250" src="https://plus.unsplash.com/premium_photo-1729431432431-fabe5caa7078?q=80&w=2168&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="">
     </div>
+
   </section>
   <section>
-    <div>
-      <div class="spotlight">
-        <h3 class="usecase">Professional video and broadcasting</h3>
-        <p>Graphics overlays are everywhere nowadays in the live video broadcasting industry. Embedded browsers can be used to deliver low-latency, web-augmented video broadcasts which provides with expands the capabilities of traditional systems with and added value.</p>
-      </div>
-      <img height="250" src="https://plus.unsplash.com/premium_photo-1688700437975-0ea63cfa59e1?q=80&w=2340&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="">
+    <div class="spotlight">
+      <h3 class="usecase">Professional video and broadcasting</h3>
+      <p>Graphics overlays are everywhere nowadays in the live video broadcasting industry. Embedded browsers can be used to deliver low-latency, web-augmented video broadcasts which provides with expands the capabilities of traditional systems with and added value.</p>
+    	<img height="250" src="https://plus.unsplash.com/premium_photo-1688700437975-0ea63cfa59e1?q=80&w=2340&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="">
     </div>
+    
   </section>
 </slide-show>
 <section class="developers embedded dotsep">
@@ -558,3 +548,31 @@ <h3>Brought to you by</h3>
 	}
 }
 </script>
+<style>
+	/* emeyer edits 2024.11.12 */
+	::part(prev-button),::part(next-button){
+	    top:0%;
+	    height:100%;
+	    background-image:linear-gradient(42deg,hsl(0 80 0 / 0),40%,hsl(0 100 0 / 0.1),60%,hsl(0 80 0 / 0));
+	}
+	:is(::part(prev-button),::part(next-button):hover{
+	   background-image:none;
+	}
+
+</style>
+<style>
+	
+@media (min-width: 45rem) {
+
+	.use-cases section img:last-child  {
+    grid-column: 2;
+    grid-row: 1 / 4;
+    justify-self: center;
+	}
+
+	.use-cases p:has(a[href]) {
+		grid-row: 4;
+	}
+
+}
+</style>
\ No newline at end of file
diff --git a/js/slide-show-shadow.css b/js/slide-show-shadow.css
index 6ba6d6f1b..b96a2827a 100644
--- a/js/slide-show-shadow.css
+++ b/js/slide-show-shadow.css
@@ -3,4 +3,377 @@
    By Stephen Band
    Built 2023-02-22 14:59 */
 
-:host,*,*:before,*:after{box-sizing:border-box;background-origin:padding-box;background-repeat:no-repeat;padding:0;margin:0}button{font-size:inherit;color:inherit}[hidden]{display:none!important}:host{--slide-duration: 8s;--padding-left: 0;--padding-right: 0;position:relative;display:flex;flex-direction:column;padding-left:0!important;padding-right:0!important;align-content:center!important;align-items:stretch;justify-content:center!important;justify-items:stretch;grid-auto-flow:row!important;grid-auto-columns:100%;grid-template-columns:none;column-gap:0;grid-auto-rows:auto;row-gap:0;scroll-snap-type:none!important;scroll-snap-stop:none!important;-webkit-scroll-behavior:smooth;scroll-behavior:smooth;overscroll-behavior-x:none!important;-ms-overflow-style:none!important;scrollbar-width:none!important;overflow:visible}:host([hidden]){display:none}:host>.scroller,:host>[part=controls]{align-self:stretch}:host>.scroller{height:100%;justify-self:stretch}:host>[part=controls]{justify-self:auto}.invisible{position:absolute;clip:rect(0 0 0 0);-webkit-clip-path:inset(50%);clip-path:inset(50%);width:1px;height:1px;padding:0;margin:0 -1px -1px 0;overflow:hidden;white-space:nowrap;border-width:0}svg{stroke:currentcolor;stroke-width:inherit;stroke-linecap:inherit;fill:inherit;vector-effect:non-scaling-stroke}.scroller{display:block;position:relative;padding-left:var(--padding-left, 0);padding-right:var(--padding-right, 0);scroll-padding-left:var(--padding-left, 0);scroll-padding-right:var(--padding-right, 0);overflow:auto;overflow-y:hidden;overscroll-behavior-x:none;overscroll-behavior-x:contain;scrollbar-width:none;scroll-snap-type:x mandatory;scroll-snap-stop:always;-webkit-scroll-behavior:inherit;scroll-behavior:inherit;will-change:-webkit-scroll-behavior;will-change:scroll-behavior;grid-template-columns:inherit;grid-auto-columns:inherit;column-gap:inherit;justify-content:inherit;justify-items:inherit;grid-template-rows:inherit;grid-auto-rows:inherit;row-gap:inherit;align-content:inherit;align-items:inherit}.scroller:before{content:"";position:absolute;left:0;top:0;width:var(--scroll-width, 5000%);height:1px;z-index:-1}.scroller::-webkit-scrollbar{-webkit-appearance:none;display:var(--webkit-scrollbar-display, none);width:var(--webkit-scrollbar-width);height:var(--webkit-scrollbar-width);background:var(--webkit-scrollbar-background);border:var(--webkit-scrollbar-border);border-radius:var(--webkit-scrollbar-border-radius)}.scroller::-webkit-scrollbar-thumb:vertical,.scroller::-webkit-scrollbar-thumb:horizontal{background:var(--webkit-scrollbar-thumb-background);border:var(--webkit-scrollbar-thumb-border);border-radius:var(--webkit-scrollbar-thumb-border-radius)}.scroller>[part=slides]{position:relative}[part=slides]{display:grid;height:100%;margin-left:auto;margin-right:auto;grid-auto-flow:column;grid-template-columns:inherit;grid-auto-columns:inherit;column-gap:inherit;justify-content:start;justify-items:inherit;grid-template-rows:inherit;grid-auto-rows:inherit;row-gap:inherit;align-content:inherit;align-items:inherit}[part=slides]::slotted(*){scroll-snap-align:center}[part=controls]{display:grid;grid-template-columns:[left] 1fr [center] auto [right] 1fr;height:auto;padding-left:var(--padding-left);padding-right:var(--padding-right);align-content:center;align-items:center;justify-items:center;justify-content:stretch}[part=controls]:empty{display:none}@media print{:host>nav{display:none!important}}:host(:-webkit-full-screen){width:100vw!important;height:100vh!important;margin:0!important;opacity:1!important;visibility:visible!important;color:#fff;background-color:#121212}:host(:fullscreen){width:100vw!important;height:100vh!important;margin:0!important;opacity:1!important;visibility:visible!important;color:#fff;background-color:#121212}:host(:-webkit-full-screen) [part=fullscreen-button]{grid-column:auto;grid-row:auto;position:absolute;top:.75em;right:.75em;margin:0;bottom:auto}:host(:fullscreen) [part=fullscreen-button]{grid-column:auto;grid-row:auto;position:absolute;top:.75em;right:.75em;margin:0;bottom:auto}:host(:-webkit-full-screen) .fullscreen-hidden{display:none!important}:host(:fullscreen) .fullscreen-hidden{display:none!important}:host(:not(:-webkit-full-screen)) .fullscreen-shown{display:none!important}:host(:not(:fullscreen)) .fullscreen-shown{display:none!important}[part=fullscreen-button]{vertical-align:baseline;overflow:hidden;z-index:2;grid-column:3;grid-row:1;justify-self:end;margin:.375em 0;padding:0;width:1.875em;height:1.875em;min-width:0;line-height:inherit;text-decoration:none;cursor:pointer;background-size:contain;background-position:50% 50%;background-repeat:no-repeat;background-color:transparent;border-width:0;border-radius:.3125em;color:inherit;transition:background-color .2s linear;stroke-width:2;stroke-linecap:round;fill:none}[part=fullscreen-button]:hover{transition:background-color .1s linear;background-color:#ffffff4d}[part=prev-button],[part=next-button]{vertical-align:baseline;overflow:hidden;position:absolute;top:50%;z-index:2;padding:0;width:1.875rem;min-width:0;line-height:inherit;text-decoration:none;height:2.5rem;margin-top:-1.25rem;background-size:contain;background-position:50% 50%;background-repeat:no-repeat;background-color:transparent;border-width:0;border-radius:.3125rem;color:inherit;transition:background-color .2s linear;cursor:pointer;stroke-width:2;stroke-linecap:round;fill:none}[part=prev-button]{left:.1875rem}[part=next-button]{right:.1875rem}[part=prev-button]:hover,[part=next-button]:hover{transition:background-color .1s linear;background-color:#ffffff4d}slot[name=prev-button]>svg,slot[name=next-button]>svg,slot[name=prev-button]::slotted(svg),slot[name=next-button]::slotted(svg){width:100%;height:100%}[part=pagination]{display:flex;justify-content:center;grid-column:2;grid-row:1;justify-self:center;margin:0;padding:.875em 0}[part*=page-button]{display:inline-block;padding:0 0 0 1.25em;height:1.25em;cursor:pointer;border-width:0;background-color:transparent;background-size:100% auto;background-position:50% 50%;background-image:url('data:image/svg+xml;utf8,<svg viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">        <circle cx="10" cy="10" r="6" stroke="none" fill="gray"></circle>    </svg>')}[part*=page-button-active]{background-image:url('data:image/svg+xml;utf8,<svg viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">        <circle cx="10" cy="10" r="6" stroke="none" fill="black"></circle>    </svg>')}:host(:fullscreen) [part*=page-button-active]{background-image:url('data:image/svg+xml;utf8,<svg viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">        <circle cx="10" cy="10" r="6" stroke="none" fill="white"></circle>    </svg>')}:host(:-webkit-full-screen) [part*=page-button-active]{background-image:url('data:image/svg+xml;utf8,<svg viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">        <circle cx="10" cy="10" r="6" stroke="none" fill="white"></circle>    </svg>')}slot[name=optional]::slotted(*){grid-column:1;grid-row:1}
+:host,
+*,
+*:before,
+*:after {
+  box-sizing: border-box;
+  background-origin: padding-box;
+  background-repeat: no-repeat;
+  padding: 0;
+  margin: 0
+}
+
+button {
+  font-size: inherit;
+  color: inherit
+}
+
+[hidden] {
+  display: none !important
+}
+
+:host {
+  --slide-duration: 8s;
+  --padding-left: 0;
+  --padding-right: 0;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  padding-left: 0 !important;
+  padding-right: 0 !important;
+  align-content: center !important;
+  align-items: stretch;
+  justify-content: center !important;
+  justify-items: stretch;
+  grid-auto-flow: row !important;
+  grid-auto-columns: 100%;
+  grid-template-columns: none;
+  column-gap: 0;
+  grid-auto-rows: auto;
+  row-gap: 0;
+  scroll-snap-type: none !important;
+  scroll-snap-stop: none !important;
+  -webkit-scroll-behavior: smooth;
+  scroll-behavior: smooth;
+  overscroll-behavior-x: none !important;
+  -ms-overflow-style: none !important;
+  scrollbar-width: none !important;
+  overflow: visible
+}
+
+:host([hidden]) {
+  display: none
+}
+
+:host>.scroller,
+:host>[part=controls] {
+  align-self: stretch
+}
+
+:host>.scroller {
+  height: 100%;
+  justify-self: stretch
+}
+
+:host>[part=controls] {
+  justify-self: auto
+}
+
+.invisible {
+  position: absolute;
+  clip: rect(0 0 0 0);
+  -webkit-clip-path: inset(50%);
+  clip-path: inset(50%);
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: 0 -1px -1px 0;
+  overflow: hidden;
+  white-space: nowrap;
+  border-width: 0
+}
+
+svg {
+  stroke: currentcolor;
+  stroke-width: inherit;
+  stroke-linecap: inherit;
+  fill: inherit;
+  vector-effect: non-scaling-stroke
+}
+
+.scroller {
+  display: block;
+  position: relative;
+  padding-left: var(--padding-left, 0);
+  padding-right: var(--padding-right, 0);
+  scroll-padding-left: var(--padding-left, 0);
+  scroll-padding-right: var(--padding-right, 0);
+  overflow: auto;
+  overflow-y: hidden;
+  overscroll-behavior-x: none;
+  overscroll-behavior-x: contain;
+  scrollbar-width: none;
+  scroll-snap-type: x mandatory;
+  scroll-snap-stop: always;
+  -webkit-scroll-behavior: inherit;
+  scroll-behavior: inherit;
+  will-change: -webkit-scroll-behavior;
+  will-change: scroll-behavior;
+  grid-template-columns: inherit;
+  grid-auto-columns: inherit;
+  column-gap: inherit;
+  justify-content: inherit;
+  justify-items: inherit;
+  grid-template-rows: inherit;
+  grid-auto-rows: inherit;
+  row-gap: inherit;
+  align-content: inherit;
+  align-items: inherit
+}
+
+.scroller:before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: var(--scroll-width, 5000%);
+  height: 1px;
+  z-index: -1
+}
+
+.scroller::-webkit-scrollbar {
+  -webkit-appearance: none;
+  display: var(--webkit-scrollbar-display, none);
+  width: var(--webkit-scrollbar-width);
+  height: var(--webkit-scrollbar-width);
+  background: var(--webkit-scrollbar-background);
+  border: var(--webkit-scrollbar-border);
+  border-radius: var(--webkit-scrollbar-border-radius)
+}
+
+.scroller::-webkit-scrollbar-thumb:vertical,
+.scroller::-webkit-scrollbar-thumb:horizontal {
+  background: var(--webkit-scrollbar-thumb-background);
+  border: var(--webkit-scrollbar-thumb-border);
+  border-radius: var(--webkit-scrollbar-thumb-border-radius)
+}
+
+.scroller>[part=slides] {
+  position: relative
+}
+
+[part=slides] {
+  display: grid;
+  height: 100%;
+  margin-left: auto;
+  margin-right: auto;
+  grid-auto-flow: column;
+  grid-template-columns: inherit;
+  grid-auto-columns: inherit;
+  column-gap: inherit;
+  justify-content: start;
+  justify-items: inherit;
+  grid-template-rows: inherit;
+  grid-auto-rows: inherit;
+  row-gap: inherit;
+  align-content: inherit;
+  align-items: inherit
+}
+
+[part=slides]::slotted(*) {
+  scroll-snap-align: center
+}
+
+[part=controls] {
+  display: grid;
+  grid-template-columns: [left] 1fr [center] auto [right] 1fr;
+  height: auto;
+  padding-left: var(--padding-left);
+  padding-right: var(--padding-right);
+  align-content: center;
+  align-items: center;
+  justify-items: center;
+  justify-content: stretch
+}
+
+[part=controls]:empty {
+  display: none
+}
+
+@media print {
+  :host>nav {
+    display: none !important
+  }
+}
+
+:host(:-webkit-full-screen) {
+  width: 100vw !important;
+  height: 100vh !important;
+  margin: 0 !important;
+  opacity: 1 !important;
+  visibility: visible !important;
+  color: #fff;
+  background-color: #121212
+}
+
+:host(:fullscreen) {
+  width: 100vw !important;
+  height: 100vh !important;
+  margin: 0 !important;
+  opacity: 1 !important;
+  visibility: visible !important;
+  color: #fff;
+  background-color: #121212
+}
+
+:host(:-webkit-full-screen) [part=fullscreen-button] {
+  grid-column: auto;
+  grid-row: auto;
+  position: absolute;
+  top: .75em;
+  right: .75em;
+  margin: 0;
+  bottom: auto
+}
+
+:host(:fullscreen) [part=fullscreen-button] {
+  grid-column: auto;
+  grid-row: auto;
+  position: absolute;
+  top: .75em;
+  right: .75em;
+  margin: 0;
+  bottom: auto
+}
+
+:host(:-webkit-full-screen) .fullscreen-hidden {
+  display: none !important
+}
+
+:host(:fullscreen) .fullscreen-hidden {
+  display: none !important
+}
+
+:host(:not(:-webkit-full-screen)) .fullscreen-shown {
+  display: none !important
+}
+
+:host(:not(:fullscreen)) .fullscreen-shown {
+  display: none !important
+}
+
+[part=fullscreen-button] {
+  vertical-align: baseline;
+  overflow: hidden;
+  z-index: 2;
+  grid-column: 3;
+  grid-row: 1;
+  justify-self: end;
+  margin: .375em 0;
+  padding: 0;
+  width: 1.875em;
+  height: 1.875em;
+  min-width: 0;
+  line-height: inherit;
+  text-decoration: none;
+  cursor: pointer;
+  background-size: contain;
+  background-position: 50% 50%;
+  background-repeat: no-repeat;
+  background-color: transparent;
+  border-width: 0;
+  border-radius: .3125em;
+  color: inherit;
+  transition: background-color .2s linear;
+  stroke-width: 2;
+  stroke-linecap: round;
+  fill: none
+}
+
+[part=fullscreen-button]:hover {
+  transition: background-color .1s linear;
+  background-color: #ffffff4d
+}
+
+[part=prev-button],
+[part=next-button] {
+  vertical-align: baseline;
+  overflow: hidden;
+  position: absolute;
+  top: 50%;
+  z-index: 2;
+  padding: 0;
+  width: 1.875rem;
+  min-width: 0;
+  line-height: inherit;
+  text-decoration: none;
+  height: 2.5rem;
+  margin-top: -1.25rem;
+  background-size: contain;
+  background-position: 50% 50%;
+  background-repeat: no-repeat;
+  background-color: transparent;
+  border-width: 0;
+  border-radius: .3125rem;
+  color: inherit;
+  transition: background-color .2s linear;
+  cursor: pointer;
+  stroke-width: 2;
+  stroke-linecap: round;
+  fill: none
+}
+
+[part=prev-button] {
+  left: .1875rem
+}
+
+[part=next-button] {
+  right: .1875rem
+}
+
+[part=prev-button]:hover,
+[part=next-button]:hover {
+  transition: background-color .1s linear;
+  background-color: #ffffff4d
+}
+
+slot[name=prev-button]>svg,
+slot[name=next-button]>svg,
+slot[name=prev-button]::slotted(svg),
+slot[name=next-button]::slotted(svg) {
+  width: 100%;
+  height: 100%
+}
+
+[part=pagination] {
+  display: flex;
+  justify-content: center;
+  grid-column: 2;
+  grid-row: 1;
+  justify-self: center;
+  margin: 0;
+  padding: .875em 0
+}
+
+[part*=page-button] {
+  display: inline-block;
+  padding: 0 0 0 1.25em;
+  height: 1.25em;
+  cursor: pointer;
+  border-width: 0;
+  background-color: transparent;
+  background-size: 100% auto;
+  background-position: 50% 50%;
+  background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">        <circle cx="10" cy="10" r="6" stroke="none" fill="gray"></circle>    </svg>')
+}
+
+[part*=page-button-active] {
+  background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">        <circle cx="10" cy="10" r="6" stroke="none" fill="black"></circle>    </svg>')
+}
+
+:host(:fullscreen) [part*=page-button-active] {
+  background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">        <circle cx="10" cy="10" r="6" stroke="none" fill="white"></circle>    </svg>')
+}
+
+:host(:-webkit-full-screen) [part*=page-button-active] {
+  background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">        <circle cx="10" cy="10" r="6" stroke="none" fill="white"></circle>    </svg>')
+}
+
+slot[name=optional]::slotted(*) {
+  grid-column: 1;
+  grid-row: 1
+}
+
+
+