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 layout="grid tw-lg:grid-cols:3" space="g:medium">
<div layout="order:2 tw-lg:order:1">
<h5 space="m-b:medium" visual="text-size:grand font:tw-bold tw-lg:text-size:mount">Care of High Quality</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipis elit. Sit enim nec, proin faucibus nibh et sagittis a. Lacinia purus ac amet pellentesque aliquam enim.</p>
</div>
<div layout="order:1 tw-lg:order:2">
<div
visual="rounded:medium bg:gray-100"
style="
padding-top: calc(150% + 1rem);
background-image: url('https://placehold.co/400x600/2563EB/FFFFFF');
background-size: cover;
background-position: center;
"
></div>
</div>
<div layout="order:3">
<div layout="grid grid-cols:1" space="g:medium">
<div
visual="rounded:medium bg:gray-100"
style="
padding-top: 90%;
background-image: url('https://placehold.co/400x300/2563EB/FFFFFF');
background-size: cover;
background-position: center;
"
></div>
<div
visual="rounded:medium bg:gray-100"
style="
padding-top: 60%;
background-image: url('https://placehold.co/400x200/2563EB/FFFFFF');
background-size: cover;
background-position: center;
"
></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="grid gap-4 lg:grid-cols-3">
<div class="order-2 lg:order-1">
<h5 class="mb-4 text-3xl font-bold lg:text-5xl">Care of High Quality</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipis elit. Sit enim nec, proin faucibus nibh et sagittis a. Lacinia purus ac amet pellentesque aliquam enim.</p>
</div>
<div class="order-1 lg:order-2">
<div
class="rounded-lg bg-gray-100"
style="
padding-top: calc(150% + 1rem);
background-image: url('https://placehold.co/400x600/2563EB/FFFFFF');
background-size: cover;
background-position: center;
"
></div>
</div>
<div class="order-3">
<div class="grid grid-cols-1 gap-4">
<div
class="rounded-lg bg-gray-100"
style="
padding-top: 90%;
background-image: url('https://placehold.co/400x300/2563EB/FFFFFF');
background-size: cover;
background-position: center;
"
></div>
<div
class="rounded-lg bg-gray-100"
style="
padding-top: 60%;
background-image: url('https://placehold.co/400x200/2563EB/FFFFFF');
background-size: cover;
background-position: center;
"
></div>
</div>
</div>
</div>
</section>
```