<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Thermometer Layout</title>
    <link rel="stylesheet" href="/css/new-design.css">
</head>
<body>
    <div class="page-container">
        <main class="content-area">
            <section class="card-section" aria-describedby="thermometer-indicator-section1">
                <h2 class="card-header">Section Title 1</h2>
                <div class="card-content">
                    <p>This is the content for the first section. It can contain multiple paragraphs and other elements.</p>
                </div>
                <div class="card-bottom">
                    <button class="read-more">Read More</button>
                </div>
            </section>

            <section class="card-section" aria-describedby="thermometer-indicator-section2">
                <h2 class="card-header">Another Section</h2>
                <div class="card-content">
                    <p>More interesting content for the second section goes here.</p>
                </div>
                <div class="card-bottom">
                    <button class="read-more">Learn More</button>
                </div>
            </section>

            </main>
        <aside class="thermometer-area" aria-label="Amount of managed by us spectrum">
            <div class="thermometer-label">Amount of managed by us</div>
            <div class="thermometer-graphic" role="img" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100">
                </div>
            <div id="thermometer-indicator-section1" class="visually-hidden">Section 1 is located at approximately 30% in the managed amount spectrum.</div>
            <div id="thermometer-indicator-section2" class="visually-hidden">Section 2 is located at approximately 60% in the managed amount spectrum.</div>
            </aside>
        <div class="triangle-connector"></div>
    </div>
</body>
</html>