Feature Section 7

Eye-catching two-column component, where the right panel displays images that stay at the top of the screen while scrolling. The text also stays in the same position.

This component has an advanced design that ensures the image always takes up 50% of the screen width. The left column takes up 50% of the default content width, not the full screen.

To achieve this, all the content has a width of 100% and the section’s side padding are 0. This allows the image to take up 50% of the screen width. To make the container respect the content width, a left padding was added using the max() and calc() functions to generate the key space.

Don’t worry, you don’t need to change these values. I’m using variables that will use your theme’s default styles and will adjust accordingly.