So far I have written this code with lot of if and for statement and trying to fetch images in my repeater field. The viewing_style is list of radio buttons (Single Image, Carousel, gallery and 3d viewer). My goal is how can I display the images and what suggestions to achieve this goal?

  {% for module in project.project_module %}
    <div class="card {{ module.card_orientation }}"> 
        <div class="asset"> 
{% if module.project_asset == 'project_image' %}
  {% if module.viewing_style == 'single_image' %}
     <img src="{{ module.project_images | media }}" title="{{ module.project_images.title }}" loading=lazy/>
  {% endif %}
  {% if module.viewing_style == 'carousel' %}
    <div>Carsouel</div>
      {% for carousel in module.project_images %}
      <img src="{{ carousel.url | media }}" 
            title="{{ module.title }}" 
            loading=lazy
       />
      {% endfor %}
  {% endif %}
  {% if module.viewing_style == 'gallery' %}
    <div>Gallery Images</div>
  {% endif %}
  {% if module.viewing_style == 'third_dimension_viewer' %}
    <div>3D Viewer</div>
  {% endif %}
{% endif %}

{% if module.project_asset == 'project_video' %}
   <video  width="100%" height="auto" controls>
    <source src="{{ module.video_url }}"></source>
   </video>  
{% endif %}
{% if module.project_asset == 'project_text' %}
    <div class="browser">
    <div class="ctl"><i></i><i></i><i></i></div>
    <div class="grid center-center">
    <div>{{ module.project_texts | raw }}</div>
    </div>
    </div>
{% endif %}
        </div>
        <div class="label">{{ module.project_module_title }}</div> 
    </div> 
{% endfor %}
</div>