{% if strip == "light" %}
<section class="p-strip--light is-bordered">
{% else %}
<section class="p-strip is-bordered">
{% endif %}
  <div class="row u-equal-height">
    <div class="col-7">
      <h2>Spin up Ubuntu VMs on Linux, Mac or&nbsp;Windows</h2>
      <p>With Multipass you can download, configure, and control Ubuntu Server virtual machines with latest updates preinstalled. Set up a mini-cloud on your Linux, Windows, or macOS system.</p>
      <p>
        <a id="multipass-os-cta" href="https://multipass.run/docs" class="p-button"><span>Install</span></a>
      </p>
      <p>
        <a href="https://multipass.run">Learn more about Multipass</a>
      </p>
    </div>
    <div class="col-5 u-vertically-center u-hide--medium u-hide--small u-align--center">
      {{
        image(
            url="https://assets.ubuntu.com/v1/4e0ff71e-Multipass+logo_thin_rgb.svg",
            alt="",
            width="320",
            height="61",
            hi_def=True,
            loading="lazy",
          ) | safe
      }}
    </div>
  </div>
</section>

<script>
  var multipassOScta = document.getElementById('multipass-os-cta');
  var baseInstallURL = multipassOScta.getAttribute('href');
  var ctaSpan = multipassOScta.querySelector('span')
  var os = 'linux';

  if (navigator.appVersion.indexOf('Win') != -1) { os = 'Windows' };
  if (navigator.appVersion.indexOf('MacOS') != -1) { os = 'macOS' };
  if (navigator.appVersion.indexOf('Mac OS') != -1) { os = 'macOS' };
  if (navigator.appVersion.indexOf('Macintosh') != -1) { os = 'macOS' };

  multipassOScta.setAttribute(
    'href',
    baseInstallURL + '/installing-on-' + os.toLowerCase()
  );
  ctaSpan.innerText = 'Install on ' + os;
</script>