3 Column Responsive Layout with Text Positioning

                    <section class="denim-outfit-section" style="padding: {{ section.settings.padding_top }}px 0 {{ section.settings.padding_bottom }}px;">
  <div class="page-width">
    <div class="denim-header">
      <h2 class="denim-title">{{ section.settings.title }}</h2>
      {% if section.settings.subtitle != blank %}
        <p class="denim-subtitle">{{ section.settings.subtitle }}</p>
      {% endif %}
    </div>

    <div class="denim-content-grid">
      {% for block in section.blocks %}
        <div class="denim-content-card text-position-{{ block.settings.text_position }}">
          {% if block.settings.image %}
            <div class="denim-image">
              {{ block.settings.image | image_url: width: 600 | image_tag:
                loading: 'lazy',
                widths: '300, 400, 500, 600',
                class: 'content-img'
              }}
            </div>
          {% endif %}
          
          <div class="denim-content">
            {% if block.settings.title != blank %}
              <h3 class="content-title">{{ block.settings.title }}</h3>
            {% endif %}
            
            {% if block.settings.text != blank %}
              <div class="content-text">{{ block.settings.text }}</div>
            {% endif %}
          </div>
        </div>
      {% endfor %}
    </div>

    {% if section.settings.button_text != blank %}
      <div class="denim-button-wrapper">
        <a href="{{ section.settings.button_link }}" class="denim-button">
          {{ section.settings.button_text }}
        </a>
      </div>
    {% endif %}
  </div>
</section>

<style>
  .denim-outfit-section {
    background-color: {{ section.settings.background_color }};
    color: {{ section.settings.text_color }};
  }

  .denim-header {
    text-align: center;
    margin-bottom: 40px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
  }

  .denim-title {
    font-size: 34px;
    letter-spacing: -0.5px;
    margin-bottom: 15px;
    font-weight: 400;
  }

  .denim-subtitle {
    font-size: 16px;
    line-height: 1.6;
    color: #666;
    max-width: 600px;
    margin: 0 auto;
  }

  .denim-content-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 40px;
  }

  .denim-content-card {
    position: relative;
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
  }

  .text-position-top .denim-content {
    order: -1;
    margin-bottom: 20px;
  }

  .text-position-bottom .denim-content {
    order: 1;
    margin-top: 20px;
  }

  .denim-content-card:hover {
    transform: translateY(-5px);
  }

  .content-img {
    width: 100%;
    height: 600px;
    object-fit: cover;
  }

  .denim-content {
    text-align: center;
    padding: 0 10px;
  }

  .content-title {
    font-size: 18px;
    margin-bottom: 10px;
    font-weight: bold;
  }

  .content-text {
    font-size: 16px;
    line-height: 1.6;
    color: #444;
  }

  .denim-button-wrapper {
    text-align: center;
    margin-top: 30px;
  }

  .denim-button {
    display: inline-block;
    padding: 12px 30px;
    background-color: {{ section.settings.button_color }};
    color: {{ section.settings.button_text_color }};
    text-decoration: none;
    border-radius: 25px;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s ease;
  }

  .denim-button:hover {
    transform: scale(1.05);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  }

  @media (max-width: 1024px) {
    .denim-content-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media (max-width: 768px) {
    .denim-content-grid {
      grid-template-columns: 1fr;
    }
    
    .denim-title {
      font-size: 28px;
    }
  }
</style>

{% schema %}
{
  "name": "Denim Outfit Showcase",
  "settings": [
    {
      "type": "color",
      "id": "background_color",
      "label": "Background Color",
      "default": "#ffffff"
    },
    {
      "type": "color",
      "id": "text_color",
      "label": "Text Color",
      "default": "#000000"
    },
    {
      "type": "text",
      "id": "title",
      "label": "Title",
      "default": "Denim Jacket Outfits"
    },
    {
      "type": "text",
      "id": "subtitle",
      "label": "Subtitle",
      "default": "See our top-picks for your wardrobe: hand-picked, timeless, and downright cool."
    },
    {
      "type": "header",
      "content": "Button Settings"
    },
    {
      "type": "text",
      "id": "button_text",
      "label": "Button Text",
      "default": "Explore More"
    },
    {
      "type": "url",
      "id": "button_link",
      "label": "Button Link"
    },
    {
      "type": "color",
      "id": "button_color",
      "label": "Button Color",
      "default": "#8b51ff"
    },
    {
      "type": "color",
      "id": "button_text_color",
      "label": "Button Text Color",
      "default": "#ffffff"
    },
    {
      "type": "range",
      "id": "padding_top",
      "label": "Top Padding",
      "min": 0,
      "max": 100,
      "step": 2,
      "default": 60
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "label": "Bottom Padding",
      "min": 0,
      "max": 100,
      "step": 2,
      "default": 60
    }
  ],
  "blocks": [
    {
      "type": "content",
      "name": "Content Block",
      "settings": [
        {
          "type": "image_picker",
          "id": "image",
          "label": "Image"
        },
        {
          "type": "text",
          "id": "title",
          "label": "Title",
          "default": "Solid Crop Slim Cami Top"
        },
        {
          "type": "richtext",
          "id": "text",
          "label": "Text",
          "default": "<p>Explore the impeccably crafted style defined by a modern aesthetic</p>"
        },
        {
          "type": "select",
          "id": "text_position",
          "label": "Text Position",
          "options": [
            {
              "value": "top",
              "label": "Top"
            },
            {
              "value": "bottom",
              "label": "Bottom"
            }
          ],
          "default": "bottom"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Denim Outfit Showcase",
      "category": "Custom Sections",
      "blocks": [
        {
          "type": "content",
          "settings": {
            "title": "Solid Crop Slim Cami Top",
            "text": "<p>Explore the impeccably crafted style defined by a modern aesthetic</p>",
            "text_position": "top"
          }
        },
        {
          "type": "content",
          "settings": {
            "title": "High Turtleneck Jumper",
            "text": "<p>Timeless elegance meets contemporary design</p>",
            "text_position": "bottom"
          }
        },
        {
          "type": "content",
          "settings": {
            "title": "Classic Denim Jacket",
            "text": "<p>Versatile piece for any wardrobe</p>",
            "text_position": "top"
          }
        }
      ]
    }
  ]
}
{% endschema %}