text: /**
   * TODO: change the component name to match--use kebab-case here
   * This is how you will reference your component
   * 
   * <two-picture-section>
   * -----------------------------------------------------------------------------
   * A button with a built-in loading spinner.
   *
   * @type {Component}
   *
   * @event click   [emitted when clicked]
   * -----------------------------------------------------------------------------
   */
  
  // TODO: change the component name to match file name--use camelCase here
  parasails.registerComponent('twoPictureSection', {
      //  ╔═╗╦═╗╔═╗╔═╗╔═╗
      //  ╠═╝╠╦╝║ ║╠═╝╚═╗
      //  ╩  ╩╚═╚═╝╩  ╚═╝
      props: [
        "leftpicture",
        "leftalt",
        "rightpicture",
        "rightalt"
      ],
    
      //  ╦╔╗╔╦╔╦╗╦╔═╗╦    ╔═╗╔╦╗╔═╗╔╦╗╔═╗
      //  ║║║║║ ║ ║╠═╣║    ╚═╗ ║ ╠═╣ ║ ║╣
      //  ╩╝╚╝╩ ╩ ╩╩ ╩╩═╝  ╚═╝ ╩ ╩ ╩ ╩ ╚═╝
      data: function (){
        return {
          //…
        };
      },
    
      //  ╦ ╦╔╦╗╔╦╗╦
      //  ╠═╣ ║ ║║║║
      //  ╩ ╩ ╩ ╩ ╩╩═╝
      template: `
      <div>
        <div class="image-box">
          <img :src="leftpicture" :alt="leftalt">
        </div>
        <div class="image-box">
          <img :src="rightpicture" :alt="rightalt">
        </div>
      </div>
      `,
    
      //  ╦  ╦╔═╗╔═╗╔═╗╦ ╦╔═╗╦  ╔═╗
      //  ║  ║╠╣ ║╣ ║  ╚╦╝║  ║  ║╣
      //  ╩═╝╩╚  ╚═╝╚═╝ ╩ ╚═╝╩═╝╚═╝
      beforeMount: function() {
        //…
      },
      mounted: async function(){
        //…
      },
      beforeDestroy: function() {
        //…
      },
    
      //  ╦╔╗╔╔╦╗╔═╗╦═╗╔═╗╔═╗╔╦╗╦╔═╗╔╗╔╔═╗
      //  ║║║║ ║ ║╣ ╠╦╝╠═╣║   ║ ║║ ║║║║╚═╗
      //  ╩╝╚╝ ╩ ╚═╝╩╚═╩ ╩╚═╝ ╩ ╩╚═╝╝╚╝╚═╝
      methods: {
      }
    });
    