Build from the center out

{% set content %}
  {% include '@bolt-components-headline/headline.twig' with {
    text: 'Build from the center out',
    tag: 'h1',
    size: 'xxxlarge',
  } only %}
  {% include '@bolt-components-headline/subheadline.twig' with {
    text: 'Feeling the need for speed <em>and</em> scalability? You can have both if you take a Center-out&trade; approach to structuring your technology – and avoid some common mistakes.',
    tag: 'h2',
    size: 'xlarge',
  } only %}
  {% include '@bolt-elements-button/button.twig' with {
    content: 'Get the ebook',
    attributes: {
      href: '#!',
    }
  } only %}
{% endset %}

{% set supplement %}
  {% set video %}
    <video-js
      data-account="1900410236"
      data-player="O3FkeBiaDz"
      data-embed="default"
      data-video-id="6154161119001"
      data-media-duration
      data-media-title
      controls
      class="c-base-video"></video-js>
  {% endset %}
  {% include '@bolt-elements-ratio/ratio.twig' with {
    content: video,
    ratio: 'wide'
  } only %}
{% endset %}

{% set layout_items %}
  {% include '@bolt-layouts-layout/layout-item.twig' with {
    content: supplement,
    order: 'last@from-medium'
  } only %}
  {% include '@bolt-layouts-layout/layout-item.twig' with {
    content: content
  } only %}
{% endset %}

{% set background %}
  {% include '@bolt-elements-image/image.twig' with {
    background: true,
    attributes: {
      alt: 'Image alt text',
      src: '/images/heros/live-assets/center-out-hero-bg.jpg',
      loading: 'eager',
      width: '100vw'
    },
  } only %}
{% endset %}

{% include '@bolt-layouts-layout/layout.twig' with {
  content: layout_items,
  gutter: 'large',
  row_gutter: 'small',
  padding_top: 'large',
  padding_bottom: 'large',
  valign_items: 'center',
  background: background,
  template: [
    '67/33@from-medium'
  ],
  attributes: {
    class: 't-bolt-navy'
  }
} only %}