Salgspunkter - 1 sektion

"indstillinger": {
"header": "60%",
"header_color": "#CA9199",
"header_font_size": 75,
"header_font_size_mobile": 50,
"subheading": "Underoverskrift 4",
"subheading_color": "#000000",
"subheading_font_size": 24,
"subheading_font_size_mobile": 18,
"paragraph": "Dette er et afsnit under fjerde kolonne. Det indeholder noget beskrivende tekst.",
"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>

<stil>
.arctic-container {
display: flex;
flex-wrap: wrap;
retfærdiggøre-indhold: center;
align-items: stretch;
tekst-align: center;
margin: 0 auto;
polstring: 20px;
}

.arktic-column {
margen: 10px;
display: flex;
flex-retning: kolonne;
align-items: center;
}

/* Mobilspecifikke stilarter */
@media (maks. bredde: 768px) {
.arktic-column {
flex: 0 0 100% !vigtigt;
max-width: 100% !vigtigt;
}

{% 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