Shopify Narrative Theme - How to change product page from 1 column layout to 2 column layout - shopify

Question

I am trying to change the layout of the product page on the Narrative Shopify theme so that it is 2 columns side by side instead of one.
I have tried editing the product-template.liquid file to achieve this but unfortunately no luck.
Here is a link to the demo product page which has the same code as mine: https://themes.shopify.com/themes/narrative/styles/warm/preview
Below is the top section of the product-template.liquid file I am trying to edit (I have reverted back to an older build just for ease of troubleshooting)
{%- assign current_variant = product.selected_or_first_available_variant -%}
{%- assign current_variant_sale = false -%}
{% if current_variant.compare_at_price > current_variant.price %}
{%- assign current_variant_sale = true -%}
{% endif %}
{% assign featured_media = current_variant.featured_media | default: product.featured_media %}
<div class="product-template" data-section-id="{{ section.id }}" data-section-type="product-template" data-variant-id="{{ current_variant.id }}" itemscope itemtype="http://schema.org/Product">
<meta itemprop="name" content="{{ product.title }}">
<meta itemprop="url" content="{{ shop.url }}{{ product.url }}">
<meta itemprop="image" content="{{ featured_media | img_url: 'grande' }}">
{% comment %}
------------------------------------------------------------------------------
Product Featured Media
------------------------------------------------------------------------------
{% endcomment %}
<div class="product-template__media page-width page-width--no-gutter">
{% assign variant_media_ids = '' %}
{%- unless product.has_only_default_variant -%}
{% for variant in product.variants %}
{% assign variant_media = variant.featured_media %}
{%- if variant_media -%}
{%- if variant_media_ids contains variant_media.id -%}
{% continue %}
{%- endif -%}
{% assign variant_media_ids = variant_media_ids | append: variant_media.id | append: ' ' %}
{% assign featured = false %}
{%- if featured_media == variant_media -%}
{% assign featured = true %}
{%- endif -%}
{% include 'product-preview-image' with media: variant_media, featured_media: featured, gallery_type: 'media', data_image: 'data-variant-media-image' %}
{%- endif -%}
{% endfor %}
{%- endunless -%}
{% unless featured_media and variant_media_ids contains featured_media.id %}
{% include 'product-preview-image' with media: featured_media, featured_media: true, gallery_type: 'media', data_image: 'data-variant-media-image' %}
{%- endunless -%}
{% include 'shopify-xr-button' %}
</div>
{% comment %}
------------------------------------------------------------------------------
Product Form & Description
------------------------------------------------------------------------------
{% endcomment %}
<div class="product__content page-width">
<div class="grid">
<div class="grid__item medium-up--push-one-twelfth medium-up--ten-twelfths">
<div class="product__content-header">
{% if section.settings.show_vendor %}
<span class="product__vendor text-small text-center" itemprop="brand">{{ product.vendor }}</span>
{% endif %}
<h1 class="product__title h2 text-center" itemprop="name">{{ product.title }}</h1>
<p class="product__price text-center{% if current_variant_sale %} product__price--sale{% endif %}" data-product-price aria-live="polite">
<span class="product__sale-price-label visually-hidden">{{ 'products.product.sale_price' | t }}</span>
<span class="product__regular-price-label visually-hidden">{{ 'products.product.price' | t }}</span>
<span class="product__current-price" data-regular-price>{{ current_variant.price | money }}</span>
<span class="product__compare-price-label visually-hidden">{{ 'products.product.regular_price' | t }}</span>
<s class="product__compare-price" data-compare-price>{{ current_variant.compare_at_price | money }}</s>
{% include 'product-unit-price', variant: current_variant %}
</p>
{%- if cart.taxes_included or shop.shipping_policy.body != blank -%}
<div class="product__policies rte">
{%- if cart.taxes_included -%}
{{ 'products.product.include_taxes' | t }}
{%- endif -%}
{%- if shop.shipping_policy.body != blank -%}
{{ 'products.product.shipping_policy_html' | t: link: shop.shipping_policy.url }}
{%- endif -%}
</div>
{%- endif -%}
</div>
<div class="product__content-main">
<div class="product__description rte" itemprop="description" class="rte">
{{ product.description }}
</div>
<div class="product__form-container" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<div class="product__form-wrapper">
<meta itemprop="price" content="{{ current_variant.price | divided_by: 100.00 }}">
<meta itemprop="priceCurrency" content="{{ cart.currency.iso_code }}">
<link itemprop="availability" href="http://schema.org/{% if current_variant.available %}InStock{% else %}OutOfStock{% endif %}">
{% include 'product-form' %}
{% if section.settings.show_share_buttons %}
{% if settings.share_facebook or settings.share_twitter or settings.share_pinterest %}
<div class="product__share-wrapper small--hide">
<div class="product__share">
{% include 'social-sharing', type: "product", links: 'bottom' share_title: product.title, share_permalink: product.url, share_image: featured_media %}
</div>
</div>
{% endif %}
{% endif %}
</div>
</div>
</div>
</div>
</div>
</div>
Any help would be greatly appreciated thank you!