Checkbox Grid -> Mobile

.checkbox_grid_wrapper {
 display: grid;
 grid-auto-columns: 1fr;
 gap: 16px;
 grid-template-columns: 1fr 1fr 1fr;
 grid-template-rows: auto;
}

@media screen and (max-width: 991px) {
 .checkbox_grid_wrapper {
   grid-template-columns: 1fr 1fr;
 }
}

@media screen and (max-width: 767px) {
 .checkbox_grid_wrapper {
   grid-template-columns: 1fr 1fr;
 }
}

@media screen and (max-width: 479px) {
 .checkbox_grid_wrapper {
   width: 100%;
   place-items: center;
   gap: 1em;
   grid-template-columns: 1fr;
 }
}

‍

Textfield CSS

.form_text_field {
 height: 3em;
 margin-bottom: 0.5em;
 padding: 1em;
 border-style: none;
 border-width: 0px;
 border-color: black;
 border-top-left-radius: var(--12px-rounded);
 border-top-right-radius: var(--12px-rounded);
 border-bottom-left-radius: var(--12px-rounded);
 border-bottom-right-radius: var(--12px-rounded);
 color: var(--dark-grey);
 font-size: 1.1em;
 font-weight: 500;
 letter-spacing: 0.02em;
}

.form_text_field.is-example {
 margin-bottom: 1em;
 border-radius: 12px;
}

@media screen and (max-width: 479px) {
 .form_text_field {
   height: 3.5em;
   padding: 0.5em;
   border-top-left-radius: var(--8px-rounded);
   border-top-right-radius: var(--8px-rounded);
   border-bottom-left-radius: var(--8px-rounded);
   border-bottom-right-radius: var(--8px-rounded);
   font-size: 1rem;
 }
}

‍

Paragraph Field

.form_paragraph_field {
 max-width: 100%;
 min-height: 6em;
 min-width: 100%;
 margin-bottom: 0.5em;
 padding: 0.5em 0.5em 0.5em 1em;
 border-style: none;
 border-width: 0px;
 border-color: black;
 border-top-left-radius: var(--12px-rounded);
 border-top-right-radius: var(--12px-rounded);
 border-bottom-left-radius: var(--12px-rounded);
 border-bottom-right-radius: var(--12px-rounded);
 color: var(--dark-grey);
 font-size: 1.1em;
 font-weight: 500;
 letter-spacing: 0.02em;
}

@media screen and (max-width: 479px) {
 .form_paragraph_field {
   min-height: 7.5em;
   padding-top: 0.7em;
   padding-left: 0.5em;
   border-top-left-radius: var(--8px-rounded);
   border-top-right-radius: var(--8px-rounded);
   border-bottom-left-radius: var(--8px-rounded);
   border-bottom-right-radius: var(--8px-rounded);
   font-size: 1rem;
 }
}

‍

Radio Button

.form_radio_button {
 width: 1.8em;
 height: 1.8em;
 margin-top: 0px;
 margin-right: 0.8em;
 border-style: solid;
 border-width: 1px;
 border-color: rgba(40, 40, 40, 0.25);
 background-color: var(--white);
}

Checkbox

.form_checkbox {
 width: 1.8em;
 height: 1.8em;
 margin-right: 0.8em;
 border-style: solid;
 border-width: 1px;
 border-color: rgba(40, 40, 40, 0.25);
 border-radius: 6px;
 background-color: var(--white);
}

Button back

.form_button {
 width: 100%;
 height: 3em;
 margin-top: 2em;
 margin-right: auto;
 margin-left: auto;
 padding: 0.5em 1.5em;
 border-top-left-radius: var(--12px-rounded);
 border-top-right-radius: var(--12px-rounded);
 border-bottom-left-radius: var(--12px-rounded);
 border-bottom-right-radius: var(--12px-rounded);
 background-color: white;
 color: var(--dark-grey);
 font-weight: 700;
 letter-spacing: 0.05em;
}

.form_button.-wfp-hover,
.form_button:hover {
 box-shadow: rgba(0, 0, 0, 0.1) 0px 5px 10px 0px;
}

.form_button.is-back {
 max-width: 25em;
 margin-top: 2em;
 background-color: var(--white);
 background-image: none;
}

@media screen and (max-width: 479px) {
 .form_button {
   height: 4em;
   font-size: 1rem;
 }
}

‍

Button submit/continue

.form_button {
 width: 100%;
 height: 3em;
 margin-top: 2em;
 margin-right: auto;
 margin-left: auto;
 padding: 0.5em 1.5em;
 border-top-left-radius: var(--12px-rounded);
 border-top-right-radius: var(--12px-rounded);
 border-bottom-left-radius: var(--12px-rounded);
 border-bottom-right-radius: var(--12px-rounded);
 background-color: transparent;
 background-image: linear-gradient(135deg, rgb(203, 237, 169), rgb(191, 216, 140) 50%, rgb(196, 206, 128));
 color: var(--dark-grey);
 font-weight: 700;
 letter-spacing: 0.05em;
}

.form_button.-wfp-hover,
.form_button:hover {
 box-shadow: rgba(0, 0, 0, 0.1) 0px 5px 10px 0px;
}

.form_button.is-example {
 max-width: 25em;
 margin-top: 1em;
 margin-right: auto;
 margin-left: auto;
}

@media screen and (max-width: 479px) {
 .form_button {
   height: 4em;
   font-size: 1rem;
 }
}

‍

Variables

Dark Grey: #282828

White: #FFFFFF

Cream White: #F2EEE6