Using media queries (viewport based)
| Movie Title | Rank | Year | Rating | Gross |
|---|---|---|---|---|
| Avatar | 1 | 2009 | 83% | $2.7B |
| Titanic | 2 | 1997 | 88% | $2.1B |
| The Avengers | 3 | 2012 | 92% | $1.5B |
| Harry Potter and the Deathly Hallows—Part 2 | 4 | 2011 | 96% | $1.3B |
| Frozen | 5 | 2013 | 89% | $1.2B |
| Iron Man 3 | 6 | 2013 | 78% | $1.2B |
| Transformers: Dark of the Moon | 7 | 2011 | 36% | $1.1B |
| The Lord of the Rings: The Return of the King | 8 | 2003 | 95% | $1.1B |
| Skyfall | 9 | 2012 | 92% | $1.1B |
| Transformers: Age of Extinction | 10 | 2014 | 18% | $1.0B |
Using container queries
| Movie Title | Rank | Year | Rating | Gross |
|---|---|---|---|---|
| Avatar | 1 | 2009 | 83% | $2.7B |
| Titanic | 2 | 1997 | 88% | $2.1B Link test |
| The Avengers | 3 | 2012 | 92% | $1.5B |
| Harry Potter and the Deathly Hallows—Part 2 | 4 | 2011 | 96% | $1.3B |
| Frozen | 5 | 2013 | 89% | $1.2B |
| Iron Man 3 | 6 | 2013 | 78% | $1.2B |
| Transformers: Dark of the Moon | 7 | 2011 | 36% | $1.1B |
| The Lord of the Rings: The Return of the King | 8 | 2003 | 95% | $1.1B |
| Skyfall | 9 | 2012 | 92% | $1.1B |
| Transformers: Age of Extinction | 10 | 2014 | 18% | $1.0B |
Multiple child tables in one <table-saw>
First table
| Pricing Strategies | Hourly-based | Project-based | Value-based | Retainer-based | Tier-based |
|---|---|---|---|---|---|
| Overview | Pricing per hour. | Fixed price per project. | Fixed price based on value delivered. | Fixed price for a set number of hours. | Fixed price packages at different price points. |
| Benefits | Straightforward and easy to calculate. | Ensures budget predictability, and encourages efficiency. | Higher earnings when the impact is significant. Emphasizes results. | Ensures a steady and predictable income stream. Builds longterm business relationships. | Caters to various client needs and budgets. Simplifies clients’ decision-making. |
| Challenges | May incentivize slower work. Emphasizes hours worked rather than value of work. | Unforeseen changes or requests can lead to scope creep, and threaten profitability. | Dependent on ability to communicate the value delivered effectively. | Dependent on client’s trust. | Lack of transparency in terms and pricing may cause confusion. |
| Ideal projects or clients | Small projects, or projects subject to change due to timelines or requirements. | Projects with clear expectations and scope. | Clients with clear pain points and business goals. | Repeat and ongoing client projects. | Client roster with widely varying needs and budgets. |
Second table
| Pricing Strategies | Hourly-based | Project-based | Value-based | Retainer-based | Tier-based |
|---|---|---|---|---|---|
| Overview | Pricing per hour. | Fixed price per project. | Fixed price based on value delivered. | Fixed price for a set number of hours. | Fixed price packages at different price points. |
| Benefits | Straightforward and easy to calculate. | Ensures budget predictability, and encourages efficiency. | Higher earnings when the impact is significant. Emphasizes results. | Ensures a steady and predictable income stream. Builds longterm business relationships. | Caters to various client needs and budgets. Simplifies clients’ decision-making. |
| Challenges | May incentivize slower work. Emphasizes hours worked rather than value of work. | Unforeseen changes or requests can lead to scope creep, and threaten profitability. | Dependent on ability to communicate the value delivered effectively. | Dependent on client’s trust. | Lack of transparency in terms and pricing may cause confusion. |
| Ideal projects or clients | Small projects, or projects subject to change due to timelines or requirements. | Projects with clear expectations and scope. | Clients with clear pain points and business goals. | Repeat and ongoing client projects. | Client roster with widely varying needs and budgets. |
Console logs an error when missing `th` elements
| Pricing Strategies | Hourly-based | Project-based |
| Ideal projects or clients | Small projects, or projects subject to change due to timelines or requirements. | Projects with clear expectations and scope. |