Modal: Media

<form>
  <label class="c-modal">
    <input class="u-none"  type="checkbox"/>
    
    <div class="u-cursor-pointer">
      {% if modifier=='media' %}
      <figure class="l-entry__media {% if nofull %}{% else %}o-fullscreen{% endif %} u-mb-large">
        <div class="o-skeleton o-skeleton-media--horizontal">
          <img class="u-absolute u-left u-top u-size-full" src="{{media}}" alt="">
        </div>

        {% if media.caption %}
          <figcaption class="u-caption-02 u-color-light u-px-small u-mt-small">{{media.caption}}</figcaption>            
        {% endif %}

      </figure>
      {% else %}
      <h2 class="u-heading-05 u-m-none">Open Modal</h2>
      {% endif %}

    </div>

    <div class="c-modal__dialog u-fixed u-top u-bottom u-right u-left o-bg-base">
      <div class="c-modal__wrap u-absolute u-bottom u-right u-left ">
         {% if modifier=='media' %}
        <div class="c-modal__media u-flex u-justify-center u-items-center u-size-full-height">
          <div class="c-modal__content u-relative">
            <span class="c-modal__close o-link-inverse u-p-xxsmall u-absolute u-radius-circle">
              <svg class="o-icon o-icon--md u-cursor-pointer">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-x"></use>
              </svg>
            </span>
            <figure>
              <img decoding="async" referrerpolicy="no-referrer" class="u-p-small c-modal__image" src="{{media}}" loading="lazy" alt="">
            </figure>
          </div>
        </div>
        {% else %}
        <div class="c-modal__textual u-relative u-mt-xlarge u-p-base o-bg-base u-flex u-justify-start u-items-center u-column">

          <div class="u-flex u-justify-between u-size-full o-divider o-divider--bottom u-pt-base">
            <h2 class="u-heading-05 u-m-none">{{title}}</h2>
            <span class="c-modal__close o-link-inverse u-p-xxsmall u-absolute u-radius-circle">
              <svg class="o-icon o-icon--md u-cursor-pointer">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-x"></use>
              </svg>
            </span>
          </div>

          <div class="o-divider o-divider--bottom u-overflow-scroll">
            <div class="u-py-none">
              <p>{{description}}</p>
              <p>{{description}}</p>
              <p>{{description}}</p>
              <p>{{description}}</p>
              <p>{{description}}</p>
              <p>{{description}}</p>
              <p>{{description}}</p>
              <p>{{description}}</p>
              <p>{{description}}</p>
              <p>{{description}}</p>
              <p>{{description}}</p>
              <p>{{description}}</p>
              <p>{{description}}</p>
              <p>{{description}}</p>
              <p>{{description}}</p>
              <p>{{description}}</p>
              <p>{{description}}</p>
              <p>{{description}}</p>
              <p>{{description}}</p>
              <p>{{description}}</p>
              <p>{{description}}</p>
              <p>{{description}}</p>
              <p>{{description}}</p>
              <p>{{description}}</p>
              <p>{{description}}</p>
              <p>{{description}}</p>
              <p>{{description}}</p>
              <p>{{description}}</p>
              <p>{{description}}</p>
              <p>{{description}}</p>
              <p>{{description}}</p>
              <p>{{description}}</p>
              <p>{{description}}</p>
              <p>{{description}}</p>
              <p>{{description}}</p>
            </div>
          </div>

          <div class="u-pt-medium u-flex u-justify-end u-size-full u-wrap">
            <button class="c-btn c-btn--default u-label-04 u-cursor-pointer u-mb-base u-ml-small"> {{action_one}} </button>
            <button class="c-btn c-btn--primary u-label-04 u-cursor-pointer u-mb-base u-ml-small"> {{action_two}} </button>
          </div>

        </div>
        {% endif %}

      </div>

    </div>

  </label>
</form>