video with text is perfect on desktop but not responsive to mobile, help please?

[Ronnie99]

Hey!
So I found a code here that adds a section of video with text to the store. It looks amazing, however it's horizontal on mobile as well. I would really appreciate someone help me adjust the code, so that it's also responsive on mobile (it should be text and below that the video).

Here's the desktop look:

and here's the non-responsive mobile version:

The liquid file: 

{{ 'component-video-with-text.css' | asset_url | stylesheet_tag }}

<div class="video-with-text {% if section.settings.full_width %}video-with-text--full-width{% else %}page-width{% endif %} color-scheme-{{ section.settings.color_scheme }}">
  <div class="video-with-text__grid color-{{ section.settings.color_scheme }} grid grid--gapless grid--1-col grid--2-col-tablet gradient{% if section.settings.layout == 'text_first' %} video-with-text__grid--reverse{% endif %}">
    <div class="grid__item">
      <div class="video-with-text__media image-with-text__media--{{ section.settings.height }} media">
        <video style="max-width: 100%; height: 100%;" autoplay="autoplay" loop="loop" muted="" webkit-playsinline="" playsinline="">
          <source src="{{ section.settings.video_url }}" type="video/mp4" />
        </video>
      </div>
    </div>
    <div class="grid__item">
      <div class="video-with-text__content video-with-text__content--{{ section.settings.height }}">
        {%- for block in section.blocks -%}
          {% case block.type %}
            {%- when 'heading' -%}
              <h2 class="video-with-text__heading h1" {{ block.shopify_attributes }}>
                {{ block.settings.heading | escape }}
              </h2>
            {%- when 'text' -%}
              <div class="video-with-text__text rte" {{ block.shopify_attributes }}>{{ block.settings.text }}</div>
            {%- when 'button' -%}
              {%- if block.settings.button_label != blank -%}
                <a{% if block.settings.button_link != blank %} href="{{ block.settings.button_link }}"{% endif %} class="button{% if block.settings.button_style_secondary %} button--secondary{% else %} button--primary{% endif %}"{% if block.settings.button_link == blank %} aria-disabled="true"{% endif %} {{ block.shopify_attributes }}>
                  {{ block.settings.button_label | escape }}
                </a>
              {%- endif -%}
          {%- endcase -%}
        {%- endfor -%}
      </div>
    </div>
  </div>
</div>

{% schema %}
{
  "name": "Video with text",
  "class": "spaced-section spaced-section--full-width",
  "settings": [
    {
      "type": "select",
      "id": "color_scheme",
      "options": [
        {
          "value": "background-1",
          "label": "Background 1"
        },
        {
          "value": "background-2",
          "label": "Background 2"
        },
        {
          "value": "inverse",
          "label": "Inverse"
        },
        {
          "value": "accent-1",
          "label": "Accent 1"
        },
        {
          "value": "accent-2",
          "label": "Accent 2"
        }
      ],
      "default": "background-1",
      "label": "Color scheme"
    },
    {
      "type": "text",
      "id": "video_url",
      "default": "https://cdn.shopify.com/s/files/1/0050/2779/0919/files/1_1_Cutting_fruit_H.mp4?v=1603372350",
      "label": "Video url",
      "info": "Upload your video to Shopify then paste the url here"
    },
    {
      "type": "select",
      "id": "height",
      "options": [
        {
          "value": "adapt",
          "label": "Adapt"
        },
        {
          "value": "small",
          "label": "Small"
        },
        {
          "value": "large",
          "label": "Large"
        }
      ],
      "default": "adapt",
      "label": "Video ratio"
    },
    {
      "type": "select",
      "id": "layout",
      "options": [
        {
          "value": "image_first",
          "label": "Video first"
        },
        {
          "value": "text_first",
          "label": "Text first"
        }
      ],
      "default": "image_first",
      "label": "Desktop layout",
      "info": "Video first is the default mobile layout."
    }
  ],
  "blocks": [
    {
      "type": "heading",
      "name": "t:sections.video-with-text.blocks.heading.name",
      "limit": 1,
      "settings": [
        {
          "type": "text",
          "id": "heading",
          "default": "Image with text",
          "label": "Heading"
        }
      ]
    },
    {
      "type": "text",
      "name": "Text name",
      "limit": 1,
      "settings": [
        {
          "type": "richtext",
          "id": "text",
          "default": "<p>Pair text with an image to focus on your chosen product, collection, or blog post. Add details on availability, style, or even provide a review.</p>",
          "label": "Description"
        }
      ]
    },
    {
      "type": "button",
      "name": "Button name",
      "limit": 1,
      "settings": [
        {
          "type": "text",
          "id": "button_label",
          "default": "Button label",
          "label": "Button label",
          "info": "Leave the label blank to hide the button."
        },
        {
          "type": "url",
          "id": "button_link",
          "label": "Button link"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Video with text",
      "blocks": [
        {
          "type": "heading"
        },
        {
          "type": "text"
        },
        {
          "type": "button"
        }
      ]
    }
  ]
}
{% endschema %}

The CSS asset file: 

.video-with-text {
  margin-top: 5rem;
}

.video-with-text:not(.color-scheme-background-1) {
  margin-bottom: 5rem;
}

@media screen and (min-width: 750px) {
  .video-with-text {
    margin-bottom: calc(5rem + var(--page-width-margin));
  }
}

.video-with-text .grid {
  margin-left: 0;
  margin-bottom: 0;
}

.video-with-text__grid {
  overflow: hidden;
}

@media screen and (min-width: 750px) {
  .video-with-text__grid--reverse {
    flex-direction: row-reverse;
  }
}

.video-with-text__media {
  background-color: transparent;
  min-height: 100%;
}

.video-with-text__media--small {
  height: 19.4rem;
}

.video-with-text__media--large {
  height: 40rem;
}

@media screen and (min-width: 750px) {
  .video-with-text__media--small {
    height: 31.4rem;
  }

  .video-with-text__media--large {
    height: 60rem;
  }
}

.video-with-text__media--placeholder {
  background-color: rgba(var(--color-foreground), 0.04);
  position: relative;
  overflow: hidden;
}

.video-with-text__media--placeholder.video-with-text__media--adapt {
  height: 20rem;
}

@media screen and (min-width: 750px) {
  .video-with-text__media--placeholder.video-with-text__media--adapt {
    height: 30rem;
  }
}

.video-with-text__media--placeholder > svg {
  position: absolute;
  left: 50%;
  max-width: 80rem;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  fill: currentColor;
}

.video-with-text__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100%;
  justify-content: center;
  padding: 4rem calc(4rem / var(--font-body-scale)) 5rem;
}

@media screen and (min-width: 750px) {
  .video-with-text__grid--reverse .video-with-text__content {
    margin-left: auto;
  }
}

@media screen and (min-width: 750px) {
  .video-with-text__content {
    padding: 6rem 7rem 7rem;
  }
}

.video-with-text__content > * + * {
  margin-top: 2rem;
}

.video-with-text__content > .video-with-text__text:empty ~ a {
  margin-top: 2rem;
}

.video-with-text__content > :first-child:is(.video-with-text__heading) {
  margin-top: 0;
}

.video-with-text__content :last-child:is(.video-with-text__heading) {
  margin-bottom: 0;
}

.video-with-text__content .button + .video-with-text__text {
  margin-top: 2rem;
}

.video-with-text__content .video-with-text__text + .button {
  margin-top: 3rem;
}

.video-with-text__heading {
  margin-bottom: 0;
}

.video-with-text__text p {
  margin-top: 0;
  margin-bottom: 1rem;
}

.video-with-text__content {
  padding-left: 15px !important;
  padding-right: 15px !important;
}

Would love some help...