Promo

<div class="gh-wrap">
  <section class="gh-promo gh-switch">
    <div class="gh-promo--content">
    <div class="gh-text-label">Om oss</div>
      <div class="gh-flow">
        <h2 class="gh-heading-large">Skräddarsydd träning, live tracking och cykelupplevelser för alla</h2>
        <p class="gh-text-small">Du får en egen coach som planerar, anpassar och följer upp din träning efter den du är och dit du vill nå. Beroende på hur mycket hjälp du vill ha finns våra månadsabonnemang i tre olika nivåer. Din träning optimeras för cykling, längdskidåkning, löpning eller triathlon.</p>
        <a href="#" class="gh-button gh-margin-block" style="--gh-margin-block: var(--gh-space-large) 0;" data-type="outline-dark">Skapa konto</a>
      </div>
    </div>
    <div class="gh-promo--media-wrap gh-switch" style="--gh-breakpoint: 30rem;">
    <div class="gh-promo--media gh-frame gh-media-filter" style="--gh-grow: 3;">
      <img src="/assets/public/media/promo-placeholder.jpg" alt="A swimmer in open water." loading="lazy">
    </div>
    <div class="gh-promo--pattern" style="--gh-grow: 1;"></div>
    </div>
  </section>
</div>

[
  {
    "title": "Skräddarsydd träning, live tracking och cykelupplevelser för alla",
    "tag": "Om oss",
    "text": "Du får en egen coach som planerar, anpassar och följer upp din träning efter den du är och dit du vill nå. Beroende på hur mycket hjälp du vill ha finns våra månadsabonnemang i tre olika nivåer. Din träning optimeras för cykling, längdskidåkning, löpning eller triathlon.",
    "url": "#",
    "reverse": "",
    "image": {
      "url": "/assets/public/media/promo-placeholder.jpg",
      "alt": "A swimmer in open water.",
      "loading": "lazy"
    },
    "button": {
      "text": "Skapa konto",
      "type": "outline-dark",
      "size": ""
    }
  }
]

<div class="gh-wrap">
  <section class="gh-promo gh-switch" data-direction="reverse">
    <div class="gh-promo--content">
    <div class="gh-text-label">Om oss</div>
      <div class="gh-flow">
        <h2 class="gh-heading-large">Skräddarsydd träning, live tracking och cykelupplevelser för alla</h2>
        <p class="gh-text-small">Du får en egen coach som planerar, anpassar och följer upp din träning efter den du är och dit du vill nå. Beroende på hur mycket hjälp du vill ha finns våra månadsabonnemang i tre olika nivåer. Din träning optimeras för cykling, längdskidåkning, löpning eller triathlon.</p>
        <a href="#" class="gh-button gh-margin-block" style="--gh-margin-block: var(--gh-space-large) 0;" data-type="outline-dark">Skapa konto</a>
      </div>
    </div>
    <div class="gh-promo--media-wrap gh-switch" style="--gh-breakpoint: 30rem;">
    <div class="gh-promo--media gh-frame gh-media-filter" style="--gh-grow: 3;">
      <img src="/assets/public/media/promo-placeholder.jpg" alt="A swimmer in open water." loading="lazy">
    </div>
    <div class="gh-promo--pattern" style="--gh-grow: 1;"></div>
    </div>
  </section>
</div>

[
  {
    "title": "Skräddarsydd träning, live tracking och cykelupplevelser för alla",
    "tag": "Om oss",
    "text": "Du får en egen coach som planerar, anpassar och följer upp din träning efter den du är och dit du vill nå. Beroende på hur mycket hjälp du vill ha finns våra månadsabonnemang i tre olika nivåer. Din träning optimeras för cykling, längdskidåkning, löpning eller triathlon.",
    "url": "#",
    "reverse": "true",
    "image": {
      "url": "/assets/public/media/promo-placeholder.jpg",
      "alt": "A swimmer in open water.",
      "loading": "lazy"
    },
    "button": {
      "text": "Skapa konto",
      "type": "outline-dark",
      "size": ""
    }
  }
]