Hello SenangStart!
Zero config, instant styling.
```
**Documentation**: [Getting Started Guide](https://bookklik-technologies.github.io/senangstart-css/guide/getting-started.html)
## SenangStart CSS Code
```html
<section layout="container" space="m-x:auto m-y:large p-x:medium-3x tw-lg:m-y:big-3x tw-lg:p-x:big-3x">
<div space="m-b:medium p:none tw-lg:m-b:big-3x tw-lg:p-x:giant">
<h1 layout="hidden tw-lg:block" space="m-b:small tw-lg:m-b:medium-3x" visual="text-size:huge font:tw-bold capitalize tw-lg:text-size:mega">Our Story</h1>
<div space="m-b:small tw-lg:m-b:medium" visual="tw-lg:text-size:grand">
<p>
Our process gathers existing programs and initiatives, stakeholder input, customer research, and industry trends into a highly engaging and interactive meeting. If agreed, we run collaborative work sessions with you to gain a deep understanding of your brand and the mission that it is currently on. This approach accelerates the strategic process in general, and builds consensus throughout the entire engagement.
<br /><br />
Together, using a fast paced, user centric, and facilitated framework, we define and prioritise user needs, create desired user journeys, define the brand, create wireframes, surface actionable insights, make strategic recommendations and produce tangible results that can be deployed within your organisation.
<br /><br />
We then would carry out a corporate photography session to really capture the essence of the people behind the company and put together a brand new website that impresses your visitors. Schedule a call today!
</p>
</div>
</div>
<div layout="grid grid-cols:1" space="g:medium">
<div
layout="grid grid-cols:1 tw-lg:grid-cols:2" space="p:medium tw-lg:p-x:big-3x tw-lg:p-y:large" visual="rounded:medium bg:gray-200"
style="
background-image: url('https://placehold.co/1200x600');
background-size: cover;
background-position: center;
"
>
<div style="padding-top: 100%" layout="relative" class="lg:col-start-2">
<div layout="absolute left:none top:none flex col tw-lg:justify:center" space="h:[100%] w:[100%]">
<div space="m-b:small max-w:[max-content] p-x:small tw-lg:m-b:medium" visual="rounded:small border-w:regular border:blue-600 font:tw-bold text:blue-600">Mission</div>
<p visual="text-size:big font:tw-semibold tw-lg:text-size:huge">Changing paradigms isn't easy - we're building a complex product that's a huge design and engineering challenge. We need to balance power with ease of use, information density with simplicity, and form with function. We’re here to make it a reality.</p>
</div>
</div>
</div>
<div
layout="grid grid-cols:1 tw-lg:grid-cols:2" space="p:medium tw-lg:p-x:big-3x tw-lg:p-y:large" visual="rounded:medium bg:gray-200"
style="
background-image: url('https://placehold.co/1200x600');
background-size: cover;
background-position: center;
"
>
<div style="padding-top: 100%" layout="relative" class="lg:col-start-1">
<div layout="absolute left:none top:none flex col tw-lg:justify:center" space="h:[100%] w:[100%]">
<div space="m-b:small max-w:[max-content] p-x:small tw-lg:m-b:medium" visual="rounded:small border-w:regular border:blue-600 font:tw-bold text:blue-600">Philosophy</div>
<p visual="text-size:big font:tw-semibold tw-lg:text-size:huge">We’re hyper focused on doing better, and being better, at every single thing we do. Heck, we want to be known for it. If we don’t know something, we learn it. If we need help, we ask for it. Our biggest competitor is ourselves.</p>
</div>
</div>
</div>
</div>
</section>
```
## Tailwind CSS Code
```html
<section class="container mx-auto my-8 px-6 lg:my-16 lg:px-16">
<div class="mb-4 p-0 lg:mb-16 lg:px-24">
<h1 class="mb-2 hidden text-2xl font-bold capitalize lg:mb-6 lg:block lg:text-6xl">Our Story</h1>
<div class="mb-2 lg:mb-4 lg:text-3xl">
<p>
Our process gathers existing programs and initiatives, stakeholder input, customer research, and industry trends into a highly engaging and interactive meeting. If agreed, we run collaborative work sessions with you to gain a deep understanding of your brand and the mission that it is currently on. This approach accelerates the strategic process in general, and builds consensus throughout the entire engagement.
<br /><br />
Together, using a fast paced, user centric, and facilitated framework, we define and prioritise user needs, create desired user journeys, define the brand, create wireframes, surface actionable insights, make strategic recommendations and produce tangible results that can be deployed within your organisation.
<br /><br />
We then would carry out a corporate photography session to really capture the essence of the people behind the company and put together a brand new website that impresses your visitors. Schedule a call today!
</p>
</div>
</div>
<div class="grid grid-cols-1 gap-4">
<div
class="grid grid-cols-1 rounded-lg bg-gray-200 p-4 lg:grid-cols-2 lg:px-16 lg:py-8"
style="
background-image: url('https://placehold.co/1200x600');
background-size: cover;
background-position: center;
"
>
<div style="padding-top: 100%" class="relative lg:col-start-2">
<div class="absolute left-0 top-0 flex h-full w-full flex-col lg:justify-center">
<div class="mb-2 max-w-max rounded-md border-2 border-blue-600 px-2 font-bold text-blue-600 lg:mb-4">Mission</div>
<p class="text-xl font-semibold lg:text-2xl">Changing paradigms isn't easy - we're building a complex product that's a huge design and engineering challenge. We need to balance power with ease of use, information density with simplicity, and form with function. We’re here to make it a reality.</p>
</div>
</div>
</div>
<div
class="grid grid-cols-1 rounded-lg bg-gray-200 p-4 lg:grid-cols-2 lg:px-16 lg:py-8"
style="
background-image: url('https://placehold.co/1200x600');
background-size: cover;
background-position: center;
"
>
<div style="padding-top: 100%" class="relative lg:col-start-1">
<div class="absolute left-0 top-0 flex h-full w-full flex-col lg:justify-center">
<div class="mb-2 max-w-max rounded-md border-2 border-blue-600 px-2 font-bold text-blue-600 lg:mb-4">Philosophy</div>
<p class="text-xl font-semibold lg:text-2xl">We’re hyper focused on doing better, and being better, at every single thing we do. Heck, we want to be known for it. If we don’t know something, we learn it. If we need help, we ask for it. Our biggest competitor is ourselves.</p>
</div>
</div>
</div>
</div>
</section>
```