Repository: canonical/canonical.com
Pull request #1707: [WD-21842] Refresh /careers/company-culture/remote-work
Author: login: fasih-mehmood
Labels: name: Review: Code +1
name: Review: QA +1
name: Review: UX +1
name: Review: Design +1
Created: 2025-05-21T11:29:39Z | Merged: 2025-05-23T06:40:07Z

## Done

- Refresh /careers/company-culture/remote-work page

## QA

- Go to: https://canonical-com-1707.demos.haus/careers/company-culture/remote-work
- Run through the following [QA steps](https://discourse.canonical.com/t/qa-steps/152)
- Compare with:
  - [Copy doc](https://docs.google.com/document/d/1391OL7xQec1SY9HFkv80DFwACbdndCIk-N_sFzAXkPU/edit?disco=AAABit8JY-g)
  - [Figma Design](https://www.figma.com/design/UsovUAf4zELQgGd9bxhiVe/canonical.com-careers?node-id=2502-2270&m=dev)

## Issue / Card

Fixes [WD-21842](https://warthogs.atlassian.net/browse/WD-21842)

## Screenshots

![screencapture-localhost-8002-careers-company-culture-remote-work-2025-05-22-18_46_19](https://github.com/user-attachments/assets/46a3c1c5-b113-48e9-a8ff-809056947a5d)

[WD-21842]: https://warthogs.atlassian.net/browse/WD-21842?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ


Diff:
diff --git a/package.json b/package.json
index b670f2750..6f7e07858 100644
--- a/package.json
+++ b/package.json
@@ -29,8 +29,10 @@
     "autoprefixer": "10.4.17",
     "concurrently": "7.6.0",
     "esbuild": "0.19.12",
+    "flickity": "^3.0.0",
     "fuse.js": "^6.6.2",
     "intl-tel-input": "17.0.18",
+    "leaflet": "1.9.4",
     "postcss": "8.4.33",
     "postcss-cli": "10.1.0",
     "react": "^18.2.0",
@@ -64,4 +66,4 @@
       "^.+\\.(ts|tsx|js|jsx)$": "ts-jest"
     }
   }
-}
+}
\ No newline at end of file
diff --git a/postcss.config.js b/postcss.config.js
index 02951c655..ba04d77e5 100644
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -19,6 +19,8 @@ let config = {
         "static/*.md",
         "static/*.tsx",
         "static/*.xml",
+        "node_modules/flickity/dist/flickity.pkgd.min.js",
+        "node_modules/leaflet/dist/leaflet.js",
       ],
       defaultExtractor: (content) => content.match(/[\w-/:]+(?<!:)/g) || [],
       safelist: {
@@ -28,6 +30,7 @@ let config = {
           /^p-/, // Preserve form related classes
           /^u-/, // Utility classes
           /^js-/, // JavaScript-related classes
+          /^leaflet-/, // Leaflet classes for map
         ],
         greedy: [
           /^iti/,
diff --git a/scripts/build-modules.sh b/scripts/build-modules.sh
index 7598f0346..1f4d82797 100755
--- a/scripts/build-modules.sh
+++ b/scripts/build-modules.sh
@@ -18,3 +18,9 @@ cp node_modules/intl-tel-input/build/js/utils.js static/js/modules/intl-tel-inpu
 
 mkdir -p static/js/modules/discourse-rad-parser
 cp node_modules/@canonical/discourse-rad-parser/build/js/discourse-rad-parser.js static/js/modules/discourse-rad-parser
+
+mkdir -p static/js/modules/flickity
+cp node_modules/flickity/dist/flickity.pkgd.min.js static/js/modules/flickity
+
+mkdir -p static/js/modules/leaflet
+cp node_modules/leaflet/dist/leaflet.js static/js/modules/leaflet
diff --git a/static/sass/_pattern_carousel.scss b/static/sass/_pattern_carousel.scss
new file mode 100644
index 000000000..0c2dc641a
--- /dev/null
+++ b/static/sass/_pattern_carousel.scss
@@ -0,0 +1,88 @@
+@mixin sprint-carousel {
+  .p-carousel {
+    position: relative;
+
+    .p-carousel__cell {
+      width: 100%;
+    }
+
+    .p-carousel__next {
+      right: 0;
+
+      [class*="p-icon"] {
+        transform: rotate(-0.25turn);
+      }
+    }
+
+    .p-carousel__previous {
+      left: 0;
+
+      [class*="p-icon"] {
+        transform: rotate(0.25turn);
+      }
+    }
+
+    .p-carousel__next,
+    .p-carousel__previous {
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+
+      [class*="p-icon"] {
+        @extend %icon;
+
+        @include vf-icon-chevron($color-mid-light);
+
+        height: 2rem;
+        width: 2rem;
+      }
+
+      &:hover {
+        [class*="p-icon"] {
+          @include vf-icon-chevron($color-mid-dark);
+        }
+      }
+    }
+
+    // the carousels currently use https://github.com/metafizzy/flickity
+    // so style the elements it gives us out of the box
+    .flickity-page-dots {
+      bottom: 0;
+
+      .dot {
+        background: $color-mid-light;
+        height: 8px;
+        margin: 0 4px;
+        opacity: 1;
+        width: 8px;
+
+        &:hover {
+          background: $color-mid-dark;
+        }
+
+        &.is-selected,
+        &.is-selected:hover {
+          background: orange;
+        }
+      }
+    }
+
+    .flickity-slider {
+      align-items: center;
+      display: flex;
+    }
+  }
+
+  @media screen and ($breakpoint-large <= width) {
+    .p-carousel {
+      .p-carousel__cell {
+        margin-right: 32px;
+        width: 66%;
+      }
+
+      .flickity-slider {
+        left: -17%;
+      }
+    }
+  }
+}
diff --git a/static/sass/styles.scss b/static/sass/styles.scss
index 61331efb3..9ae193324 100644
--- a/static/sass/styles.scss
+++ b/static/sass/styles.scss
@@ -6,6 +6,10 @@
 // import dial-code dropdown
 @import "intl-tel-input/build/css/intlTelInput";
 
+@import "flickity/dist/flickity";
+
+@import "leaflet/dist/leaflet";
+
 $color-brand: #7c355d;
 $color-tabs-active-bar: $colors--light-theme--text-default;
 $nudge--small: 0.55rem;
@@ -16,6 +20,7 @@ $p-small-lh-diff: map-get($line-heights, default-text) -
 @import "pattern_application";
 @import "pattern_blog-card";
 @import "pattern_cards";
+@import "pattern_carousel";
 @import "pattern_careers-modal";
 @import "pattern_footer";
 @import "pattern_forms";
@@ -54,6 +59,22 @@ $p-small-lh-diff: map-get($line-heights, default-text) -
 @include canonical-p-navigation-tab-panel;
 @include canonical-p-navigation-dropdown-content;
 @include canonical-p-navigation-mobile;
+@include sprint-carousel;
+
+
+@media screen and ($breakpoint-large <= width) {
+  .p-section__u-no-padding--top {
+    h1,
+    .p-heading--2,
+    .p-section--hero {
+      padding-top: 0;
+    }
+  }
+}
+
+.leaflet-control-attribution {
+  display: none;
+}
 
 .js-find-a-partner__partner {
   // find-a-partner search
diff --git a/templates/careers/company-culture/remote-work.html b/templates/careers/company-culture/remote-work.html
index ffdf63f6b..e4885cbd9 100644
--- a/templates/careers/company-culture/remote-work.html
+++ b/templates/careers/company-culture/remote-work.html
@@ -1,15 +1,19 @@
 {% extends 'base_index.html' %}
 
+{% from "_macros/vf_hero.jinja" import vf_hero %}
+
 {% block meta_copydoc %}
   https://docs.google.com/document/d/1391OL7xQec1SY9HFkv80DFwACbdndCIk-N_sFzAXkPU
 {% endblock meta_copydoc %}
 
-{% block title %}Remote work | Careers{% endblock %}
+{% block title %}Careers | Remote work and company culture{% endblock %}
 
 {% block meta_description %}
-  Travel is central to Canonical's global, distributed workplace. All teams participate in regular team and cross-team events. We spread locations across time zones and look for interesting and diverse cultural places. Many employees return to these destinations with friends and family.
+  Canonical is a remote-first company. Our policy means we can work with the best talent in the world. We meet in-person at least twice a year at company wide sprints, which take place in exciting locations around the world. Learn about remote work at Canonical. 
 {% endblock %}
 
+{% block meta_keywords %}Remote work careers{% endblock %}
+
 {% block body_class %}
   is-paper
 {% endblock body_class %}
@@ -18,94 +22,106 @@
   <div class="u-fixed-width">
     <nav class="p-breadcrumbs" aria-label="Breadcrumbs">
       <ol class="p-breadcrumbs__items p-text--x-small-capitalised">
-        <li class="p-breadcrumbs__item ">
+        <li class="p-breadcrumbs__item">
           <a href="/careers">Careers</a>
         </li>
-        <li class="p-breadcrumbs__item ">
+        <li class="p-breadcrumbs__item">
           <a href="/careers/company-culture">Company culture</a>
         </li>
-        <li class="p-breadcrumbs__item ">Remote work</li>
+        <li class="p-breadcrumbs__item">Remote work</li>
       </ol>
     </nav>
     <h1 class="p-text--x-small-capitalised u-hide">Careers</h1>
     <hr class="p-rule" />
   </div>
 
-  <section class="p-section">
-    <div class="row">
-      <div class="col-6 col-medium-3">
-        <h1>Remote working</h1>
-      </div>
-      <div class="col-6 col-medium-3">
-        <h3 class="p-heading--2">We are remote but connected</h3>
-        <p>Canonical has been a fully distributed organization since its origin in 2004.</p>
-        <p>
-          Digital collaboration allows us to enjoy our home environment and work with the best in the world in our domain. We meet each other at least twice per year during in-person sprints to nurture cross-team relationships. These sprints are fully funded by Canonical, and take place at various locations around the world.
-        </p>
-      </div>
-    </div>
-  </section>
-
-  <section class="p-section">
-    <div class="u-fixed-width">
-      <hr class="p-rule" />
-    </div>
-    <div class="row">
-      <div class="col-6 col-medium-3">
-        <h2>We build trust</h2>
-      </div>
-      <div class="col-6 col-medium-3">
-        <p>
-          Zero commute means more time for the things you enjoy. At the same time, we have very high expectations of commitment and independent execution.
-        </p>
-        <p>We invest in people who are self-driven, motivated, and highly organized.</p>
-        <p>
-          We take our responsibility for the most critical elements of open infrastructure very seriously, and we are committed to quality in every aspect of our product and services.
-        </p>
-        <p>
-          <a href="/careers/company-culture">Read more about our tech culture&nbsp;&rsaquo;</a>
-        </p>
-      </div>
-    </div>
-  </section>
-
-  <section class="p-section">
-    <div class="u-fixed-width">
-      <hr class="p-rule" />
-    </div>
-    <div class="row">
-      <div class="col-6 col-medium-3">
-        <h2>We engineer excellence</h2>
-      </div>
-      <div class="col-6 col-medium-3">
-        <p>
-          We aspire to lead on the global stage. There’s no other way to describe it than hard work, hard challenges and hard competition.
-        </p>
-        <p>
-          You will need to show that you can compete in deeply challenging intellectual fields. Your colleagues are aiming for the top, and they depend on you to set the same standard in your area of responsibility. That’s tough but incredibly satisfying. We value those who take ownership of their area and take opportunities to be exceptional.
-        </p>
-        <p>
-          <a href="/careers/career-explorer">What kind of excellent are you&nbsp;&rsaquo;</a>
-        </p>
-      </div>
-    </div>
-  </section>
+  <div class="p-section__u-no-padding--top">
+    {% call(slot) vf_hero(
+      title_text='Remote work',
+      subtitle_text='We are remote but connected',
+      layout='50/50'
+    ) -%}
+    {%- if slot == 'description' -%}
+      <p>
+        Canonical has been a fully distributed organization since its origin in 2004.
+      </p>
+      <p>
+        Our remote-first policy enables us to collaborate with the best in the world in our domain. Though most team members work remotely, we meet each other at least twice per year during in-person sprints to nurture cross-team relationships. These sprints are funded by Canonical, and take place at locations around the world.
+      </p>
+    {%- endif -%}
+    {%- if slot == 'cta' -%}
+      <a class="p-button--positive u-no-margin--bottom" href="/careers">
+        Careers with Canonical
+      </a>
+    {%- endif -%}
+    {% endcall -%}
+  </div>
 
   <section class="p-section">
     <div class="u-fixed-width">
       <hr class="p-rule" />
     </div>
-    <div class="row">
-      <div class="col-6 col-medium-3">
-        <h2>We travel</h2>
+    <div class="row--25-75">
+      <div class="col">
+        <h2>
+          Our work ethic
+        </h2>
       </div>
-      <div class="col-6 col-medium-3">
-        <p>
-          We optimize our team structure for time zone overlap. Collaboration and inspiration takes time to fully develop but leadership at Canonical means building cross-team relationships. We nurture those relationships through regular global summits which bring diverse teams or their leaders together.
-        </p>
-        <p>
-          We host these events around the world to discover great places to explore and appreciate in the process. Team events have taken place in Vancouver, Madrid, Riga, Cape Town, Prague, London, and many more.
-        </p>
+      <div class="col">
+        <div class="row">
+          <div class="col-3 col-medium-1">
+            <h3 class="p-heading--5">
+              We build trust
+            </h3>
+          </div>
+          <div class="col-6 col-medium-3">
+            <p>
+              Zero commute means more time for the things you enjoy. At the same time, we have very high expectations of commitment and independent execution.
+            </p>
+            <p>We invest in people who are self-driven, motivated, and highly organized.</p>
+            <p class="u-sv2">
+              We take our responsibility for the most critical elements of open infrastructure very seriously, and we are committed to quality in every aspect of our product and services.
+            </p>
+            <div class="p-cta-block">
+              <a href="/careers/company-culture">Read more about our tech culture&nbsp;&rsaquo;</a>
+            </div>
+          </div>
+        </div>
+        <hr class="p-rule--muted" />
+        <div class="row">
+          <div class="col-3 col-medium-1">
+            <h3 class="p-heading--5">
+              We engineer excellence
+            </h3>
+          </div>
+          <div class="col-6 col-medium-3">
+            <p>
+              We aspire to lead on the global stage. There’s no other way to describe it than hard work, hard challenges, and hard competition.
+            </p>
+            <p class="u-sv2">
+              You will need to show that you can compete in deeply challenging intellectual fields. Your colleagues are aiming for the top, and they depend on you to set the same standard in your area of responsibility. We value those who take ownership of their area and take opportunities to be exceptional.
+            </p>
+            <div class="p-cta-block">
+              <a href="/careers/start">Try our career explorer&nbsp;&rsaquo;</a>
+            </div>
+          </div>
+        </div>
+        <hr class="p-rule--muted" />
+        <div class="row">
+          <div class="col-3 col-medium-1">
+            <h3 class="p-heading--5">
+              We travel
+            </h3>
+          </div>
+          <div class="col-6 col-medium-3">
+            <p>
+              We optimize our team structure for time zone overlap. Collaboration takes time to fully develop but leadership at Canonical means building cross-team relationships. We nurture those relationships through company sprints, which are in-person events that bring diverse teams or their leaders together.
+            </p>
+            <p>
+              We host these events around the world to discover great places to explore and appreciate in the process. Team events have taken place in Vancouver, Madrid, Riga, Cape Town, Prague, Lyon, London and many more.
+            </p>
+          </div>
+        </div>
       </div>
     </div>
     <!-- map goes here -->
@@ -131,107 +147,413 @@ <h3 class="p-heading--2">Past sprint locations</h3>
           </noscript>
         </div>
         <div class="row">
-          <figcaption class="col-6 col-medium-3 col-start-large-7">A sample of sprint locations from the past 5 years</figcaption>
+          <figcaption class="col-6 col-medium-3 col-start-medium-4 col-start-large-7 u-text--muted" style="font-style: normal;">A sample of sprint locations from the past 5 years</figcaption>
         </div>
       </figure>
     </div>
 
     <div class="row">
-      <div class="col-6 col-medium-3 col-start-large-7">
+      <div class="col-6 col-medium-3 col-start-medium-4 col-start-large-7">
         <p>
           As our customers transform their deepest and most important infrastructure to benefit from open source, they trust us to advise them and lead them to best practice. That also takes time on site, to whiteboard and to work shoulder to shoulder in their development halls and data centers. Many teams at Canonical travel for that deep customer presence.
         </p>
-        <p>
+        <p class="u-sv2">
           If you are excited to see the world, Canonical is a great place to be. We expect everybody at Canonical to be willing and able to travel for up to two weeks at a time, twice a year.
         </p>
+        <div class="p-cta-block">
+          <a href="/careers">Explore the world with Canonical - browse careers&nbsp;&rsaquo;</a>
+        </div>
       </div>
     </div>
   </section>
 
   <section class="p-section">
-    <div class="u-fixed-width u-sv2">
-      <hr class="p-rule" />
+    <div class="u-fixed-width">
+      <hr class="p-rule">
     </div>
-    <div class="row">
-      <div class="col-6 col-medium-3 col-medium-3 p-remote-work__collage-container">
-        <img class="p-remote-work__collage--1"
-             src="https://assets.ubuntu.com/v1/c9c4f215-Rectangle%2099.jpg"
-             alt="Engineering sprint visits" />
-        <img class="p-remote-work__collage--2"
-             src="https://assets.ubuntu.com/v1/e272d998-Rectangle%20101.jpg"
-             alt="Engineering sprint webteam group photo" />
-        <img class="p-remote-work__collage--3"
-             src="https://assets.ubuntu.com/v1/7a4dd64e-Rectangle%2090.jpg"
-             alt="Engineering sprint team dinner" />
-        <img class="p-remote-work__collage--4"
-             src="https://assets.ubuntu.com/v1/0513a9e4-Canonical2022_092%201.jpg"
-             alt="Employee attending engineering sprint talk" />
-      </div>
-      <div class="col-6 col-medium-3 u-vertically-center">
+    <div class="row--50-50">
+      <div class="col">
         <h2>
-          <a href="/careers">Explore the world with
-            <br class="u-hide--small" />
-          Canonical &dash; browse careers&nbsp;&rsaquo;</a>
+          An inside look at our sprints
         </h2>
       </div>
+      <div class="col">
+        <figure>
+          <div class="u-embedded-media u-no-margin--bottom">
+            <iframe class="u-embedded-media__element"
+                  width="1120"
+                  height="630"
+                  src="https://www.youtube.com/embed/9w6labLUOAI?si=RgXO2oU_DT8zx-7n"
+                  title="Remote work and collaboration at Canonical | An inside look at our Cape Town sprint"
+                  frameborder="0"
+                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                  referrerpolicy="strict-origin-when-cross-origin"
+                  allowfullscreen></iframe>
+          </div>
+          <figcaption class="u-text--muted" style="font-style: normal;">Discover our sprints in action in our video from Cape Town</figcaption>
+        </figure>
+        <p>
+          Company sprints enable our globally distributed teams to nurture relationships and get to know their colleagues in person, whilst exploring inspirational locations.
+        </p>
+        <p>
+          During sprints, we hear from different leaders in the business, host break-out sessions to plan across teams and get to practice our public speaking skills at our much-awaited lightning talks.
+        </p>
+      </div>
     </div>
   </section>
 
-  <section class="p-section">
-    <div class="u-fixed-width">
-      <hr class="p-rule" />
-    </div>
-    <div class="row">
-      <div class="col-6 col-medium-3 col-medium-3">
-        <h2>What team members say</h2>
-      </div>
-      <div class="col-6 col-medium-3">
-        <div class="p-section">
-          <h4>
-            <em>"I always wanted to work remotely, it's a huge quality of life leap. Canonical enables me to do that".</em>
-          </h4>
-        </div>
-        <div class="p-section">
-          <hr class="p-rule" />
-          <h4>
-            <em>"I get to work every day with people from all over the world, which is just amazing".</em>
-          </h4>
-        </div>
-        <div class="p-section">
-          <hr class="p-rule" />
-          <h4>
-            <em>"I love working from home but it's great to see the team during our in-person sprints. It makes working here extra special"</em>
-          </h4>
-        </div>
+  <section class="p-section--deep">
+    <div class="p-section--shallow">
+      <div class="row">
+        <hr class="p-rule" />
+        <h2>Sprints in action</h2>
       </div>
     </div>
-  </section>
-
-  <section class="p-strip is-deep" style="background-color: #fff;">
     <div class="u-fixed-width">
+      <div class="u-align--right u-sv1">
+        <a href="#"
+          id="carousel-previous"
+          class="p-carousel__previous"
+          style="text-decoration: unset">
+          <i class="p-icon--chevron-left">Previous image</i>
+        </a>
+        &nbsp;
+        <a href="#"
+          id="carousel-next"
+          class="p-carousel__next"
+          style="text-decoration: unset">
+          <i class="p-icon--chevron-right">Next image</i>
+        </a>
+      </div>
       <div class="p-section--shallow">
-        <h2 class="p-muted-heading">Join us</h2>
-        <h3 class="p-heading--2">
-          Be part of a company making a difference
-          <br class="u-hide--small" />
-          in every area of open source.
-        </h3>
+        <div class="p-carousel">
+          <div id="carousel_target">
+            <div class="p-carousel__cell">
+              <div class="p-image-container--3-2">
+                {{ image(url="https://assets.ubuntu.com/v1/464686c8-image%201.png",
+                    alt="",
+                    width="916",
+                    height="610",
+                    hi_def=True,
+                    attrs={"class": "p-image-container__image"},
+                    loading="lazy"
+                    ) | safe
+                }}
+              </div>
+            </div>
+            <div class="p-carousel__cell">
+              <div class="p-image-container--3-2">
+                {{ image(url="https://assets.ubuntu.com/v1/0b7d75df-image%202.png",
+                    alt="",
+                    width="916",
+                    height="610",
+                    hi_def=True,
+                    attrs={"class": "p-image-container__image"},
+                    loading="lazy"
+                    ) | safe
+                }}
+              </div>
+            </div>
+            <div class="p-carousel__cell">
+              <div class="p-image-container--3-2">
+                {{ image(url="https://assets.ubuntu.com/v1/eb6a9de4-image%203.png",
+                    alt="",
+                    width="916",
+                    height="610",
+                    hi_def=True,
+                    attrs={"class": "p-image-container__image"},
+                    loading="lazy"
+                    ) | safe
+                }}
+              </div>
+            </div>
+            <div class="p-carousel__cell">
+              <div class="p-image-container--3-2">
+                {{ image(url="https://assets.ubuntu.com/v1/fc1561cf-image%204.png",
+                    alt="",
+                    width="916",
+                    height="610",
+                    hi_def=True,
+                    attrs={"class": "p-image-container__image"},
+                    loading="lazy"
+                    ) | safe
+                }}
+              </div>
+            </div>
+            <div class="p-carousel__cell">
+              <div class="p-image-container--3-2">
+                {{ image(url="https://assets.ubuntu.com/v1/a88b5e7f-image%205.png",
+                    alt="",
+                    width="916",
+                    height="610",
+                    hi_def=True,
+                    attrs={"class": "p-image-container__image"},
+                    loading="lazy"
+                    ) | safe
+                }}
+              </div>
+            </div>
+            <div class="p-carousel__cell">
+              <div class="p-image-container--3-2">
+                {{ image(url="https://assets.ubuntu.com/v1/6c4e961d-image%206.png",
+                    alt="",
+                    width="916",
+                    height="610",
+                    hi_def=True,
+                    attrs={"class": "p-image-container__image"},
+                    loading="lazy"
+                    ) | safe
+                }}
+              </div>
+            </div>
+            <div class="p-carousel__cell">
+              <div class="p-image-container--3-2">
+                {{ image(url="https://assets.ubuntu.com/v1/dc46b134-image%207.png",
+                    alt="",
+                    width="916",
+                    height="610",
+                    hi_def=True,
+                    attrs={"class": "p-image-container__image"},
+                    loading="lazy"
+                    ) | safe
+                }}
+              </div>
+            </div>
+            <div class="p-carousel__cell">
+              <div class="p-image-container--3-2">
+                {{ image(url="https://assets.ubuntu.com/v1/0a5a4894-image%208.png",
+                    alt="",
+                    width="916",
+                    height="610",
+                    hi_def=True,
+                    attrs={"class": "p-image-container__image"},
+                    loading="lazy"
+                    ) | safe
+                }}
+              </div>
+            </div>
+            <div class="p-carousel__cell">
+              <div class="p-image-container--3-2">
+                {{ image(url="https://assets.ubuntu.com/v1/32116a30-image%209.png",
+                    alt="",
+                    width="916",
+                    height="610",
+                    hi_def=True,
+                    attrs={"class": "p-image-container__image"},
+                    loading="lazy"
+                    ) | safe
+                }}
+              </div>
+            </div>
+            <div class="p-carousel__cell">
+              <div class="p-image-container--3-2">
+                {{ image(url="https://assets.ubuntu.com/v1/8f77cc6c-image%2010.png",
+                    alt="",
+                    width="916",
+                    height="610",
+                    hi_def=True,
+                    attrs={"class": "p-image-container__image"},
+                    loading="lazy"
+                    ) | safe
+                }}
+              </div>
+            </div>
+            <div class="p-carousel__cell">
+              <div class="p-image-container--3-2">
+                {{ image(url="https://assets.ubuntu.com/v1/2a9d3ce1-image%2011.png",
+                    alt="",
+                    width="916",
+                    height="610",
+                    hi_def=True,
+                    attrs={"class": "p-image-container__image"},
+                    loading="lazy"
+                    ) | safe
+                }}
+              </div>
+            </div>
+            <div class="p-carousel__cell">
+              <div class="p-image-container--3-2">
+                {{ image(url="https://assets.ubuntu.com/v1/031a6e2d-image%2012.png",
+                    alt="",
+                    width="916",
+                    height="610",
+                    hi_def=True,
+                    attrs={"class": "p-image-container__image"},
+                    loading="lazy"
+                    ) | safe
+                }}
+              </div>
+            </div>
+
+            <div class="p-carousel__cell">
+              <div class="p-image-container--3-2">
+                {{ image(url="https://assets.ubuntu.com/v1/f207fae4-image%2013.png",
+                    alt="",
+                    width="916",
+                    height="610",
+                    hi_def=True,
+                    attrs={"class": "p-image-container__image"},
+                    loading="lazy"
+                    ) | safe
+                }}
+              </div>
+            </div>
+
+            <div class="p-carousel__cell">
+              <div class="p-image-container--3-2">
+                {{ image(url="https://assets.ubuntu.com/v1/685db13c-image%2014.png",
+                    alt="",
+                    width="916",
+                    height="610",
+                    hi_def=True,
+                    attrs={"class": "p-image-container__image"},
+                    loading="lazy"
+                    ) | safe
+                }}
+              </div>
+            </div>
+          </div>
+        </div>
       </div>
-      {% if vacancies %}
-        {% with form_styles="flex-direction: row" %}
-          {% include "careers/_search.html" %}
-        {% endwith %}
-      {% endif %}
     </div>
   </section>
 
-  {# djlint: off #}
+  <script src="{{ versioned_static('js/modules/leaflet/leaflet.js') }}"></script>
+
+  <script src="{{ versioned_static('js/modules/flickity/flickity.pkgd.min.js') }}"></script>
+
   <script>
-    const locations = {{sprint_locations | tojson}};
-    const isSprintMap = true;
+    initCarousel('#carousel_target', '#carousel-next', '#carousel-previous');
+    initMap("locations-map");
+
+    function initCarousel(carouselSelector, nextSelector, previousSelector) {
+      var nextButton = document.querySelector(nextSelector);
+      var previousButton = document.querySelector(previousSelector);
+      var carousel = new Flickity(carouselSelector, {
+        prevNextButtons: false,
+        wrapAround: true,
+        pageDots: false,
+        autoPlay: false,
+      });
+
+      if (nextButton) {
+        nextButton.addEventListener("click", function(e) {
+          e.preventDefault();
+          carousel.next();
+        });
+      }
+
+      if (previousButton) {
+        previousButton.addEventListener("click", function(e) {
+          e.preventDefault();
+          carousel.previous();
+        });
+      }
+    }
+
+    function initMap(mapSelector) {
+      const mapElement = document.getElementById(mapSelector);
+
+      if (!mapElement) {
+        return;
+      }
+
+      mapElement.style.height = "400px";
+      mapElement.style.zIndex = "1";
+
+      const map = L.map(mapSelector).setView([31.505, -0.09], 2);
+
+      // Set up the tile layer with grey canvas (using CartoDB Positron without labels)
+      L.tileLayer('https://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}.png').addTo(map);
+
+      const customIcon = L.icon({
+        iconUrl: "https://assets.ubuntu.com/v1/ea30540d-marker-icon.png",
+        iconRetinaUrl: "https://assets.ubuntu.com/v1/ed796590-marker-icon-2x.png",
+        iconSize: [20, 32.8],
+        iconAnchor: [12, 41],
+        popupAnchor: [1, -34]
+      });
+
+      const markersData = [
+          {
+              "country": "Canada",
+              "city": "Montreal",
+              "lat": 45.5031824,
+              "lon": -73.5698065
+          },
+          {
+              "country": "Canada",
+              "city": "Toronto",
+              "lat": 43.6534817,
+              "lon": -79.3839347
+          },
+          {
+              "country": "France",
+              "city": "Lyon",
+              "lat": 45.7578137,
+              "lon": 4.8320114
+          },
+          {
+              "country": "South Africa",
+              "city": "Cape Town",
+              "lat": -33.9288301,
+              "lon": 18.4172197
+          },
+          {
+              "country": "Germany",
+              "city": "Frankfurt",
+              "lat": 50.1106444,
+              "lon": 8.6820917
+          },
+          {
+              "country": "United Kingdom",
+              "city": "London",
+              "lat": 51.4893335,
+              "lon": -0.1440551
+          },
+          {
+              "country": "Latvia",
+              "city": "Riga",
+              "lat": 56.9493977,
+              "lon": 24.1051846
+          },
+          {
+              "country": "The Netherlands",
+              "city": "The Hague",
+              "lat": 52.0749456,
+              "lon": 4.2696802
+          },
+          {
+              "country": "Spain",
+              "city": "Madrid",
+              "lat": 40.4167047,
+              "lon": -3.7035825
+          },
+          {
+              "country": "Canada",
+              "city": "Vancouver",
+              "lat": 49.2608724,
+              "lon": -123.113952
+          },
+          {
+              "country": "Denmark",
+              "city": "Copenhagen",
+              "lat": 55.6867243,
+              "lon": 12.5700724
+          },
+          {
+              "country": "Czech Republic",
+              "city": "Prague",
+              "lat": 50.0874654,
+              "lon": 14.4212535
+          },
+      ];
+
+      markersData.forEach(function(marker) {
+        L.marker([marker.lat, marker.lon], { icon: customIcon })
+          .bindPopup(marker.city)
+          .addTo(map);
+      });
+    }
   </script>
-  {# djlint: on #}
-  <script defer src="{{ versioned_static('js/locations-map.js') }}"></script>
-  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCiUVShD6fwLGQ8_iF-sCclFkVQFCsazxc&callback=initMap&v=weekly"
-          defer></script>
 {% endblock %}
diff --git a/yarn.lock b/yarn.lock
index 44cbe2293..37fcda779 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2092,6 +2092,11 @@ esutils@^2.0.2:
   resolved "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz"
   integrity sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==
 
+ev-emitter@^2.0.0, ev-emitter@^2.1.2:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/ev-emitter/-/ev-emitter-2.1.2.tgz#91737a2deae9fa95453e7e86cfae976f8c3ced38"
+  integrity sha512-jQ5Ql18hdCQ4qS+RCrbLfz1n+Pags27q5TwMKvZyhp5hh2UULUYZUy1keqj6k6SYsdqIYjnmz7xyyEY0V67B8Q==
+
 eventemitter2@6.4.7:
   version "6.4.7"
   resolved "https://registry.npmjs.org/eventemitter2/-/eventemitter2-6.4.7.tgz"
@@ -2252,6 +2257,11 @@ find-up@^4.0.0, find-up@^4.1.0:
     locate-path "^5.0.0"
     path-exists "^4.0.0"
 
+fizzy-ui-utils@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/fizzy-ui-utils/-/fizzy-ui-utils-3.0.0.tgz#cc5e876eea263d3d92828a3144745dbd7b972fc8"
+  integrity sha512-uJj38QFQiJ/KCio5tiZhwAjIbTXSIgzBCKdKVbaYfLS053F6z23Nb0o1ZoO9gnxOQWN7BCc35jsvrCtAq3gY9g==
+
 flat-cache@^3.0.4:
   version "3.0.4"
   resolved "https://registry.npmjs.org/flat-cache/-/flat-cache-3.0.4.tgz"
@@ -2265,6 +2275,17 @@ flatted@^3.1.0:
   resolved "https://registry.npmjs.org/flatted/-/flatted-3.2.7.tgz"
   integrity sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ==
 
+flickity@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/flickity/-/flickity-3.0.0.tgz#568d14d17acece85e08eddc2589c968a458c8861"
+  integrity sha512-Xw4znhglA2LVSmka0yKmzb4+fLwXm13TuKmdG1HbUoZZL95J1ZMr4hAA3w69s+Z6q/c6CyBDM25JVwMqgF3rOg==
+  dependencies:
+    ev-emitter "^2.1.2"
+    fizzy-ui-utils "^3.0.0"
+    get-size "^3.0.0"
+    imagesloaded "^5.0.0"
+    unidragger "^3.0.0"
+
 for-each@^0.3.3:
   version "0.3.3"
   resolved "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz"
@@ -2384,6 +2405,11 @@ get-package-type@^0.1.0:
   resolved "https://registry.npmjs.org/get-package-type/-/get-package-type-0.1.0.tgz"
   integrity sha512-pjzuKtY64GYfWizNAJ0fr9VqttZkNiK2iS430LtIHzjBEr6bX8Am2zm4sW4Ro5wjWW5cAlRL1qAMTcXbjNAO2Q==
 
+get-size@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/get-size/-/get-size-3.0.0.tgz#00e39a8042a3de237b2fcf288eaf55d3f472417c"
+  integrity sha512-Y8aiXLq4leR7807UY0yuKEwif5s3kbVp1nTv+i4jBeoUzByTLKkLWu/HorS6/pB+7gsB0o7OTogC8AoOOeT0Hw==
+
 get-stdin@^9.0.0:
   version "9.0.0"
   resolved "https://registry.npmjs.org/get-stdin/-/get-stdin-9.0.0.tgz"
@@ -2685,6 +2711,13 @@ ignore@^5.2.0, ignore@^5.2.1:
   resolved "https://registry.npmjs.org/ignore/-/ignore-5.2.4.tgz"
   integrity sha512-MAb38BcSbH0eHNBxn7ql2NH/kX33OkB3lZ1BNdh7ENeRChHTYsTvWrMubiIAMNS2llXEEgZ1MUOBtXChP3kaFQ==
 
+imagesloaded@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/imagesloaded/-/imagesloaded-5.0.0.tgz#e614e5de482769dd7d571ca62d947d0d00183847"
+  integrity sha512-/0JGSubc1MTCoDKVmonLHgbifBWHdyLkun+R/151E1c5n79hiSxcd7cB7mPXFgojYu8xnRZv7GYxzKoxW8BetQ==
+  dependencies:
+    ev-emitter "^2.1.2"
+
 immutable@^4.0.0:
   version "4.3.0"
   resolved "https://registry.npmjs.org/immutable/-/immutable-4.3.0.tgz"
@@ -3544,6 +3577,11 @@ lazy-ass@^1.6.0:
   resolved "https://registry.npmjs.org/lazy-ass/-/lazy-ass-1.6.0.tgz"
   integrity sha512-cc8oEVoctTvsFZ/Oje/kGnHbpWHYBe8IAJe4C0QNc3t8uM/0Y8+erSz/7Y1ALuXTEZTMvxXwO6YbX1ey3ujiZw==
 
+leaflet@1.9.4:
+  version "1.9.4"
+  resolved "https://registry.yarnpkg.com/leaflet/-/leaflet-1.9.4.tgz#23fae724e282fa25745aff82ca4d394748db7d8d"
+  integrity sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA==
+
 leven@^3.1.0:
   version "3.1.0"
   resolved "https://registry.npmjs.org/leven/-/leven-3.1.0.tgz"
@@ -5066,6 +5104,13 @@ undici-types@~5.26.4:
   resolved "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz"
   integrity sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==
 
+unidragger@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/unidragger/-/unidragger-3.0.1.tgz#72b2e63f2571ca6e95a884b139dfec764e08c7f3"
+  integrity sha512-RngbGSwBFmqGBWjkaH+yB677uzR95blSQyxq6hYbrQCejH3Mx1nm8DVOuh3M9k2fQyTstWUG5qlgCnNqV/9jVw==
+  dependencies:
+    ev-emitter "^2.0.0"
+
 universalify@^0.2.0:
   version "0.2.0"
   resolved "https://registry.npmjs.org/universalify/-/universalify-0.2.0.tgz"


Reviews:
user: login: bartaz
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-05-22T11:53:29Z
user: login: bartaz
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-05-22T11:54:17Z
user: login: bartaz
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-05-22T11:56:26Z
user: login: muhammad-ali-pk
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-22T12:24:59Z
user: login: fasih-mehmood
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-22T12:46:29Z
user: login: muhammad-ali-pk
body: Thank you for the changes @fasih-mehmood. Just a couple small findings from QA.
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-23T05:52:29Z
user: login: muhammad-ali-pk
body: Thank you for the quick resolution! LGTM!
state: APPROVED
author_association: CONTRIBUTOR
submitted_at: 2025-05-23T06:37:18Z

Review comments:
diff_hunk: @@ -18,100 +18,117 @@
   <div class="u-fixed-width">
     <nav class="p-breadcrumbs" aria-label="Breadcrumbs">
       <ol class="p-breadcrumbs__items p-text--x-small-capitalised">
-        <li class="p-breadcrumbs__item ">
+        <li class="p-breadcrumbs__item">
           <a href="/careers">Careers</a>
         </li>
-        <li class="p-breadcrumbs__item ">
+        <li class="p-breadcrumbs__item">
           <a href="/careers/company-culture">Company culture</a>
         </li>
-        <li class="p-breadcrumbs__item ">Remote work</li>
+        <li class="p-breadcrumbs__item">Remote work</li>
       </ol>
     </nav>
     <h1 class="p-text--x-small-capitalised u-hide">Careers</h1>
     <hr class="p-rule" />
   </div>
 
-  <section class="p-section">
+  <section class="p-strip u-no-padding--top">
     <div class="row">
       <div class="col-6 col-medium-3">
-        <h1>Remote working</h1>
+        <h1 class="p-heading--2">
+          <strong>Remote work</strong>
+        </h1>
       </div>
       <div class="col-6 col-medium-3">
-        <h3 class="p-heading--2">We are remote but connected</h3>
-        <p>Canonical has been a fully distributed organization since its origin in 2004.</p>
-        <p>
-          Digital collaboration allows us to enjoy our home environment and work with the best in the world in our domain. We meet each other at least twice per year during in-person sprints to nurture cross-team relationships. These sprints are fully funded by Canonical, and take place at various locations around the world.
-        </p>
-      </div>
-    </div>
-  </section>
-
-  <section class="p-section">
-    <div class="u-fixed-width">
-      <hr class="p-rule" />
-    </div>
-    <div class="row">
-      <div class="col-6 col-medium-3">
-        <h2>We build trust</h2>
-      </div>
-      <div class="col-6 col-medium-3">
-        <p>
-          Zero commute means more time for the things you enjoy. At the same time, we have very high expectations of commitment and independent execution.
-        </p>
-        <p>We invest in people who are self-driven, motivated, and highly organized.</p>
-        <p>
-          We take our responsibility for the most critical elements of open infrastructure very seriously, and we are committed to quality in every aspect of our product and services.
-        </p>
-        <p>
-          <a href="/careers/company-culture">Read more about our tech culture&nbsp;&rsaquo;</a>
-        </p>
-      </div>
-    </div>
-  </section>
-
-  <section class="p-section">
-    <div class="u-fixed-width">
-      <hr class="p-rule" />
-    </div>
-    <div class="row">
-      <div class="col-6 col-medium-3">
-        <h2>We engineer excellence</h2>
-      </div>
-      <div class="col-6 col-medium-3">
-        <p>
-          We aspire to lead on the global stage. There’s no other way to describe it than hard work, hard challenges and hard competition.
-        </p>
-        <p>
-          You will need to show that you can compete in deeply challenging intellectual fields. Your colleagues are aiming for the top, and they depend on you to set the same standard in your area of responsibility. That’s tough but incredibly satisfying. We value those who take ownership of their area and take opportunities to be exceptional.
-        </p>
-        <p>
-          <a href="/careers/career-explorer">What kind of excellent are you&nbsp;&rsaquo;</a>
-        </p>
+        <div class="p-strip is-shallow u-no-padding--top">
+          <h2>We are remote but connected</h2>
+        </div>
+        <div class="p-section--shallow">
+          <p>Canonical has been a fully distributed organization since its origin in 2004.</p>
+          <p>
+            Our remote-first policy enables us to collaborate with the best in the world in our domain. Though most team members work remotely, we meet each other at least twice per year during in-person sprints to nurture cross-team relationships. These sprints are funded by Canonical, and take place at locations around the world.
+          </p>
+        </div>
+        <hr class="p-rule--muted" />
+        <a class="p-button--positive u-no-margin--bottom" href="/careers">
+          Careers with Canonical
+        </a>
       </div>
     </div>
   </section>
 
-  <section class="p-section">
+  <section class="p-strip u-no-padding--top">
     <div class="u-fixed-width">
       <hr class="p-rule" />
     </div>
-    <div class="row">
-      <div class="col-6 col-medium-3">
-        <h2>We travel</h2>
+    <div class="row--25-75">
+      <div class="col">
+        <h2>
+          Our work ethic
+        </h2>
       </div>
-      <div class="col-6 col-medium-3">
-        <p>
-          We optimize our team structure for time zone overlap. Collaboration and inspiration takes time to fully develop but leadership at Canonical means building cross-team relationships. We nurture those relationships through regular global summits which bring diverse teams or their leaders together.
-        </p>
-        <p>
-          We host these events around the world to discover great places to explore and appreciate in the process. Team events have taken place in Vancouver, Madrid, Riga, Cape Town, Prague, London, and many more.
-        </p>
+      <div class="col">
+        <div class="row u-no-padding--top u-no-padding--bottom">
+          <div class="col-3 col-medium-1">
+            <h3 class="p-heading--5">
+              We build trust
+            </h3>
+          </div>
+          <div class="col-6 col-medium-3">
+            <p>
+              Zero commute means more time for the things you enjoy. At the same time, we have very high expectations of commitment and independent execution.
+            </p>
+            <p>We invest in people who are self-driven, motivated, and highly organized.</p>
+            <p class="u-sv2">
+              We take our responsibility for the most critical elements of open infrastructure very seriously, and we are committed to quality in every aspect of our product and services.
+            </p>
+            <hr class="p-rule--muted" />
path: templates/careers/company-culture/remote-work.html
user: login: bartaz
body: You can use CTA block for sections like these.

This way you will have the muted border, and correct spacing out of the box.

https://vanillaframework.io/docs/patterns/cta-block
created_at: 2025-05-22T11:53:29Z
author_association: MEMBER
diff_hunk: @@ -131,107 +148,410 @@ <h3 class="p-heading--2">Past sprint locations</h3>
           </noscript>
         </div>
         <div class="row">
-          <figcaption class="col-6 col-medium-3 col-start-large-7">A sample of sprint locations from the past 5 years</figcaption>
+          <figcaption class="col-6 col-medium-3 col-start-medium-4 col-start-large-7 u-text--muted" style="font-style: normal;">A sample of sprint locations from the past 5 years</figcaption>
         </div>
       </figure>
     </div>
 
     <div class="row">
-      <div class="col-6 col-medium-3 col-start-large-7">
+      <div class="col-6 col-medium-3 col-start-medium-4 col-start-large-7">
         <p>
           As our customers transform their deepest and most important infrastructure to benefit from open source, they trust us to advise them and lead them to best practice. That also takes time on site, to whiteboard and to work shoulder to shoulder in their development halls and data centers. Many teams at Canonical travel for that deep customer presence.
         </p>
-        <p>
+        <p class="u-sv2">
           If you are excited to see the world, Canonical is a great place to be. We expect everybody at Canonical to be willing and able to travel for up to two weeks at a time, twice a year.
         </p>
+        <hr class="p-rule--muted" />
+        <p class="u-sv2">
+          <a href="/careers">Explore the world with Canonical - browse careers&nbsp;&rsaquo;</a>
+        </p>
       </div>
     </div>
   </section>
 
-  <section class="p-section">
-    <div class="u-fixed-width u-sv2">
-      <hr class="p-rule" />
+  <section class="p-strip u-no-padding--top">
+    <div class="u-fixed-width">
+      <hr class="p-rule">
     </div>
-    <div class="row">
-      <div class="col-6 col-medium-3 col-medium-3 p-remote-work__collage-container">
-        <img class="p-remote-work__collage--1"
-             src="https://assets.ubuntu.com/v1/c9c4f215-Rectangle%2099.jpg"
-             alt="Engineering sprint visits" />
-        <img class="p-remote-work__collage--2"
-             src="https://assets.ubuntu.com/v1/e272d998-Rectangle%20101.jpg"
-             alt="Engineering sprint webteam group photo" />
-        <img class="p-remote-work__collage--3"
-             src="https://assets.ubuntu.com/v1/7a4dd64e-Rectangle%2090.jpg"
-             alt="Engineering sprint team dinner" />
-        <img class="p-remote-work__collage--4"
-             src="https://assets.ubuntu.com/v1/0513a9e4-Canonical2022_092%201.jpg"
-             alt="Employee attending engineering sprint talk" />
-      </div>
-      <div class="col-6 col-medium-3 u-vertically-center">
+    <div class="row--50-50">
+      <div class="col">
         <h2>
-          <a href="/careers">Explore the world with
-            <br class="u-hide--small" />
-          Canonical &dash; browse careers&nbsp;&rsaquo;</a>
+          An inside look at our sprints
         </h2>
       </div>
+      <div class="col">
+        <figure>
+          <div class="u-embedded-media u-no-margin--bottom">
+            <iframe class="u-embedded-media__element"
+                  width="1120"
+                  height="630"
+                  src="https://www.youtube.com/embed/9w6labLUOAI?si=RgXO2oU_DT8zx-7n"
+                  title="Remote work and collaboration at Canonical | An inside look at our Cape Town sprint"
+                  frameborder="0"
+                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                  referrerpolicy="strict-origin-when-cross-origin"
+                  allowfullscreen></iframe>
+          </div>
+          <figcaption class="u-text--muted" style="font-style: normal;">Discover our sprints in action in our video from Cape Town</figcaption>
+        </figure>
+        <p>
+          Company sprints enable our globally distributed teams to nurture relationships and get to know their colleagues in person, whilst exploring inspirational locations.
+        </p>
+        <p>
+          During sprints, we hear from different leaders in the business, host break-out sessions to plan across teams and get to practice our public speaking skills at our much-awaited lightning talks.
+        </p>
+      </div>
     </div>
   </section>
 
-  <section class="p-section">
-    <div class="u-fixed-width">
-      <hr class="p-rule" />
-    </div>
-    <div class="row">
-      <div class="col-6 col-medium-3 col-medium-3">
-        <h2>What team members say</h2>
-      </div>
-      <div class="col-6 col-medium-3">
-        <div class="p-section">
-          <h4>
-            <em>"I always wanted to work remotely, it's a huge quality of life leap. Canonical enables me to do that".</em>
-          </h4>
-        </div>
-        <div class="p-section">
-          <hr class="p-rule" />
-          <h4>
-            <em>"I get to work every day with people from all over the world, which is just amazing".</em>
-          </h4>
-        </div>
-        <div class="p-section">
-          <hr class="p-rule" />
-          <h4>
-            <em>"I love working from home but it's great to see the team during our in-person sprints. It makes working here extra special"</em>
-          </h4>
-        </div>
+  <section class="p-section--deep">
+    <div class="p-section--shallow">
+      <div class="row">
+        <hr class="p-rule" />
+        <h2>Sprints in action</h2>
       </div>
     </div>
-  </section>
-
-  <section class="p-strip is-deep" style="background-color: #fff;">
     <div class="u-fixed-width">
+      <div class="u-align--right u-sv1">
+        <a href="#"
+          id="carousel-previous"
+          class="p-carousel__previous"
+          style="text-decoration: unset">
+          <i class="p-icon--chevron-left">Previous image</i>
+        </a>
+        &nbsp;
+        <a href="#"
+          id="carousel-next"
+          class="p-carousel__next"
+          style="text-decoration: unset">
+          <i class="p-icon--chevron-right">Next image</i>
+        </a>
+      </div>
       <div class="p-section--shallow">
-        <h2 class="p-muted-heading">Join us</h2>
-        <h3 class="p-heading--2">
-          Be part of a company making a difference
-          <br class="u-hide--small" />
-          in every area of open source.
-        </h3>
+        <div class="p-carousel">
+          <div id="carousel_target">
+            <div class="p-carousel__cell">
+              <div class="p-image-container--3-2">
+                {{ image(url="https://assets.ubuntu.com/v1/464686c8-image%201.png",
+                    alt="",
+                    width="916",
+                    height="610",
+                    hi_def=True,
+                    attrs={"class": "p-image-container__image"},
+                    loading="lazy"
+                    ) | safe
+                }}
+              </div>
+            </div>
+            <div class="p-carousel__cell">
+              <div class="p-image-container--3-2">
+                {{ image(url="https://assets.ubuntu.com/v1/0b7d75df-image%202.png",
+                    alt="",
+                    width="916",
+                    height="610",
+                    hi_def=True,
+                    attrs={"class": "p-image-container__image"},
+                    loading="lazy"
+                    ) | safe
+                }}
+              </div>
+            </div>
+            <div class="p-carousel__cell">
+              <div class="p-image-container--3-2">
+                {{ image(url="https://assets.ubuntu.com/v1/eb6a9de4-image%203.png",
+                    alt="",
+                    width="916",
+                    height="610",
+                    hi_def=True,
+                    attrs={"class": "p-image-container__image"},
+                    loading="lazy"
+                    ) | safe
+                }}
+              </div>
+            </div>
+            <div class="p-carousel__cell">
+              <div class="p-image-container--3-2">
+                {{ image(url="https://assets.ubuntu.com/v1/fc1561cf-image%204.png",
+                    alt="",
+                    width="916",
+                    height="610",
+                    hi_def=True,
+                    attrs={"class": "p-image-container__image"},
+                    loading="lazy"
+                    ) | safe
+                }}
+              </div>
+            </div>
+            <div class="p-carousel__cell">
+              <div class="p-image-container--3-2">
+                {{ image(url="https://assets.ubuntu.com/v1/a88b5e7f-image%205.png",
+                    alt="",
+                    width="916",
+                    height="610",
+                    hi_def=True,
+                    attrs={"class": "p-image-container__image"},
+                    loading="lazy"
+                    ) | safe
+                }}
+              </div>
+            </div>
+            <div class="p-carousel__cell">
+              <div class="p-image-container--3-2">
+                {{ image(url="https://assets.ubuntu.com/v1/6c4e961d-image%206.png",
+                    alt="",
+                    width="916",
+                    height="610",
+                    hi_def=True,
+                    attrs={"class": "p-image-container__image"},
+                    loading="lazy"
+                    ) | safe
+                }}
+              </div>
+            </div>
+            <div class="p-carousel__cell">
+              <div class="p-image-container--3-2">
+                {{ image(url="https://assets.ubuntu.com/v1/dc46b134-image%207.png",
+                    alt="",
+                    width="916",
+                    height="610",
+                    hi_def=True,
+                    attrs={"class": "p-image-container__image"},
+                    loading="lazy"
+                    ) | safe
+                }}
+              </div>
+            </div>
+            <div class="p-carousel__cell">
+              <div class="p-image-container--3-2">
+                {{ image(url="https://assets.ubuntu.com/v1/0a5a4894-image%208.png",
+                    alt="",
+                    width="916",
+                    height="610",
+                    hi_def=True,
+                    attrs={"class": "p-image-container__image"},
+                    loading="lazy"
+                    ) | safe
+                }}
+              </div>
+            </div>
+            <div class="p-carousel__cell">
+              <div class="p-image-container--3-2">
+                {{ image(url="https://assets.ubuntu.com/v1/32116a30-image%209.png",
+                    alt="",
+                    width="916",
+                    height="610",
+                    hi_def=True,
+                    attrs={"class": "p-image-container__image"},
+                    loading="lazy"
+                    ) | safe
+                }}
+              </div>
+            </div>
+            <div class="p-carousel__cell">
+              <div class="p-image-container--3-2">
+                {{ image(url="https://assets.ubuntu.com/v1/8f77cc6c-image%2010.png",
+                    alt="",
+                    width="916",
+                    height="610",
+                    hi_def=True,
+                    attrs={"class": "p-image-container__image"},
+                    loading="lazy"
+                    ) | safe
+                }}
+              </div>
+            </div>
+            <div class="p-carousel__cell">
+              <div class="p-image-container--3-2">
+                {{ image(url="https://assets.ubuntu.com/v1/2a9d3ce1-image%2011.png",
+                    alt="",
+                    width="916",
+                    height="610",
+                    hi_def=True,
+                    attrs={"class": "p-image-container__image"},
+                    loading="lazy"
+                    ) | safe
+                }}
+              </div>
+            </div>
+            <div class="p-carousel__cell">
+              <div class="p-image-container--3-2">
+                {{ image(url="https://assets.ubuntu.com/v1/031a6e2d-image%2012.png",
+                    alt="",
+                    width="916",
+                    height="610",
+                    hi_def=True,
+                    attrs={"class": "p-image-container__image"},
+                    loading="lazy"
+                    ) | safe
+                }}
+              </div>
+            </div>
+
+            <div class="p-carousel__cell">
+              <div class="p-image-container--3-2">
+                {{ image(url="https://assets.ubuntu.com/v1/f207fae4-image%2013.png",
+                    alt="",
+                    width="916",
+                    height="610",
+                    hi_def=True,
+                    attrs={"class": "p-image-container__image"},
+                    loading="lazy"
+                    ) | safe
+                }}
+              </div>
+            </div>
+
+            <div class="p-carousel__cell">
+              <div class="p-image-container--3-2">
+                {{ image(url="https://assets.ubuntu.com/v1/685db13c-image%2014.png",
+                    alt="",
+                    width="916",
+                    height="610",
+                    hi_def=True,
+                    attrs={"class": "p-image-container__image"},
+                    loading="lazy"
+                    ) | safe
+                }}
+              </div>
+            </div>
+          </div>
+        </div>
       </div>
-      {% if vacancies %}
-        {% with form_styles="flex-direction: row" %}
-          {% include "careers/_search.html" %}
-        {% endwith %}
-      {% endif %}
     </div>
   </section>
 
-  {# djlint: off #}
+  <script src="{{ versioned_static('js/modules/leaflet/leaflet.js') }}"></script>
+
+  <script src="{{ versioned_static('js/modules/flickity/flickity.pkgd.min.js') }}"></script>
+
   <script>
-    const locations = {{sprint_locations | tojson}};
-    const isSprintMap = true;
+    initCarousel('#carousel_target', '#carousel-next', '#carousel-previous');
+    initMap("locations-map");
+
+    function initCarousel(carouselSelector, nextSelector, previousSelector) {
+      var nextButton = document.querySelector(nextSelector);
+      var previousButton = document.querySelector(previousSelector);
+      var carousel = new Flickity(carouselSelector, {
+        prevNextButtons: false,
+        wrapAround: true,
+        pageDots: false,
+        autoPlay: false,
+      });
+
+      if (nextButton) {
+        nextButton.addEventListener("click", function(e) {
+          e.preventDefault();
+          carousel.next();
+        });
+      }
+
+      if (previousButton) {
+        previousButton.addEventListener("click", function(e) {
+          e.preventDefault();
+          carousel.previous();
+        });
+      }
+    }
+
+    function initMap(mapSelector) {
+      const map = L.map(mapSelector).setView([31.505, -0.09], 2); // Default view set to [51.505, -0.09] for center
+
+      // Set up the tile layer with grey canvas (using CartoDB Positron without labels)
+      L.tileLayer('https://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}.png').addTo(map);
+
+      // Custom orange marker icon (using existing marker-icon.png and marker-icon-2x.png)
+      const customIcon = L.icon({
+        iconUrl: "{{ url_for('static', filename = 'img/marker-icon.png') }}",  // Path to regular icon
path: templates/careers/company-culture/remote-work.html
user: login: bartaz
body: Couldn't these images be served from asset server instead?
created_at: 2025-05-22T11:54:17Z
author_association: MEMBER
diff_hunk: @@ -131,107 +148,410 @@ <h3 class="p-heading--2">Past sprint locations</h3>
           </noscript>
         </div>
         <div class="row">
-          <figcaption class="col-6 col-medium-3 col-start-large-7">A sample of sprint locations from the past 5 years</figcaption>
+          <figcaption class="col-6 col-medium-3 col-start-medium-4 col-start-large-7 u-text--muted" style="font-style: normal;">A sample of sprint locations from the past 5 years</figcaption>
         </div>
       </figure>
     </div>
 
     <div class="row">
-      <div class="col-6 col-medium-3 col-start-large-7">
+      <div class="col-6 col-medium-3 col-start-medium-4 col-start-large-7">
         <p>
           As our customers transform their deepest and most important infrastructure to benefit from open source, they trust us to advise them and lead them to best practice. That also takes time on site, to whiteboard and to work shoulder to shoulder in their development halls and data centers. Many teams at Canonical travel for that deep customer presence.
         </p>
-        <p>
+        <p class="u-sv2">
           If you are excited to see the world, Canonical is a great place to be. We expect everybody at Canonical to be willing and able to travel for up to two weeks at a time, twice a year.
         </p>
+        <hr class="p-rule--muted" />
+        <p class="u-sv2">
+          <a href="/careers">Explore the world with Canonical - browse careers&nbsp;&rsaquo;</a>
+        </p>
       </div>
     </div>
   </section>
 
-  <section class="p-section">
-    <div class="u-fixed-width u-sv2">
-      <hr class="p-rule" />
+  <section class="p-strip u-no-padding--top">
+    <div class="u-fixed-width">
+      <hr class="p-rule">
     </div>
-    <div class="row">
-      <div class="col-6 col-medium-3 col-medium-3 p-remote-work__collage-container">
-        <img class="p-remote-work__collage--1"
-             src="https://assets.ubuntu.com/v1/c9c4f215-Rectangle%2099.jpg"
-             alt="Engineering sprint visits" />
-        <img class="p-remote-work__collage--2"
-             src="https://assets.ubuntu.com/v1/e272d998-Rectangle%20101.jpg"
-             alt="Engineering sprint webteam group photo" />
-        <img class="p-remote-work__collage--3"
-             src="https://assets.ubuntu.com/v1/7a4dd64e-Rectangle%2090.jpg"
-             alt="Engineering sprint team dinner" />
-        <img class="p-remote-work__collage--4"
-             src="https://assets.ubuntu.com/v1/0513a9e4-Canonical2022_092%201.jpg"
-             alt="Employee attending engineering sprint talk" />
-      </div>
-      <div class="col-6 col-medium-3 u-vertically-center">
+    <div class="row--50-50">
+      <div class="col">
         <h2>
-          <a href="/careers">Explore the world with
-            <br class="u-hide--small" />
-          Canonical &dash; browse careers&nbsp;&rsaquo;</a>
+          An inside look at our sprints
         </h2>
       </div>
+      <div class="col">
+        <figure>
+          <div class="u-embedded-media u-no-margin--bottom">
+            <iframe class="u-embedded-media__element"
+                  width="1120"
+                  height="630"
+                  src="https://www.youtube.com/embed/9w6labLUOAI?si=RgXO2oU_DT8zx-7n"
+                  title="Remote work and collaboration at Canonical | An inside look at our Cape Town sprint"
+                  frameborder="0"
+                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                  referrerpolicy="strict-origin-when-cross-origin"
+                  allowfullscreen></iframe>
+          </div>
+          <figcaption class="u-text--muted" style="font-style: normal;">Discover our sprints in action in our video from Cape Town</figcaption>
+        </figure>
+        <p>
+          Company sprints enable our globally distributed teams to nurture relationships and get to know their colleagues in person, whilst exploring inspirational locations.
+        </p>
+        <p>
+          During sprints, we hear from different leaders in the business, host break-out sessions to plan across teams and get to practice our public speaking skills at our much-awaited lightning talks.
+        </p>
+      </div>
     </div>
   </section>
 
-  <section class="p-section">
-    <div class="u-fixed-width">
-      <hr class="p-rule" />
-    </div>
-    <div class="row">
-      <div class="col-6 col-medium-3 col-medium-3">
-        <h2>What team members say</h2>
-      </div>
-      <div class="col-6 col-medium-3">
-        <div class="p-section">
-          <h4>
-            <em>"I always wanted to work remotely, it's a huge quality of life leap. Canonical enables me to do that".</em>
-          </h4>
-        </div>
-        <div class="p-section">
-          <hr class="p-rule" />
-          <h4>
-            <em>"I get to work every day with people from all over the world, which is just amazing".</em>
-          </h4>
-        </div>
-        <div class="p-section">
-          <hr class="p-rule" />
-          <h4>
-            <em>"I love working from home but it's great to see the team during our in-person sprints. It makes working here extra special"</em>
-          </h4>
-        </div>
+  <section class="p-section--deep">
+    <div class="p-section--shallow">
+      <div class="row">
+        <hr class="p-rule" />
+        <h2>Sprints in action</h2>
       </div>
     </div>
-  </section>
-
-  <section class="p-strip is-deep" style="background-color: #fff;">
     <div class="u-fixed-width">
+      <div class="u-align--right u-sv1">
+        <a href="#"
+          id="carousel-previous"
+          class="p-carousel__previous"
+          style="text-decoration: unset">
+          <i class="p-icon--chevron-left">Previous image</i>
+        </a>
+        &nbsp;
+        <a href="#"
+          id="carousel-next"
+          class="p-carousel__next"
+          style="text-decoration: unset">
+          <i class="p-icon--chevron-right">Next image</i>
+        </a>
+      </div>
       <div class="p-section--shallow">
-        <h2 class="p-muted-heading">Join us</h2>
-        <h3 class="p-heading--2">
-          Be part of a company making a difference
-          <br class="u-hide--small" />
-          in every area of open source.
-        </h3>
+        <div class="p-carousel">
+          <div id="carousel_target">
+            <div class="p-carousel__cell">
+              <div class="p-image-container--3-2">
+                {{ image(url="https://assets.ubuntu.com/v1/464686c8-image%201.png",
+                    alt="",
+                    width="916",
+                    height="610",
+                    hi_def=True,
+                    attrs={"class": "p-image-container__image"},
+                    loading="lazy"
+                    ) | safe
+                }}
+              </div>
+            </div>
+            <div class="p-carousel__cell">
+              <div class="p-image-container--3-2">
+                {{ image(url="https://assets.ubuntu.com/v1/0b7d75df-image%202.png",
+                    alt="",
+                    width="916",
+                    height="610",
+                    hi_def=True,
+                    attrs={"class": "p-image-container__image"},
+                    loading="lazy"
+                    ) | safe
+                }}
+              </div>
+            </div>
+            <div class="p-carousel__cell">
+              <div class="p-image-container--3-2">
+                {{ image(url="https://assets.ubuntu.com/v1/eb6a9de4-image%203.png",
+                    alt="",
+                    width="916",
+                    height="610",
+                    hi_def=True,
+                    attrs={"class": "p-image-container__image"},
+                    loading="lazy"
+                    ) | safe
+                }}
+              </div>
+            </div>
+            <div class="p-carousel__cell">
+              <div class="p-image-container--3-2">
+                {{ image(url="https://assets.ubuntu.com/v1/fc1561cf-image%204.png",
+                    alt="",
+                    width="916",
+                    height="610",
+                    hi_def=True,
+                    attrs={"class": "p-image-container__image"},
+                    loading="lazy"
+                    ) | safe
+                }}
+              </div>
+            </div>
+            <div class="p-carousel__cell">
+              <div class="p-image-container--3-2">
+                {{ image(url="https://assets.ubuntu.com/v1/a88b5e7f-image%205.png",
+                    alt="",
+                    width="916",
+                    height="610",
+                    hi_def=True,
+                    attrs={"class": "p-image-container__image"},
+                    loading="lazy"
+                    ) | safe
+                }}
+              </div>
+            </div>
+            <div class="p-carousel__cell">
+              <div class="p-image-container--3-2">
+                {{ image(url="https://assets.ubuntu.com/v1/6c4e961d-image%206.png",
+                    alt="",
+                    width="916",
+                    height="610",
+                    hi_def=True,
+                    attrs={"class": "p-image-container__image"},
+                    loading="lazy"
+                    ) | safe
+                }}
+              </div>
+            </div>
+            <div class="p-carousel__cell">
+              <div class="p-image-container--3-2">
+                {{ image(url="https://assets.ubuntu.com/v1/dc46b134-image%207.png",
+                    alt="",
+                    width="916",
+                    height="610",
+                    hi_def=True,
+                    attrs={"class": "p-image-container__image"},
+                    loading="lazy"
+                    ) | safe
+                }}
+              </div>
+            </div>
+            <div class="p-carousel__cell">
+              <div class="p-image-container--3-2">
+                {{ image(url="https://assets.ubuntu.com/v1/0a5a4894-image%208.png",
+                    alt="",
+                    width="916",
+                    height="610",
+                    hi_def=True,
+                    attrs={"class": "p-image-container__image"},
+                    loading="lazy"
+                    ) | safe
+                }}
+              </div>
+            </div>
+            <div class="p-carousel__cell">
+              <div class="p-image-container--3-2">
+                {{ image(url="https://assets.ubuntu.com/v1/32116a30-image%209.png",
+                    alt="",
+                    width="916",
+                    height="610",
+                    hi_def=True,
+                    attrs={"class": "p-image-container__image"},
+                    loading="lazy"
+                    ) | safe
+                }}
+              </div>
+            </div>
+            <div class="p-carousel__cell">
+              <div class="p-image-container--3-2">
+                {{ image(url="https://assets.ubuntu.com/v1/8f77cc6c-image%2010.png",
+                    alt="",
+                    width="916",
+                    height="610",
+                    hi_def=True,
+                    attrs={"class": "p-image-container__image"},
+                    loading="lazy"
+                    ) | safe
+                }}
+              </div>
+            </div>
+            <div class="p-carousel__cell">
+              <div class="p-image-container--3-2">
+                {{ image(url="https://assets.ubuntu.com/v1/2a9d3ce1-image%2011.png",
+                    alt="",
+                    width="916",
+                    height="610",
+                    hi_def=True,
+                    attrs={"class": "p-image-container__image"},
+                    loading="lazy"
+                    ) | safe
+                }}
+              </div>
+            </div>
+            <div class="p-carousel__cell">
+              <div class="p-image-container--3-2">
+                {{ image(url="https://assets.ubuntu.com/v1/031a6e2d-image%2012.png",
+                    alt="",
+                    width="916",
+                    height="610",
+                    hi_def=True,
+                    attrs={"class": "p-image-container__image"},
+                    loading="lazy"
+                    ) | safe
+                }}
+              </div>
+            </div>
+
+            <div class="p-carousel__cell">
+              <div class="p-image-container--3-2">
+                {{ image(url="https://assets.ubuntu.com/v1/f207fae4-image%2013.png",
+                    alt="",
+                    width="916",
+                    height="610",
+                    hi_def=True,
+                    attrs={"class": "p-image-container__image"},
+                    loading="lazy"
+                    ) | safe
+                }}
+              </div>
+            </div>
+
+            <div class="p-carousel__cell">
+              <div class="p-image-container--3-2">
+                {{ image(url="https://assets.ubuntu.com/v1/685db13c-image%2014.png",
+                    alt="",
+                    width="916",
+                    height="610",
+                    hi_def=True,
+                    attrs={"class": "p-image-container__image"},
+                    loading="lazy"
+                    ) | safe
+                }}
+              </div>
+            </div>
+          </div>
+        </div>
       </div>
-      {% if vacancies %}
-        {% with form_styles="flex-direction: row" %}
-          {% include "careers/_search.html" %}
-        {% endwith %}
-      {% endif %}
     </div>
   </section>
 
-  {# djlint: off #}
+  <script src="{{ versioned_static('js/modules/leaflet/leaflet.js') }}"></script>
+
+  <script src="{{ versioned_static('js/modules/flickity/flickity.pkgd.min.js') }}"></script>
+
   <script>
-    const locations = {{sprint_locations | tojson}};
-    const isSprintMap = true;
+    initCarousel('#carousel_target', '#carousel-next', '#carousel-previous');
+    initMap("locations-map");
+
+    function initCarousel(carouselSelector, nextSelector, previousSelector) {
+      var nextButton = document.querySelector(nextSelector);
+      var previousButton = document.querySelector(previousSelector);
+      var carousel = new Flickity(carouselSelector, {
+        prevNextButtons: false,
+        wrapAround: true,
+        pageDots: false,
+        autoPlay: false,
+      });
+
+      if (nextButton) {
+        nextButton.addEventListener("click", function(e) {
+          e.preventDefault();
+          carousel.next();
+        });
+      }
+
+      if (previousButton) {
+        previousButton.addEventListener("click", function(e) {
+          e.preventDefault();
+          carousel.previous();
+        });
+      }
+    }
+
+    function initMap(mapSelector) {
+      const map = L.map(mapSelector).setView([31.505, -0.09], 2); // Default view set to [51.505, -0.09] for center
+
+      // Set up the tile layer with grey canvas (using CartoDB Positron without labels)
+      L.tileLayer('https://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}.png').addTo(map);
path: templates/careers/company-culture/remote-work.html
user: login: bartaz
body: Does it need to depend on external resource? We risk that the map will fail because of third party.
It would be best to have all required assets in our control (either via npm dependency, asset on our server, or a code in repo).
created_at: 2025-05-22T11:56:26Z
author_association: MEMBER
diff_hunk: @@ -4,10 +4,10 @@
   https://docs.google.com/document/d/1391OL7xQec1SY9HFkv80DFwACbdndCIk-N_sFzAXkPU
 {% endblock meta_copydoc %}
 
-{% block title %}Remote work | Careers{% endblock %}
+{% block title %}Careers | Remote work and company culture{% endblock %}
 
 {% block meta_description %}
path: templates/careers/company-culture/remote-work.html
user: login: muhammad-ali-pk
body: Please add meta_keywords as described in the copydoc
created_at: 2025-05-22T12:02:17Z
author_association: CONTRIBUTOR
diff_hunk: @@ -18,100 +18,117 @@
   <div class="u-fixed-width">
     <nav class="p-breadcrumbs" aria-label="Breadcrumbs">
       <ol class="p-breadcrumbs__items p-text--x-small-capitalised">
-        <li class="p-breadcrumbs__item ">
+        <li class="p-breadcrumbs__item">
           <a href="/careers">Careers</a>
         </li>
-        <li class="p-breadcrumbs__item ">
+        <li class="p-breadcrumbs__item">
           <a href="/careers/company-culture">Company culture</a>
         </li>
-        <li class="p-breadcrumbs__item ">Remote work</li>
+        <li class="p-breadcrumbs__item">Remote work</li>
       </ol>
     </nav>
     <h1 class="p-text--x-small-capitalised u-hide">Careers</h1>
     <hr class="p-rule" />
   </div>
 
-  <section class="p-section">
+  <section class="p-strip u-no-padding--top">
     <div class="row">
       <div class="col-6 col-medium-3">
-        <h1>Remote working</h1>
+        <h1 class="p-heading--2">
+          <strong>Remote work</strong>
+        </h1>
       </div>
       <div class="col-6 col-medium-3">
-        <h3 class="p-heading--2">We are remote but connected</h3>
-        <p>Canonical has been a fully distributed organization since its origin in 2004.</p>
-        <p>
-          Digital collaboration allows us to enjoy our home environment and work with the best in the world in our domain. We meet each other at least twice per year during in-person sprints to nurture cross-team relationships. These sprints are fully funded by Canonical, and take place at various locations around the world.
-        </p>
-      </div>
-    </div>
-  </section>
-
-  <section class="p-section">
-    <div class="u-fixed-width">
-      <hr class="p-rule" />
-    </div>
-    <div class="row">
-      <div class="col-6 col-medium-3">
-        <h2>We build trust</h2>
-      </div>
-      <div class="col-6 col-medium-3">
-        <p>
-          Zero commute means more time for the things you enjoy. At the same time, we have very high expectations of commitment and independent execution.
-        </p>
-        <p>We invest in people who are self-driven, motivated, and highly organized.</p>
-        <p>
-          We take our responsibility for the most critical elements of open infrastructure very seriously, and we are committed to quality in every aspect of our product and services.
-        </p>
-        <p>
-          <a href="/careers/company-culture">Read more about our tech culture&nbsp;&rsaquo;</a>
-        </p>
-      </div>
-    </div>
-  </section>
-
-  <section class="p-section">
-    <div class="u-fixed-width">
-      <hr class="p-rule" />
-    </div>
-    <div class="row">
-      <div class="col-6 col-medium-3">
-        <h2>We engineer excellence</h2>
-      </div>
-      <div class="col-6 col-medium-3">
-        <p>
-          We aspire to lead on the global stage. There’s no other way to describe it than hard work, hard challenges and hard competition.
-        </p>
-        <p>
-          You will need to show that you can compete in deeply challenging intellectual fields. Your colleagues are aiming for the top, and they depend on you to set the same standard in your area of responsibility. That’s tough but incredibly satisfying. We value those who take ownership of their area and take opportunities to be exceptional.
-        </p>
-        <p>
-          <a href="/careers/career-explorer">What kind of excellent are you&nbsp;&rsaquo;</a>
-        </p>
+        <div class="p-strip is-shallow u-no-padding--top">
+          <h2>We are remote but connected</h2>
+        </div>
+        <div class="p-section--shallow">
+          <p>Canonical has been a fully distributed organization since its origin in 2004.</p>
+          <p>
+            Our remote-first policy enables us to collaborate with the best in the world in our domain. Though most team members work remotely, we meet each other at least twice per year during in-person sprints to nurture cross-team relationships. These sprints are funded by Canonical, and take place at locations around the world.
+          </p>
+        </div>
+        <hr class="p-rule--muted" />
+        <a class="p-button--positive u-no-margin--bottom" href="/careers">
+          Careers with Canonical
+        </a>
       </div>
     </div>
   </section>
path: templates/careers/company-culture/remote-work.html
user: login: muhammad-ali-pk
body: We try to use Vanilla Patterns where we can, to reduce custom implementations.
The hero section here can be implemented with this [Vanilla Hero Pattern](https://vanillaframework.io/docs/patterns/hero).
created_at: 2025-05-22T12:04:28Z
author_association: CONTRIBUTOR
diff_hunk: @@ -18,100 +18,117 @@
   <div class="u-fixed-width">
     <nav class="p-breadcrumbs" aria-label="Breadcrumbs">
       <ol class="p-breadcrumbs__items p-text--x-small-capitalised">
-        <li class="p-breadcrumbs__item ">
+        <li class="p-breadcrumbs__item">
           <a href="/careers">Careers</a>
         </li>
-        <li class="p-breadcrumbs__item ">
+        <li class="p-breadcrumbs__item">
           <a href="/careers/company-culture">Company culture</a>
         </li>
-        <li class="p-breadcrumbs__item ">Remote work</li>
+        <li class="p-breadcrumbs__item">Remote work</li>
       </ol>
     </nav>
     <h1 class="p-text--x-small-capitalised u-hide">Careers</h1>
     <hr class="p-rule" />
   </div>
 
-  <section class="p-section">
+  <section class="p-strip u-no-padding--top">
     <div class="row">
       <div class="col-6 col-medium-3">
-        <h1>Remote working</h1>
+        <h1 class="p-heading--2">
+          <strong>Remote work</strong>
+        </h1>
       </div>
       <div class="col-6 col-medium-3">
-        <h3 class="p-heading--2">We are remote but connected</h3>
-        <p>Canonical has been a fully distributed organization since its origin in 2004.</p>
-        <p>
-          Digital collaboration allows us to enjoy our home environment and work with the best in the world in our domain. We meet each other at least twice per year during in-person sprints to nurture cross-team relationships. These sprints are fully funded by Canonical, and take place at various locations around the world.
-        </p>
-      </div>
-    </div>
-  </section>
-
-  <section class="p-section">
-    <div class="u-fixed-width">
-      <hr class="p-rule" />
-    </div>
-    <div class="row">
-      <div class="col-6 col-medium-3">
-        <h2>We build trust</h2>
-      </div>
-      <div class="col-6 col-medium-3">
-        <p>
-          Zero commute means more time for the things you enjoy. At the same time, we have very high expectations of commitment and independent execution.
-        </p>
-        <p>We invest in people who are self-driven, motivated, and highly organized.</p>
-        <p>
-          We take our responsibility for the most critical elements of open infrastructure very seriously, and we are committed to quality in every aspect of our product and services.
-        </p>
-        <p>
-          <a href="/careers/company-culture">Read more about our tech culture&nbsp;&rsaquo;</a>
-        </p>
-      </div>
-    </div>
-  </section>
-
-  <section class="p-section">
-    <div class="u-fixed-width">
-      <hr class="p-rule" />
-    </div>
-    <div class="row">
-      <div class="col-6 col-medium-3">
-        <h2>We engineer excellence</h2>
-      </div>
-      <div class="col-6 col-medium-3">
-        <p>
-          We aspire to lead on the global stage. There’s no other way to describe it than hard work, hard challenges and hard competition.
-        </p>
-        <p>
-          You will need to show that you can compete in deeply challenging intellectual fields. Your colleagues are aiming for the top, and they depend on you to set the same standard in your area of responsibility. That’s tough but incredibly satisfying. We value those who take ownership of their area and take opportunities to be exceptional.
-        </p>
-        <p>
-          <a href="/careers/career-explorer">What kind of excellent are you&nbsp;&rsaquo;</a>
-        </p>
+        <div class="p-strip is-shallow u-no-padding--top">
+          <h2>We are remote but connected</h2>
+        </div>
+        <div class="p-section--shallow">
+          <p>Canonical has been a fully distributed organization since its origin in 2004.</p>
+          <p>
+            Our remote-first policy enables us to collaborate with the best in the world in our domain. Though most team members work remotely, we meet each other at least twice per year during in-person sprints to nurture cross-team relationships. These sprints are funded by Canonical, and take place at locations around the world.
+          </p>
+        </div>
+        <hr class="p-rule--muted" />
+        <a class="p-button--positive u-no-margin--bottom" href="/careers">
+          Careers with Canonical
+        </a>
       </div>
     </div>
   </section>
 
-  <section class="p-section">
+  <section class="p-strip u-no-padding--top">
path: templates/careers/company-culture/remote-work.html
user: login: muhammad-ali-pk
body: ```suggestion
  <section class="p-section">
```
We use p-strip class on sections only if they have a different background, as mentioned in the [docs](https://vanillaframework.io/docs/patterns/section#regular-sections).
Please use `p-section` here, which will also eliminate top padding.
created_at: 2025-05-22T12:14:28Z
author_association: CONTRIBUTOR
diff_hunk: @@ -18,100 +18,117 @@
   <div class="u-fixed-width">
     <nav class="p-breadcrumbs" aria-label="Breadcrumbs">
       <ol class="p-breadcrumbs__items p-text--x-small-capitalised">
-        <li class="p-breadcrumbs__item ">
+        <li class="p-breadcrumbs__item">
           <a href="/careers">Careers</a>
         </li>
-        <li class="p-breadcrumbs__item ">
+        <li class="p-breadcrumbs__item">
           <a href="/careers/company-culture">Company culture</a>
         </li>
-        <li class="p-breadcrumbs__item ">Remote work</li>
+        <li class="p-breadcrumbs__item">Remote work</li>
       </ol>
     </nav>
     <h1 class="p-text--x-small-capitalised u-hide">Careers</h1>
     <hr class="p-rule" />
   </div>
 
-  <section class="p-section">
+  <section class="p-strip u-no-padding--top">
     <div class="row">
       <div class="col-6 col-medium-3">
-        <h1>Remote working</h1>
+        <h1 class="p-heading--2">
+          <strong>Remote work</strong>
+        </h1>
       </div>
       <div class="col-6 col-medium-3">
-        <h3 class="p-heading--2">We are remote but connected</h3>
-        <p>Canonical has been a fully distributed organization since its origin in 2004.</p>
-        <p>
-          Digital collaboration allows us to enjoy our home environment and work with the best in the world in our domain. We meet each other at least twice per year during in-person sprints to nurture cross-team relationships. These sprints are fully funded by Canonical, and take place at various locations around the world.
-        </p>
-      </div>
-    </div>
-  </section>
-
-  <section class="p-section">
-    <div class="u-fixed-width">
-      <hr class="p-rule" />
-    </div>
-    <div class="row">
-      <div class="col-6 col-medium-3">
-        <h2>We build trust</h2>
-      </div>
-      <div class="col-6 col-medium-3">
-        <p>
-          Zero commute means more time for the things you enjoy. At the same time, we have very high expectations of commitment and independent execution.
-        </p>
-        <p>We invest in people who are self-driven, motivated, and highly organized.</p>
-        <p>
-          We take our responsibility for the most critical elements of open infrastructure very seriously, and we are committed to quality in every aspect of our product and services.
-        </p>
-        <p>
-          <a href="/careers/company-culture">Read more about our tech culture&nbsp;&rsaquo;</a>
-        </p>
-      </div>
-    </div>
-  </section>
-
-  <section class="p-section">
-    <div class="u-fixed-width">
-      <hr class="p-rule" />
-    </div>
-    <div class="row">
-      <div class="col-6 col-medium-3">
-        <h2>We engineer excellence</h2>
-      </div>
-      <div class="col-6 col-medium-3">
-        <p>
-          We aspire to lead on the global stage. There’s no other way to describe it than hard work, hard challenges and hard competition.
-        </p>
-        <p>
-          You will need to show that you can compete in deeply challenging intellectual fields. Your colleagues are aiming for the top, and they depend on you to set the same standard in your area of responsibility. That’s tough but incredibly satisfying. We value those who take ownership of their area and take opportunities to be exceptional.
-        </p>
-        <p>
-          <a href="/careers/career-explorer">What kind of excellent are you&nbsp;&rsaquo;</a>
-        </p>
+        <div class="p-strip is-shallow u-no-padding--top">
+          <h2>We are remote but connected</h2>
+        </div>
+        <div class="p-section--shallow">
+          <p>Canonical has been a fully distributed organization since its origin in 2004.</p>
+          <p>
+            Our remote-first policy enables us to collaborate with the best in the world in our domain. Though most team members work remotely, we meet each other at least twice per year during in-person sprints to nurture cross-team relationships. These sprints are funded by Canonical, and take place at locations around the world.
+          </p>
+        </div>
+        <hr class="p-rule--muted" />
+        <a class="p-button--positive u-no-margin--bottom" href="/careers">
+          Careers with Canonical
+        </a>
       </div>
     </div>
   </section>
 
-  <section class="p-section">
+  <section class="p-strip u-no-padding--top">
     <div class="u-fixed-width">
       <hr class="p-rule" />
     </div>
-    <div class="row">
-      <div class="col-6 col-medium-3">
-        <h2>We travel</h2>
+    <div class="row--25-75">
+      <div class="col">
+        <h2>
+          Our work ethic
+        </h2>
       </div>
-      <div class="col-6 col-medium-3">
-        <p>
-          We optimize our team structure for time zone overlap. Collaboration and inspiration takes time to fully develop but leadership at Canonical means building cross-team relationships. We nurture those relationships through regular global summits which bring diverse teams or their leaders together.
-        </p>
-        <p>
-          We host these events around the world to discover great places to explore and appreciate in the process. Team events have taken place in Vancouver, Madrid, Riga, Cape Town, Prague, London, and many more.
-        </p>
+      <div class="col">
+        <div class="row u-no-padding--top u-no-padding--bottom">
path: templates/careers/company-culture/remote-work.html
user: login: muhammad-ali-pk
body: Are these classes `u-no-padding--top u-no-padding--bottom` necessary here? It looks like there's no change without them either.
created_at: 2025-05-22T12:16:16Z
author_association: CONTRIBUTOR
diff_hunk: @@ -18,100 +18,117 @@
   <div class="u-fixed-width">
     <nav class="p-breadcrumbs" aria-label="Breadcrumbs">
       <ol class="p-breadcrumbs__items p-text--x-small-capitalised">
-        <li class="p-breadcrumbs__item ">
+        <li class="p-breadcrumbs__item">
           <a href="/careers">Careers</a>
         </li>
-        <li class="p-breadcrumbs__item ">
+        <li class="p-breadcrumbs__item">
           <a href="/careers/company-culture">Company culture</a>
         </li>
-        <li class="p-breadcrumbs__item ">Remote work</li>
+        <li class="p-breadcrumbs__item">Remote work</li>
       </ol>
     </nav>
     <h1 class="p-text--x-small-capitalised u-hide">Careers</h1>
     <hr class="p-rule" />
   </div>
 
-  <section class="p-section">
+  <section class="p-strip u-no-padding--top">
     <div class="row">
       <div class="col-6 col-medium-3">
-        <h1>Remote working</h1>
+        <h1 class="p-heading--2">
+          <strong>Remote work</strong>
+        </h1>
       </div>
       <div class="col-6 col-medium-3">
-        <h3 class="p-heading--2">We are remote but connected</h3>
-        <p>Canonical has been a fully distributed organization since its origin in 2004.</p>
-        <p>
-          Digital collaboration allows us to enjoy our home environment and work with the best in the world in our domain. We meet each other at least twice per year during in-person sprints to nurture cross-team relationships. These sprints are fully funded by Canonical, and take place at various locations around the world.
-        </p>
-      </div>
-    </div>
-  </section>
-
-  <section class="p-section">
-    <div class="u-fixed-width">
-      <hr class="p-rule" />
-    </div>
-    <div class="row">
-      <div class="col-6 col-medium-3">
-        <h2>We build trust</h2>
-      </div>
-      <div class="col-6 col-medium-3">
-        <p>
-          Zero commute means more time for the things you enjoy. At the same time, we have very high expectations of commitment and independent execution.
-        </p>
-        <p>We invest in people who are self-driven, motivated, and highly organized.</p>
-        <p>
-          We take our responsibility for the most critical elements of open infrastructure very seriously, and we are committed to quality in every aspect of our product and services.
-        </p>
-        <p>
-          <a href="/careers/company-culture">Read more about our tech culture&nbsp;&rsaquo;</a>
-        </p>
-      </div>
-    </div>
-  </section>
-
-  <section class="p-section">
-    <div class="u-fixed-width">
-      <hr class="p-rule" />
-    </div>
-    <div class="row">
-      <div class="col-6 col-medium-3">
-        <h2>We engineer excellence</h2>
-      </div>
-      <div class="col-6 col-medium-3">
-        <p>
-          We aspire to lead on the global stage. There’s no other way to describe it than hard work, hard challenges and hard competition.
-        </p>
-        <p>
-          You will need to show that you can compete in deeply challenging intellectual fields. Your colleagues are aiming for the top, and they depend on you to set the same standard in your area of responsibility. That’s tough but incredibly satisfying. We value those who take ownership of their area and take opportunities to be exceptional.
-        </p>
-        <p>
-          <a href="/careers/career-explorer">What kind of excellent are you&nbsp;&rsaquo;</a>
-        </p>
+        <div class="p-strip is-shallow u-no-padding--top">
+          <h2>We are remote but connected</h2>
+        </div>
+        <div class="p-section--shallow">
+          <p>Canonical has been a fully distributed organization since its origin in 2004.</p>
+          <p>
+            Our remote-first policy enables us to collaborate with the best in the world in our domain. Though most team members work remotely, we meet each other at least twice per year during in-person sprints to nurture cross-team relationships. These sprints are funded by Canonical, and take place at locations around the world.
+          </p>
+        </div>
+        <hr class="p-rule--muted" />
+        <a class="p-button--positive u-no-margin--bottom" href="/careers">
+          Careers with Canonical
+        </a>
       </div>
     </div>
   </section>
 
-  <section class="p-section">
+  <section class="p-strip u-no-padding--top">
     <div class="u-fixed-width">
       <hr class="p-rule" />
     </div>
-    <div class="row">
-      <div class="col-6 col-medium-3">
-        <h2>We travel</h2>
+    <div class="row--25-75">
+      <div class="col">
+        <h2>
+          Our work ethic
+        </h2>
       </div>
-      <div class="col-6 col-medium-3">
-        <p>
-          We optimize our team structure for time zone overlap. Collaboration and inspiration takes time to fully develop but leadership at Canonical means building cross-team relationships. We nurture those relationships through regular global summits which bring diverse teams or their leaders together.
-        </p>
-        <p>
-          We host these events around the world to discover great places to explore and appreciate in the process. Team events have taken place in Vancouver, Madrid, Riga, Cape Town, Prague, London, and many more.
-        </p>
+      <div class="col">
+        <div class="row u-no-padding--top u-no-padding--bottom">
+          <div class="col-3 col-medium-1">
+            <h3 class="p-heading--5">
+              We build trust
+            </h3>
+          </div>
+          <div class="col-6 col-medium-3">
+            <p>
+              Zero commute means more time for the things you enjoy. At the same time, we have very high expectations of commitment and independent execution.
+            </p>
+            <p>We invest in people who are self-driven, motivated, and highly organized.</p>
+            <p class="u-sv2">
+              We take our responsibility for the most critical elements of open infrastructure very seriously, and we are committed to quality in every aspect of our product and services.
+            </p>
+            <hr class="p-rule--muted" />
+            <p class="u-sv2">
+              <a href="/careers/company-culture">Read more about our tech culture&nbsp;&rsaquo;</a>
+            </p>
+          </div>
+        </div>
+        <hr class="p-rule--muted" />
+        <div class="row u-no-padding--top u-no-padding--bottom">
+          <div class="col-3 col-medium-1">
+            <h3 class="p-heading--5">
+              We engineer excellence
+            </h3>
+          </div>
+          <div class="col-6 col-medium-3">
+            <p>
+              We aspire to lead on the global stage. There’s no other way to describe it than hard work, hard challenges, and hard competition.
+            </p>
+            <p class="u-sv2">
+              You will need to show that you can compete in deeply challenging intellectual fields. Your colleagues are aiming for the top, and they depend on you to set the same standard in your area of responsibility. We value those who take ownership of their area and take opportunities to be exceptional.
+            </p>
+            <hr class="p-rule--muted" />
+            <p class="u-sv2">
+              <a href="/careers/start">Try our career explorer&nbsp;&rsaquo;</a>
+            </p>
path: templates/careers/company-culture/remote-work.html
user: login: muhammad-ali-pk
body: Same thing here as Bartek mentioned, using cta block will help with out of the box spacing, so we might not need u-sv2 classes on paragraphs.
created_at: 2025-05-22T12:20:22Z
author_association: CONTRIBUTOR
diff_hunk: @@ -131,107 +148,410 @@ <h3 class="p-heading--2">Past sprint locations</h3>
           </noscript>
         </div>
         <div class="row">
-          <figcaption class="col-6 col-medium-3 col-start-large-7">A sample of sprint locations from the past 5 years</figcaption>
+          <figcaption class="col-6 col-medium-3 col-start-medium-4 col-start-large-7 u-text--muted" style="font-style: normal;">A sample of sprint locations from the past 5 years</figcaption>
         </div>
       </figure>
     </div>
 
     <div class="row">
-      <div class="col-6 col-medium-3 col-start-large-7">
+      <div class="col-6 col-medium-3 col-start-medium-4 col-start-large-7">
         <p>
           As our customers transform their deepest and most important infrastructure to benefit from open source, they trust us to advise them and lead them to best practice. That also takes time on site, to whiteboard and to work shoulder to shoulder in their development halls and data centers. Many teams at Canonical travel for that deep customer presence.
         </p>
-        <p>
+        <p class="u-sv2">
           If you are excited to see the world, Canonical is a great place to be. We expect everybody at Canonical to be willing and able to travel for up to two weeks at a time, twice a year.
         </p>
+        <hr class="p-rule--muted" />
+        <p class="u-sv2">
+          <a href="/careers">Explore the world with Canonical - browse careers&nbsp;&rsaquo;</a>
+        </p>
       </div>
     </div>
   </section>
 
-  <section class="p-section">
-    <div class="u-fixed-width u-sv2">
-      <hr class="p-rule" />
+  <section class="p-strip u-no-padding--top">
path: templates/careers/company-culture/remote-work.html
user: login: muhammad-ali-pk
body: ```suggestion
  <section class="p-section">
```
created_at: 2025-05-22T12:22:51Z
author_association: CONTRIBUTOR
diff_hunk: @@ -131,107 +148,410 @@ <h3 class="p-heading--2">Past sprint locations</h3>
           </noscript>
         </div>
         <div class="row">
-          <figcaption class="col-6 col-medium-3 col-start-large-7">A sample of sprint locations from the past 5 years</figcaption>
+          <figcaption class="col-6 col-medium-3 col-start-medium-4 col-start-large-7 u-text--muted" style="font-style: normal;">A sample of sprint locations from the past 5 years</figcaption>
         </div>
       </figure>
     </div>
 
     <div class="row">
-      <div class="col-6 col-medium-3 col-start-large-7">
+      <div class="col-6 col-medium-3 col-start-medium-4 col-start-large-7">
         <p>
           As our customers transform their deepest and most important infrastructure to benefit from open source, they trust us to advise them and lead them to best practice. That also takes time on site, to whiteboard and to work shoulder to shoulder in their development halls and data centers. Many teams at Canonical travel for that deep customer presence.
         </p>
-        <p>
+        <p class="u-sv2">
           If you are excited to see the world, Canonical is a great place to be. We expect everybody at Canonical to be willing and able to travel for up to two weeks at a time, twice a year.
         </p>
+        <hr class="p-rule--muted" />
+        <p class="u-sv2">
+          <a href="/careers">Explore the world with Canonical - browse careers&nbsp;&rsaquo;</a>
+        </p>
       </div>
     </div>
   </section>
 
-  <section class="p-section">
-    <div class="u-fixed-width u-sv2">
-      <hr class="p-rule" />
+  <section class="p-strip u-no-padding--top">
+    <div class="u-fixed-width">
+      <hr class="p-rule">
     </div>
-    <div class="row">
-      <div class="col-6 col-medium-3 col-medium-3 p-remote-work__collage-container">
-        <img class="p-remote-work__collage--1"
-             src="https://assets.ubuntu.com/v1/c9c4f215-Rectangle%2099.jpg"
-             alt="Engineering sprint visits" />
-        <img class="p-remote-work__collage--2"
-             src="https://assets.ubuntu.com/v1/e272d998-Rectangle%20101.jpg"
-             alt="Engineering sprint webteam group photo" />
-        <img class="p-remote-work__collage--3"
-             src="https://assets.ubuntu.com/v1/7a4dd64e-Rectangle%2090.jpg"
-             alt="Engineering sprint team dinner" />
-        <img class="p-remote-work__collage--4"
-             src="https://assets.ubuntu.com/v1/0513a9e4-Canonical2022_092%201.jpg"
-             alt="Employee attending engineering sprint talk" />
-      </div>
-      <div class="col-6 col-medium-3 u-vertically-center">
+    <div class="row--50-50">
+      <div class="col">
         <h2>
-          <a href="/careers">Explore the world with
-            <br class="u-hide--small" />
-          Canonical &dash; browse careers&nbsp;&rsaquo;</a>
+          An inside look at our sprints
         </h2>
       </div>
+      <div class="col">
+        <figure>
+          <div class="u-embedded-media u-no-margin--bottom">
+            <iframe class="u-embedded-media__element"
+                  width="1120"
+                  height="630"
+                  src="https://www.youtube.com/embed/9w6labLUOAI?si=RgXO2oU_DT8zx-7n"
+                  title="Remote work and collaboration at Canonical | An inside look at our Cape Town sprint"
+                  frameborder="0"
+                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                  referrerpolicy="strict-origin-when-cross-origin"
+                  allowfullscreen></iframe>
+          </div>
+          <figcaption class="u-text--muted" style="font-style: normal;">Discover our sprints in action in our video from Cape Town</figcaption>
+        </figure>
+        <p>
+          Company sprints enable our globally distributed teams to nurture relationships and get to know their colleagues in person, whilst exploring inspirational locations.
+        </p>
+        <p>
+          During sprints, we hear from different leaders in the business, host break-out sessions to plan across teams and get to practice our public speaking skills at our much-awaited lightning talks.
+        </p>
+      </div>
     </div>
   </section>
 
-  <section class="p-section">
-    <div class="u-fixed-width">
-      <hr class="p-rule" />
-    </div>
-    <div class="row">
-      <div class="col-6 col-medium-3 col-medium-3">
-        <h2>What team members say</h2>
-      </div>
-      <div class="col-6 col-medium-3">
-        <div class="p-section">
-          <h4>
-            <em>"I always wanted to work remotely, it's a huge quality of life leap. Canonical enables me to do that".</em>
-          </h4>
-        </div>
-        <div class="p-section">
-          <hr class="p-rule" />
-          <h4>
-            <em>"I get to work every day with people from all over the world, which is just amazing".</em>
-          </h4>
-        </div>
-        <div class="p-section">
-          <hr class="p-rule" />
-          <h4>
-            <em>"I love working from home but it's great to see the team during our in-person sprints. It makes working here extra special"</em>
-          </h4>
-        </div>
+  <section class="p-section--deep">
+    <div class="p-section--shallow">
+      <div class="row">
+        <hr class="p-rule" />
+        <h2>Sprints in action</h2>
       </div>
     </div>
-  </section>
-
-  <section class="p-strip is-deep" style="background-color: #fff;">
     <div class="u-fixed-width">
+      <div class="u-align--right u-sv1">
+        <a href="#"
+          id="carousel-previous"
+          class="p-carousel__previous"
+          style="text-decoration: unset">
+          <i class="p-icon--chevron-left">Previous image</i>
+        </a>
+        &nbsp;
+        <a href="#"
+          id="carousel-next"
+          class="p-carousel__next"
+          style="text-decoration: unset">
+          <i class="p-icon--chevron-right">Next image</i>
+        </a>
+      </div>
       <div class="p-section--shallow">
-        <h2 class="p-muted-heading">Join us</h2>
-        <h3 class="p-heading--2">
-          Be part of a company making a difference
-          <br class="u-hide--small" />
-          in every area of open source.
-        </h3>
+        <div class="p-carousel">
+          <div id="carousel_target">
+            <div class="p-carousel__cell">
+              <div class="p-image-container--3-2">
+                {{ image(url="https://assets.ubuntu.com/v1/464686c8-image%201.png",
+                    alt="",
+                    width="916",
+                    height="610",
+                    hi_def=True,
+                    attrs={"class": "p-image-container__image"},
+                    loading="lazy"
+                    ) | safe
+                }}
+              </div>
+            </div>
+            <div class="p-carousel__cell">
+              <div class="p-image-container--3-2">
+                {{ image(url="https://assets.ubuntu.com/v1/0b7d75df-image%202.png",
+                    alt="",
+                    width="916",
+                    height="610",
+                    hi_def=True,
+                    attrs={"class": "p-image-container__image"},
+                    loading="lazy"
+                    ) | safe
+                }}
+              </div>
+            </div>
+            <div class="p-carousel__cell">
+              <div class="p-image-container--3-2">
+                {{ image(url="https://assets.ubuntu.com/v1/eb6a9de4-image%203.png",
+                    alt="",
+                    width="916",
+                    height="610",
+                    hi_def=True,
+                    attrs={"class": "p-image-container__image"},
+                    loading="lazy"
+                    ) | safe
+                }}
+              </div>
+            </div>
+            <div class="p-carousel__cell">
+              <div class="p-image-container--3-2">
+                {{ image(url="https://assets.ubuntu.com/v1/fc1561cf-image%204.png",
+                    alt="",
+                    width="916",
+                    height="610",
+                    hi_def=True,
+                    attrs={"class": "p-image-container__image"},
+                    loading="lazy"
+                    ) | safe
+                }}
+              </div>
+            </div>
+            <div class="p-carousel__cell">
+              <div class="p-image-container--3-2">
+                {{ image(url="https://assets.ubuntu.com/v1/a88b5e7f-image%205.png",
+                    alt="",
+                    width="916",
+                    height="610",
+                    hi_def=True,
+                    attrs={"class": "p-image-container__image"},
+                    loading="lazy"
+                    ) | safe
+                }}
+              </div>
+            </div>
+            <div class="p-carousel__cell">
+              <div class="p-image-container--3-2">
+                {{ image(url="https://assets.ubuntu.com/v1/6c4e961d-image%206.png",
+                    alt="",
+                    width="916",
+                    height="610",
+                    hi_def=True,
+                    attrs={"class": "p-image-container__image"},
+                    loading="lazy"
+                    ) | safe
+                }}
+              </div>
+            </div>
+            <div class="p-carousel__cell">
+              <div class="p-image-container--3-2">
+                {{ image(url="https://assets.ubuntu.com/v1/dc46b134-image%207.png",
+                    alt="",
+                    width="916",
+                    height="610",
+                    hi_def=True,
+                    attrs={"class": "p-image-container__image"},
+                    loading="lazy"
+                    ) | safe
+                }}
+              </div>
+            </div>
+            <div class="p-carousel__cell">
+              <div class="p-image-container--3-2">
+                {{ image(url="https://assets.ubuntu.com/v1/0a5a4894-image%208.png",
+                    alt="",
+                    width="916",
+                    height="610",
+                    hi_def=True,
+                    attrs={"class": "p-image-container__image"},
+                    loading="lazy"
+                    ) | safe
+                }}
+              </div>
+            </div>
+            <div class="p-carousel__cell">
+              <div class="p-image-container--3-2">
+                {{ image(url="https://assets.ubuntu.com/v1/32116a30-image%209.png",
+                    alt="",
+                    width="916",
+                    height="610",
+                    hi_def=True,
+                    attrs={"class": "p-image-container__image"},
+                    loading="lazy"
+                    ) | safe
+                }}
+              </div>
+            </div>
+            <div class="p-carousel__cell">
+              <div class="p-image-container--3-2">
+                {{ image(url="https://assets.ubuntu.com/v1/8f77cc6c-image%2010.png",
+                    alt="",
+                    width="916",
+                    height="610",
+                    hi_def=True,
+                    attrs={"class": "p-image-container__image"},
+                    loading="lazy"
+                    ) | safe
+                }}
+              </div>
+            </div>
+            <div class="p-carousel__cell">
+              <div class="p-image-container--3-2">
+                {{ image(url="https://assets.ubuntu.com/v1/2a9d3ce1-image%2011.png",
+                    alt="",
+                    width="916",
+                    height="610",
+                    hi_def=True,
+                    attrs={"class": "p-image-container__image"},
+                    loading="lazy"
+                    ) | safe
+                }}
+              </div>
+            </div>
+            <div class="p-carousel__cell">
+              <div class="p-image-container--3-2">
+                {{ image(url="https://assets.ubuntu.com/v1/031a6e2d-image%2012.png",
+                    alt="",
+                    width="916",
+                    height="610",
+                    hi_def=True,
+                    attrs={"class": "p-image-container__image"},
+                    loading="lazy"
+                    ) | safe
+                }}
+              </div>
+            </div>
+
+            <div class="p-carousel__cell">
+              <div class="p-image-container--3-2">
+                {{ image(url="https://assets.ubuntu.com/v1/f207fae4-image%2013.png",
+                    alt="",
+                    width="916",
+                    height="610",
+                    hi_def=True,
+                    attrs={"class": "p-image-container__image"},
+                    loading="lazy"
+                    ) | safe
+                }}
+              </div>
+            </div>
+
+            <div class="p-carousel__cell">
+              <div class="p-image-container--3-2">
+                {{ image(url="https://assets.ubuntu.com/v1/685db13c-image%2014.png",
+                    alt="",
+                    width="916",
+                    height="610",
+                    hi_def=True,
+                    attrs={"class": "p-image-container__image"},
+                    loading="lazy"
+                    ) | safe
+                }}
+              </div>
+            </div>
+          </div>
+        </div>
       </div>
-      {% if vacancies %}
-        {% with form_styles="flex-direction: row" %}
-          {% include "careers/_search.html" %}
-        {% endwith %}
-      {% endif %}
     </div>
   </section>
 
-  {# djlint: off #}
+  <script src="{{ versioned_static('js/modules/leaflet/leaflet.js') }}"></script>
+
+  <script src="{{ versioned_static('js/modules/flickity/flickity.pkgd.min.js') }}"></script>
+
   <script>
-    const locations = {{sprint_locations | tojson}};
-    const isSprintMap = true;
+    initCarousel('#carousel_target', '#carousel-next', '#carousel-previous');
+    initMap("locations-map");
+
+    function initCarousel(carouselSelector, nextSelector, previousSelector) {
+      var nextButton = document.querySelector(nextSelector);
+      var previousButton = document.querySelector(previousSelector);
+      var carousel = new Flickity(carouselSelector, {
+        prevNextButtons: false,
+        wrapAround: true,
+        pageDots: false,
+        autoPlay: false,
+      });
+
+      if (nextButton) {
+        nextButton.addEventListener("click", function(e) {
+          e.preventDefault();
+          carousel.next();
+        });
+      }
+
+      if (previousButton) {
+        previousButton.addEventListener("click", function(e) {
+          e.preventDefault();
+          carousel.previous();
+        });
+      }
+    }
+
+    function initMap(mapSelector) {
+      const map = L.map(mapSelector).setView([31.505, -0.09], 2); // Default view set to [51.505, -0.09] for center
+
+      // Set up the tile layer with grey canvas (using CartoDB Positron without labels)
+      L.tileLayer('https://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}.png').addTo(map);
path: templates/careers/company-culture/remote-work.html
user: login: fasih-mehmood
body: > Does it need to depend on external resource?

Yes.

> It would be best to have all required assets in our control

It's not really straightforward. The images that are fetched are different depending on the location on the map that we're zooming in and how much we're zooming in/out.

![Screencastfrom2025-05-2217-21-51-ezgif com-speed](https://github.com/user-attachments/assets/d2f3ce67-b8b3-4f94-bdcd-b4e9a98cc18c)

Also this map is from https://github.com/lyubomir-popov/pin-map
created_at: 2025-05-22T12:46:29Z
author_association: CONTRIBUTOR
diff_hunk: @@ -54,6 +59,19 @@ $p-small-lh-diff: map-get($line-heights, default-text) -
 @include canonical-p-navigation-tab-panel;
 @include canonical-p-navigation-dropdown-content;
 @include canonical-p-navigation-mobile;
+@include sprint-carousel;
+
+.p-section__u-no-padding--top {
+  h1,
+  .p-heading--2,
+  .p-section--hero {
+    @extend .u-no-padding--top;
+  }
+}
path: static/sass/styles.scss
user: login: muhammad-ali-pk
body: This results in very tight stacking of h1 and h2 on medium/small screens
![image](https://github.com/user-attachments/assets/f3631e56-33e0-4a87-ae8b-fc5e7073d9d4)

created_at: 2025-05-23T05:48:03Z
author_association: CONTRIBUTOR
diff_hunk: @@ -18,100 +22,112 @@
   <div class="u-fixed-width">
     <nav class="p-breadcrumbs" aria-label="Breadcrumbs">
       <ol class="p-breadcrumbs__items p-text--x-small-capitalised">
-        <li class="p-breadcrumbs__item ">
+        <li class="p-breadcrumbs__item">
           <a href="/careers">Careers</a>
         </li>
-        <li class="p-breadcrumbs__item ">
+        <li class="p-breadcrumbs__item">
           <a href="/careers/company-culture">Company culture</a>
         </li>
-        <li class="p-breadcrumbs__item ">Remote work</li>
+        <li class="p-breadcrumbs__item">Remote work</li>
       </ol>
     </nav>
     <h1 class="p-text--x-small-capitalised u-hide">Careers</h1>
     <hr class="p-rule" />
   </div>
 
-  <section class="p-section">
-    <div class="row">
-      <div class="col-6 col-medium-3">
-        <h1>Remote working</h1>
-      </div>
-      <div class="col-6 col-medium-3">
-        <h3 class="p-heading--2">We are remote but connected</h3>
-        <p>Canonical has been a fully distributed organization since its origin in 2004.</p>
-        <p>
-          Digital collaboration allows us to enjoy our home environment and work with the best in the world in our domain. We meet each other at least twice per year during in-person sprints to nurture cross-team relationships. These sprints are fully funded by Canonical, and take place at various locations around the world.
-        </p>
-      </div>
-    </div>
-  </section>
-
-  <section class="p-section">
-    <div class="u-fixed-width">
-      <hr class="p-rule" />
-    </div>
-    <div class="row">
-      <div class="col-6 col-medium-3">
-        <h2>We build trust</h2>
-      </div>
-      <div class="col-6 col-medium-3">
-        <p>
-          Zero commute means more time for the things you enjoy. At the same time, we have very high expectations of commitment and independent execution.
-        </p>
-        <p>We invest in people who are self-driven, motivated, and highly organized.</p>
-        <p>
-          We take our responsibility for the most critical elements of open infrastructure very seriously, and we are committed to quality in every aspect of our product and services.
-        </p>
-        <p>
-          <a href="/careers/company-culture">Read more about our tech culture&nbsp;&rsaquo;</a>
-        </p>
-      </div>
-    </div>
-  </section>
-
-  <section class="p-section">
-    <div class="u-fixed-width">
-      <hr class="p-rule" />
-    </div>
-    <div class="row">
-      <div class="col-6 col-medium-3">
-        <h2>We engineer excellence</h2>
-      </div>
-      <div class="col-6 col-medium-3">
-        <p>
-          We aspire to lead on the global stage. There’s no other way to describe it than hard work, hard challenges and hard competition.
-        </p>
-        <p>
-          You will need to show that you can compete in deeply challenging intellectual fields. Your colleagues are aiming for the top, and they depend on you to set the same standard in your area of responsibility. That’s tough but incredibly satisfying. We value those who take ownership of their area and take opportunities to be exceptional.
-        </p>
-        <p>
-          <a href="/careers/career-explorer">What kind of excellent are you&nbsp;&rsaquo;</a>
-        </p>
-      </div>
-    </div>
-  </section>
+  <div class="p-section__u-no-padding--top">
+    {% call(slot) vf_hero(
+      title_text='Remote work',
+      subtitle_text='We are remote but connected',
+      layout='50/50'
+    ) -%}
+    {%- if slot == 'description' -%}
+      <p>
+        Canonical has been a fully distributed organization since its origin in 2004.
+      </p>
+      <p>
+        Our remote-first policy enables us to collaborate with the best in the world in our domain. Though most team members work remotely, we meet each other at least twice per year during in-person sprints to nurture cross-team relationships. These sprints are funded by Canonical, and take place at locations around the world.
+      </p>
+    {%- endif -%}
+    {%- if slot == 'cta' -%}
+      <a class="p-button--positive u-no-margin--bottom" href="/careers">
+        Careers with Canonical
+      </a>
+    {%- endif -%}
+    {% endcall -%}
+  </div>
 
   <section class="p-section">
     <div class="u-fixed-width">
       <hr class="p-rule" />
     </div>
-    <div class="row">
-      <div class="col-6 col-medium-3">
-        <h2>We travel</h2>
+    <div class="row--25-75">
+      <div class="col">
+        <h2>
+          Our work ethic
+        </h2>
       </div>
-      <div class="col-6 col-medium-3">
-        <p>
-          We optimize our team structure for time zone overlap. Collaboration and inspiration takes time to fully develop but leadership at Canonical means building cross-team relationships. We nurture those relationships through regular global summits which bring diverse teams or their leaders together.
-        </p>
-        <p>
-          We host these events around the world to discover great places to explore and appreciate in the process. Team events have taken place in Vancouver, Madrid, Riga, Cape Town, Prague, London, and many more.
-        </p>
+      <div class="col">
+        <div class="row">
+          <div class="col-3 col-medium-1">
+            <h3 class="p-heading--5">
+              We build trust
+            </h3>
+          </div>
+          <div class="col-6 col-medium-3">
+            <p>
+              Zero commute means more time for the things you enjoy. At the same time, we have very high expectations of commitment and independent execution.
+            </p>
+            <p>We invest in people who are self-driven, motivated, and highly organized.</p>
+            <p class="u-sv2">
+              We take our responsibility for the most critical elements of open infrastructure very seriously, and we are committed to quality in every aspect of our product and services.
+            </p>
+            <div class="p-cta-block">
+              <a href="/careers/company-culture">Read more about our tech culture&nbsp;&rsaquo;</a>
+            </div>
+          </div>
+        </div>
+        <hr class="p-rule--muted" />
+        <div class="row">
+          <div class="col-3 col-medium-1">
+            <h3 class="p-heading--5">
+              We engineer excellence
+            </h3>
+          </div>
+          <div class="col-6 col-medium-3">
+            <p>
+              We aspire to lead on the global stage. There’s no other way to describe it than hard work, hard challenges, and hard competition.
+            </p>
+            <p class="u-sv2">
+              You will need to show that you can compete in deeply challenging intellectual fields. Your colleagues are aiming for the top, and they depend on you to set the same standard in your area of responsibility. We value those who take ownership of their area and take opportunities to be exceptional.
+            </p>
+            <div class="p-cta-block">
+              <a href="/careers/start">Try our career explorer&nbsp;&rsaquo;</a>
+            </div>
+          </div>
+        </div>
+        <hr class="p-rule--muted" />
+        <div class="row">
+          <div class="col-3 col-medium-1">
+            <h3 class="p-heading--5">
+              We travel
+            </h3>
+          </div>
+          <div class="col-6 col-medium-3">
+            <p>
+              We optimize our team structure for time zone overlap. Collaboration takes time to fully develop but leadership at Canonical means building cross-team relationships. We nurture those relationships through company sprints, which are in-person events that bring diverse teams or their leaders together.
+            </p>
+            <p>
+              We host these events around the world to discover great places to explore and appreciate in the process. Team events have taken place in Vancouver, Madrid, Riga, Cape Town, Prague, Lyon, London and many more.
+            </p>
+          </div>
+        </div>
       </div>
     </div>
     <!-- map goes here -->
     <div class="row">
       <figure>
-        <div id="locations-map">
+        <div id="locations-map" style="height: 400px; z-index: 1;">
path: templates/careers/company-culture/remote-work.html
user: login: muhammad-ali-pk
body: This hard-coded height will show up as an empty container, if the script is disabled.
![image](https://github.com/user-attachments/assets/63f912de-f377-4341-8778-51daa640d27a)

created_at: 2025-05-23T05:51:37Z
author_association: CONTRIBUTOR

PR comments:
user: login: kim-isaac
created_at: 2025-05-21T15:58:07Z
body: Thanks @fasih-mehmood , looks great! I left some comments below:

- [x] The default rule is used for section divisions (at the top of each section). Please use the 'p-rule--muted' for all others. I’ve marked the ones that should be changed to muted below:
![image](https://github.com/user-attachments/assets/18e7431c-5196-4132-a521-fd8eb8a5232e)
![image](https://github.com/user-attachments/assets/2c92209b-1717-469c-a5e4-5d3f2c8d8c45)

- [x] it's more like a question - is it possible to delete or mute the tag below the map?
![image](https://github.com/user-attachments/assets/290deae1-ef6e-4be0-b57d-46c557fccb18)

- [x] Image slider: For PC, please set the image to 916×610px (3:2), and reveal the next image with a 32px margin. For TB and MO, single image should be filled but please keep the original 3:2 ratio.
- [x] For TB view, text that follows the map should also be aligned to the right.
![image](https://github.com/user-attachments/assets/a92d04b2-86a1-4e50-864b-14fe8969cec8)


author_association: NONE
user: login: fasih-mehmood
created_at: 2025-05-22T05:11:56Z
body: > Thanks @fasih-mehmood , looks great! I left some comments below:

@kim-isaac Thank you for the review, I've deployed the fixes, please take a look.
author_association: CONTRIBUTOR
user: login: eliman11
created_at: 2025-05-22T10:14:20Z
body: Thanks @fasih-mehmood, looks great! Just a couple of minor comments:
- [x] Wrong link in CTA - should be canonical.com/careers instead of https://canonical.com/careers/company-culture/careers
- [ ] Missing Frankfurt pin on the map
author_association: COLLABORATOR
user: login: kim-isaac
created_at: 2025-05-22T10:16:12Z
body: Thanks @fasih-mehmood ! One thing left from my side

- [x] could you use 'p-section--deep' for the last section?

I'll add +1 with this change. 
author_association: NONE
user: login: fasih-mehmood
created_at: 2025-05-22T10:26:24Z
body: > Thanks @fasih-mehmood, looks great! Just a couple of minor comments:

@eliman11 Thank you for the review. Fixed the link.
I can see the pin on the map, could you check again please?

![image](https://github.com/user-attachments/assets/e8e4265f-397c-4ca7-b435-3e8dc5d2cafe)

@kim-isaac Updated, thank you!

author_association: CONTRIBUTOR
user: login: eliman11
created_at: 2025-05-22T12:42:04Z
body: Thanks for the quick changes! 
author_association: COLLABORATOR
user: login: fasih-mehmood
created_at: 2025-05-22T13:04:29Z
body: @bartaz @muhammad-ali-pk Thank you for the reviews, I've resolved the comments. Please take a look.
author_association: CONTRIBUTOR
user: login: fasih-mehmood
created_at: 2025-05-23T06:05:26Z
body: > Thank you for the changes @fasih-mehmood. Just a couple small findings from QA.

@muhammad-ali-pk Fixed and deployed, thank you!
author_association: CONTRIBUTOR