Fluid Design and Responsiveness

This template uses a fluid design based on the body font size, ensuring a perfect and consistent experience across all devices.

<aside> 💡 What this means: The site is fully responsive, automatically adjusting to any screen size for a seamless user experience.

</aside>

Key Guidelines:

• Do not change the body font size.
• To modify the size of text elements, use the tags specified in the Styleguide, such as Paragraph, Paragraph Accent, or Big Headline.
• For adjusting padding, margins, or typography size, prefer using the "em" unit to maintain consistent proportions across the website.
• Use "px" for small elements or those that should not scale across different viewports (e.g., fixed-size paragraphs).
• "em" units help ensure your design is automatically responsive. However, for complex layouts, especially on vertical screens, double-check the responsiveness.
• For consistent horizontal padding, use the "Is Padding" tag.
• The website uses a 12-column grid. Feel free to use column classes for your layouts as needed. More details are available in the Styleguide utility tab.

Home Page

To edit the Home page loop animation, follow these steps:

1. Find the ‘Overview Loop Content’ component on your Home page.
2. Double-click on it to open and edit the collections.
3. Ensure consistency by editing each collection as needed.
4. Add a new project:

• Duplicate an existing collection.