5 files changed, 46 insertions, 4 deletions
diff --git a/scss/modules/_btn.scss b/scss/modules/_btn.scss
index 6b5e543..b906262 100644
--- a/scss/modules/_btn.scss
+++ b/scss/modules/_btn.scss
@@ -1,4 +1,4 @@
-.btn {
+:is(button, .btn) {
   display: block;
   border: solid var(--border-width) var(--text-color);
   font-weight: 600;
@@ -12,7 +12,7 @@
     transform 100ms;
 }
 
-.btn:is(:hover, :focus, :focus-visible, :focus-within, :active) {
+:is(button, .btn):is(:hover, :focus, :focus-visible, :focus-within, :active) {
   box-shadow: none;
   outline: none;
   color: var(--text-highlight-color);
@@ -23,12 +23,12 @@
     transform 300ms;
 }
 
-.btn:is(:focus, :focus-visible, :focus-within) {
+:is(button, .btn):is(:focus, :focus-visible, :focus-within) {
   border-color: var(--special-text-highlight-color);
   border-style: dotted;
 }
 
-.btn:active {
+:is(button, .btn):active {
   transform: scale(1.1, 1.1);
 }
 
diff --git a/scss/modules/_index.md.scss b/scss/modules/_index.md.scss
index b426b71..06438bf 100644
--- a/scss/modules/_index.md.scss
+++ b/scss/modules/_index.md.scss
@@ -1,4 +1,5 @@
 @use 'committee.md' as *;
+@use 'form.md' as *;
 @use 'nav.md' as *;
 @use 'schedule.md' as *;
 
diff --git a/scss/modules/_index.scss b/scss/modules/_index.scss
index 822295f..a215d35 100644
--- a/scss/modules/_index.scss
+++ b/scss/modules/_index.scss
@@ -1,6 +1,7 @@
 @use 'btn' as *;
 @use 'committee' as *;
 @use 'footer' as *;
+@use 'form' as *;
 @use 'link' as *;
 @use 'link-gallery' as *;
 @use 'nav' as *;
diff --git a/scss/modules/form.md.scss b/scss/modules/form.md.scss
new file mode 100644
index 0000000..7b44307
--- /dev/null
+++ b/scss/modules/form.md.scss
@@ -0,0 +1,23 @@
+form {
+  display: grid;
+  grid-template-columns: repeat(var(--grid-column-count), 1fr);
+  gap: var(--grid-gutter-width);
+}
+
+label {
+  grid-column: 1 / 2;
+}
+
+input {
+  width: unset;
+  grid-column: 2 / var(--grid-prose-column-count);
+}
+
+:is(input + label, :is(button, [type=submit])) {
+  margin-block-start: 0;
+}
+
+:is(button, [type=submit]) {
+  width: unset;
+  grid-column: calc(var(--grid-prose-column-count) - 2) / var(--grid-prose-column-count);
+}
diff --git a/scss/modules/form.scss b/scss/modules/form.scss
new file mode 100644
index 0000000..ccae48c
--- /dev/null
+++ b/scss/modules/form.scss
@@ -0,0 +1,17 @@
+:is(input, label, button) {
+  display: block;
+}
+
+input {
+  width: var(--width-prose);
+  font-size: var(--font-size-1);
+}
+
+:is(input + label, :is(button, [type=submit])) {
+  margin-block-start: var(--margin-block-md);
+}
+
+:is(button, [type=submit]) {
+  width: var(--grid-column-width);
+  margin-inline-start: auto;
+}