diff --git a/app/assets/stylesheets/card-perma.css b/app/assets/stylesheets/card-perma.css index 13933d9da..d9592df61 100644 --- a/app/assets/stylesheets/card-perma.css +++ b/app/assets/stylesheets/card-perma.css @@ -58,7 +58,7 @@ } @media (max-width: 800px) { - --padding-inline: 3cqmin; + --padding-inline: var(--main-padding); column-gap: 0; grid-template-areas: @@ -156,10 +156,6 @@ --btn-color: var(--color-ink-inverted); } } - - @media (max-width: 580px) { - margin-block-start: -2ch; - } } .card-perma__notch--bottom { diff --git a/app/assets/stylesheets/layout.css b/app/assets/stylesheets/layout.css index 40de97e09..ab65b2f10 100644 --- a/app/assets/stylesheets/layout.css +++ b/app/assets/stylesheets/layout.css @@ -9,10 +9,12 @@ } :where(#main) { + --main-padding: clamp(var(--inline-space), 3vw, calc(var(--inline-space) * 3)); + inline-size: 100dvw; margin-inline: auto; max-inline-size: 100dvw; - padding-inline: clamp(var(--inline-space), 3cqmin, calc(var(--inline-space) * 3)); + padding-inline: var(--main-padding); text-align: center; @media print {