Selling points - 1 section

          "settings": {
            "header": "60%",
            "header_color": "#CA9199",
            "header_font_size": 75,
            "header_font_size_mobile": 50,
            "subheading": "Subheading 4",
            "subheading_color": "#000000",
            "subheading_font_size": 24,
            "subheading_font_size_mobile": 18,
            "paragraph": "This is a paragraph under the fourth column. It contains some descriptive text.",
            "paragraph_color": "#000000",
            "paragraph_font_size": 16,
            "paragraph_font_size_mobile": 14,
            "column_width": 25
          }
        }
      ]
    }
  ]
}
{% endschema %}

<div class="arktic-container" style="max-width: {{ section.settings.container_width }}px;">
  {% for block in section.blocks %}
    <div class="arktic-column" 
         style="flex: 0 0 {{ block.settings.column_width }}%;">
      <h1 class="arktic-header" 
          style="color: {{ block.settings.header_color }}; font-size: {{ block.settings.header_font_size }}px;     margin: 0rem 0; !important">
        {{ block.settings.header }}
      </h1>
      <h2 class="arktic-subheading" 
          style="color: {{ block.settings.subheading_color }}; font-size: {{ block.settings.subheading_font_size }}px; margin: 0rem 0; !important">
        {{ block.settings.subheading }}
      </h2>
      <p class="arktic-paragraph" 
         style="color: {{ block.settings.paragraph_color }}; font-size: {{ block.settings.paragraph_font_size }}px;">
        {{ block.settings.paragraph }}
      </p>
    </div>
  {% endfor %}
</div>

<style>
.arktic-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  text-align: center;
  margin: 0 auto;
  padding: 20px;
}

.arktic-column {
  margin: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Mobile-specific styles */
@media (max-width: 768px) {
  .arktic-column {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
  
  {% for block in section.blocks %}
    .arktic-column:nth-child({{ forloop.index }}) .arktic-header {
      font-size: {{ block.settings.header_font_size_mobile }}px !important;
    }
    .arktic-column:nth-child({{ forloop.index }}) .arktic-subheading {
      font-size: {{ block.settings.subheading_font_size_mobile }}px !important;
    }
    .arktic-column:nth-child({{ forloop.index }}) .arktic-paragraph {
      font-size: {{ block.settings.paragraph_font_size_mobile }}px !important;
    }
  {% endfor %}
}
</style