@import url(../headerfooter.css);



body>main {
padding: 0;
}


body>main>section {
max-width: var(--breakpoint);
margin: 1.5rem auto;
padding: 0 1rem 5rem;
}

@media (min-width: 640px) {
body>main>section {
margin: 2.5rem auto;
padding: 0 1.5rem 5rem;
}
}

body>main>section>h2 {
font-size: 1.1rem;
font-weight: 700;
letter-spacing: -0.01em;
margin-bottom: 1.5rem;
}

@media (min-width: 640px) {
body>main>section>h2 {
font-size: 1.25rem;
}
}



body>main>section>div {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1rem;
}

body>main>section>div>div>img {
display: block;
width: 100%;
max-width: 260px;
border: 1px solid var(--border);
}



/* ── Shared button/link variants ── */


body>main>div {
display: flex;
justify-content: center;
gap: 1rem;
padding: 1rem 1.5rem;
background-color: var(--bg);
border-top: 1px solid var(--border);

position: sticky;
bottom: 0;
}



body>main>div>a {
display: inline-block;
padding: 0.5rem 1.5rem;
border-radius: var(--radius);
border: 1px solid var(--accent);

font-size: var(--fontone);
font-family: var(--font);
font-weight: 500;
text-decoration: none;
}

body>main>div>a.btn-generate {
background-color: var(--accent);
color: #fff;
}

body>main>div>a.btn-download {
background-color: var(--bg);
color: var(--accent);
}

body>main>div>a.btn-generate:hover  {
background-color: var(--accentdark);
border-color: var(--accentdark);
}

body>main>div>a.btn-download:hover {
background-color: var(--surface);
}