我正在尝试一个名为pico.css的CSS框架，我已经开始使用一个单独的自定义样式表来设计布局，该样式表覆盖了皮科样式表提供的一些默认样式。
我已经在自定义样式表中创建了一个网格容器，用于对元素进行如下布局：

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(6, 200px);
    grid-column-gap: var(--grid-spacing-horizontal);
    grid-row-gap: var(--grid-spacing-vertical);
    grid-template-areas:
        "image text  text"
        "image name  name"
        "image email email"
        "image phone phone"
        "image pass  pass"
        "image btn   btn";
}

子项适用以下规则：

/* image */
.grid-item-1 {
    grid-area: image;
}

/* text */
.grid-item-2 {
    grid-area: text;
}

/* first and last name */
.grid-item-3 {
    grid-area: name;
}

/* email and phone */
.grid-item-4 {
    grid-area: email;
}

/* passwords */
.grid-item-5 {
    grid-area: pass;
}

/* submit button */
.grid-item-6 {
    grid-area: btn;
}

问题

布局没有按预期显示，我正在调试导致它的原因。我相信有一些冲突的风格来自主pico.slim.css样式表，但我不确定要更改什么。这是我试图实现的布局：

示例

为了清楚起见，请参考这个Codepen link，它显示了我描述的当前布局问题。在注解/* CUSTOM CSS */的底部是我应用的其他css样式。

我所尝试的

我把grid-template-rows: repeat(6, 1fr);改成了grid-template-rows: repeat(6, 200px);，这有助于把元素定位在更靠近grid-item-1的位置，但是.grid-item-2的高度把其余的元素都推到了页面下方太远的地方。另外，看起来好像下面所有的元素都被放到了.grid-item-3中，而不是按照我自定义的css中定义的网格结构。
我尝试过删除pico.css提供的container类样式，但没有任何改进。
我试过用！important标记CSS的各个部分，但无法使用此方法进行纠正。
我一直在查看Firefox devtools中的代码，试图发现哪种风格是冲突的，但我无法看到导致问题的原因。从昨天开始，我就一直在这个问题上，感觉我已经到了无法自己解决这个问题的地步。

:root {
  --font-family: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --line-height: 1.5;
  --font-weight: 400;
  --font-size: 16px;
  --border-radius: 0.25rem;
  --border-width: 1px;
  --outline-width: 3px;
  --spacing: 1rem;
  --typography-spacing-vertical: 1.5rem;
  --block-spacing-vertical: calc(var(--spacing) * 2);
  --block-spacing-horizontal: var(--spacing);
  --grid-spacing-vertical: 0;
  --grid-spacing-horizontal: var(--spacing);
  --form-element-spacing-vertical: 0.75rem;
  --form-element-spacing-horizontal: 1rem;
  --nav-element-spacing-vertical: 1rem;
  --nav-element-spacing-horizontal: 0.5rem;
  --nav-link-spacing-vertical: 0.5rem;
  --nav-link-spacing-horizontal: 0.5rem;
  --form-label-font-weight: var(--font-weight);
  --transition: 0.2s ease-in-out;
  --modal-overlay-backdrop-filter: blur(0.25rem);
}

@media (min-width: 576px) {
   :root {
    --font-size: 17px;
  }
}

@media (min-width: 768px) {
   :root {
    --font-size: 18px;
  }
}

@media (min-width: 992px) {
   :root {
    --font-size: 19px;
  }
}

@media (min-width: 1200px) {
   :root {
    --font-size: 20px;
  }
}

a {
  --text-decoration: none;
}

a.secondary,
a.contrast {
  --text-decoration: underline;
}

small {
  --font-size: 0.875em;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  --font-weight: 700;
}

h1 {
  --font-size: 2rem;
  --typography-spacing-vertical: 3rem;
}

h2 {
  --font-size: 1.75rem;
  --typography-spacing-vertical: 2.625rem;
}

h3 {
  --font-size: 1.5rem;
  --typography-spacing-vertical: 2.25rem;
}

h4 {
  --font-size: 1.25rem;
  --typography-spacing-vertical: 1.874rem;
}

h5 {
  --font-size: 1.125rem;
  --typography-spacing-vertical: 1.6875rem;
}

[type=checkbox],
[type=radio] {
  --border-width: 2px;
}

[type=checkbox][role=switch] {
  --border-width: 3px;
}

thead th,
thead td,
tfoot th,
tfoot td {
  --border-width: 3px;
}

:not(thead, tfoot)>*>td {
  --font-size: 0.875em;
}

pre,
code,
kbd,
samp {
  --font-family: "Menlo", "Consolas", "Roboto Mono", "Ubuntu Monospace", "Noto Mono", "Oxygen Mono", "Liberation Mono", monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

kbd {
  --font-weight: bolder;
}

progress,
[type=checkbox],
[type=radio],
[type=range] {
  accent-color: var(--primary);
}

/**
 * Document
 * Content-box & Responsive typography
 */

*,
*::before,
*::after {
  box-sizing: border-box;
  background-repeat: no-repeat;
}

::before,
::after {
  text-decoration: inherit;
  vertical-align: inherit;
}

:where(:root) {
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background-color: var(--background-color);
  color: var(--color);
  font-weight: var(--font-weight);
  font-size: var(--font-size);
  line-height: var(--line-height);
  font-family: var(--font-family);
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
  cursor: default;
  -moz-tab-size: 4;
  -o-tab-size: 4;
  tab-size: 4;
}

/**
 * Sectioning
 * Container and responsive spacings for header, main, footer
 */

main {
  display: block;
}

body {
  width: 100%;
  margin: 0;
}

body>header,
body>main,
body>footer {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding: var(--block-spacing-vertical) 0;
}

/**
* Container
*/

.container,
.container-fluid {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: var(--spacing);
  padding-left: var(--spacing);
}

@media (min-width: 576px) {
  .container {
    max-width: 510px;
    padding-right: 0;
    padding-left: 0;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 700px;
  }
}

@media (min-width: 992px) {
  .container {
    max-width: 920px;
  }
}

@media (min-width: 1200px) {
  .container {
    max-width: 1130px;
  }
}

/**
 * Section
 * Responsive spacings for section
 */

section {
  margin-bottom: var(--block-spacing-vertical);
}

/**
* Grid
* Minimal grid system with auto-layout columns
*/

.grid {
  grid-column-gap: var(--grid-spacing-horizontal);
  grid-row-gap: var(--grid-spacing-vertical);
  display: grid;
  grid-template-columns: 1fr;
  margin: 0;
}

@media (min-width: 992px) {
  .grid {
    grid-template-columns: repeat(auto-fit, minmax(0%, 1fr));
  }
}

.grid>* {
  min-width: 0;
}

/**
 * Horizontal scroller (<figure>)
 */

figure {
  display: block;
  margin: 0;
  padding: 0;
  overflow-x: auto;
}

figure figcaption {
  padding: calc(var(--spacing) * 0.5) 0;
  color: var(--muted-color);
}

/**
 * Typography
 */

b,
strong {
  font-weight: bolder;
}

sub,
sup {
  position: relative;
  font-size: 0.75em;
  line-height: 0;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

address,
blockquote,
dl,
figure,
form,
ol,
p,
pre,
table,
ul {
  margin-top: 0;
  margin-bottom: var(--typography-spacing-vertical);
  color: var(--color);
  font-style: normal;
  font-weight: var(--font-weight);
  font-size: var(--font-size);
}

a,
[role=link] {
  --color: var(--primary);
  --background-color: transparent;
  outline: none;
  background-color: var(--background-color);
  color: var(--color);
  -webkit-text-decoration: var(--text-decoration);
  text-decoration: var(--text-decoration);
}

a:is([aria-current],
 :hover,
 :active,
 :focus),
[role=link]:is([aria-current],
 :hover,
 :active,
 :focus) {
  --color: var(--primary-hover);
  --text-decoration: underline;
}

a:focus,
[role=link]:focus {
  --background-color: var(--primary-focus);
}

a.secondary,
[role=link].secondary {
  --color: var(--secondary);
}

a.secondary:is([aria-current],
 :hover,
 :active,
 :focus),
[role=link].secondary:is([aria-current],
 :hover,
 :active,
 :focus) {
  --color: var(--secondary-hover);
}

a.secondary:focus,
[role=link].secondary:focus {
  --background-color: var(--secondary-focus);
}

a.contrast,
[role=link].contrast {
  --color: var(--contrast);
}

a.contrast:is([aria-current],
 :hover,
 :active,
 :focus),
[role=link].contrast:is([aria-current],
 :hover,
 :active,
 :focus) {
  --color: var(--contrast-hover);
}

a.contrast:focus,
[role=link].contrast:focus {
  --background-color: var(--contrast-focus);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 0;
  margin-bottom: var(--typography-spacing-vertical);
  color: var(--color);
  font-weight: var(--font-weight);
  font-size: var(--font-size);
  font-family: var(--font-family);
}

h1 {
  --color: var(--h1-color);
}

h2 {
  --color: var(--h2-color);
}

h3 {
  --color: var(--h3-color);
}

h4 {
  --color: var(--h4-color);
}

h5 {
  --color: var(--h5-color);
}

h6 {
  --color: var(--h6-color);
}

:where(address,
blockquote,
dl,
figure,
form,
ol,
p,
pre,
table,
ul)~ :is(h1,
h2,
h3,
h4,
h5,
h6) {
  margin-top: var(--typography-spacing-vertical);
}

hgroup,
.headings {
  margin-bottom: var(--typography-spacing-vertical);
}

hgroup>*,
.headings>* {
  margin-bottom: 0;
}

hgroup>*:last-child,
.headings>*:last-child {
  --color: var(--muted-color);
  --font-weight: unset;
  font-size: 1rem;
  font-family: unset;
}

p {
  margin-bottom: var(--typography-spacing-vertical);
}

small {
  font-size: var(--font-size);
}

:where(dl,
ol,
ul) {
  padding-right: 0;
  padding-left: var(--spacing);
  -webkit-padding-start: var(--spacing);
  padding-inline-start: var(--spacing);
  -webkit-padding-end: 0;
  padding-inline-end: 0;
}

:where(dl,
ol,
ul) li {
  margin-bottom: calc(var(--typography-spacing-vertical) * 0.25);
}

:where(dl,
ol,
ul) :is(dl,
ol,
ul) {
  margin: 0;
  margin-top: calc(var(--typography-spacing-vertical) * 0.25);
}

ul li {
  list-style: square;
}

mark {
  padding: 0.125rem 0.25rem;
  background-color: var(--mark-background-color);
  color: var(--mark-color);
  vertical-align: baseline;
}

blockquote {
  display: block;
  margin: var(--typography-spacing-vertical) 0;
  padding: var(--spacing);
  border-right: none;
  border-left: 0.25rem solid var(--blockquote-border-color);
  -webkit-border-start: 0.25rem solid var(--blockquote-border-color);
  border-inline-start: 0.25rem solid var(--blockquote-border-color);
  -webkit-border-end: none;
  border-inline-end: none;
}

blockquote footer {
  margin-top: calc(var(--typography-spacing-vertical) * 0.5);
  color: var(--blockquote-footer-color);
}

abbr[title] {
  border-bottom: 1px dotted;
  text-decoration: none;
  cursor: help;
}

ins {
  color: var(--ins-color);
  text-decoration: none;
}

del {
  color: var(--del-color);
}

::-moz-selection {
  background-color: var(--primary-focus);
}

::selection {
  background-color: var(--primary-focus);
}

/**
 * Embedded content
 */

:where(audio,
canvas,
iframe,
img,
svg,
video) {
  vertical-align: middle;
}

audio,
video {
  display: inline-block;
}

audio:not([controls]) {
  display: none;
  height: 0;
}

:where(iframe) {
  border-style: none;
}

img {
  max-width: 100%;
  height: auto;
  border-style: none;
}

:where(svg:not([fill])) {
  fill: currentColor;
}

svg:not(:root) {
  overflow: hidden;
}

/**
 * Button
 */

button {
  margin: 0;
  overflow: visible;
  font-family: inherit;
  text-transform: none;
}

button,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
}

button {
  display: block;
  width: 100%;
  margin-bottom: var(--spacing);
}

[role=button] {
  display: inline-block;
  text-decoration: none;
}

button,
input[type=submit],
input[type=button],
input[type=reset],
[role=button] {
  --background-color: var(--primary);
  --border-color: var(--primary);
  --color: var(--primary-inverse);
  --box-shadow: var(--button-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
  padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--border-radius);
  outline: none;
  background-color: var(--background-color);
  box-shadow: var(--box-shadow);
  color: var(--color);
  font-weight: var(--font-weight);
  font-size: 1rem;
  line-height: var(--line-height);
  text-align: center;
  cursor: pointer;
}

/**
 * Form elements
 */

input,
optgroup,
select,
textarea {
  margin: 0;
  font-size: 1rem;
  line-height: var(--line-height);
  font-family: inherit;
  letter-spacing: inherit;
}

input {
  overflow: visible;
}

select {
  text-transform: none;
}

legend {
  max-width: 100%;
  padding: 0;
  color: inherit;
  white-space: normal;
}

textarea {
  overflow: auto;
}

[type=checkbox],
[type=radio] {
  padding: 0;
}

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

[type=search] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}

[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

::-moz-focus-inner {
  padding: 0;
  border-style: none;
}

:-moz-focusring {
  outline: none;
}

:-moz-ui-invalid {
  box-shadow: none;
}

::-ms-expand {
  display: none;
}

[type=file],
[type=range] {
  padding: 0;
  border-width: 0;
}

input:not([type=checkbox],
[type=radio],
[type=range]) {
  height: calc(1rem * var(--line-height) + var(--form-element-spacing-vertical) * 2 + var(--border-width) * 2);
}

fieldset {
  margin: 0;
  margin-bottom: var(--spacing);
  padding: 0;
  border: 0;
}

label,
fieldset legend {
  display: block;
  margin-bottom: calc(var(--spacing) * 0.25);
  font-weight: var(--form-label-font-weight, var(--font-weight));
}

input:not([type=checkbox],
[type=radio]),
select,
textarea {
  width: 100%;
}

input:not([type=checkbox],
[type=radio],
[type=range],
[type=file]),
select,
textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);
}

input,
select,
textarea {
  --background-color: var(--form-element-background-color);
  --border-color: var(--form-element-border-color);
  --color: var(--form-element-color);
  --box-shadow: none;
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--border-radius);
  outline: none;
  background-color: var(--background-color);
  box-shadow: var(--box-shadow);
  color: var(--color);
  font-weight: var(--font-weight);
}

input:not([type=submit],
[type=button],
[type=reset],
[type=checkbox],
[type=radio],
[readonly]):is(:active,
 :focus),
:where(select,
textarea):is(:active,
 :focus) {
  --background-color: var(--form-element-active-background-color);
}

input:not([type=submit],
[type=button],
[type=reset],
[role=switch],
[readonly]):is(:active,
 :focus),
:where(select,
textarea):is(:active,
 :focus) {
  --border-color: var(--form-element-active-border-color);
}

input:not([type=submit],
[type=button],
[type=reset],
[type=range],
[type=file],
[readonly]):focus,
select:focus,
textarea:focus {
  --box-shadow: 0 0 0 var(--outline-width) var(--form-element-focus-color);
}

input:not([type=submit],
[type=button],
[type=reset])[disabled],
select[disabled],
textarea[disabled],
:where(fieldset[disabled]) :is(input:not([type=submit],
[type=button],
[type=reset]),
select,
textarea) {
  --background-color: var(--form-element-disabled-background-color);
  --border-color: var(--form-element-disabled-border-color);
  opacity: var(--form-element-disabled-opacity);
  pointer-events: none;
}

:where(input,
select,
textarea):not([type=checkbox],
[type=radio],
[type=date],
[type=datetime-local],
[type=month],
[type=time],
[type=week])[aria-invalid] {
  padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem);
  padding-left: var(--form-element-spacing-horizontal);
  -webkit-padding-start: var(--form-element-spacing-horizontal);
  padding-inline-start: var(--form-element-spacing-horizontal);
  -webkit-padding-end: calc(var(--form-element-spacing-horizontal) + 1.5rem);
  padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem);
  background-position: center right 0.75rem;
  background-size: 1rem auto;
  background-repeat: no-repeat;
}

:where(input,
select,
textarea):not([type=checkbox],
[type=radio],
[type=date],
[type=datetime-local],
[type=month],
[type=time],
[type=week])[aria-invalid=false] {
  background-image: var(--icon-valid);
}

:where(input,
select,
textarea):not([type=checkbox],
[type=radio],
[type=date],
[type=datetime-local],
[type=month],
[type=time],
[type=week])[aria-invalid=true] {
  background-image: var(--icon-invalid);
}

:where(input,
select,
textarea)[aria-invalid=false] {
  --border-color: var(--form-element-valid-border-color);
}

:where(input,
select,
textarea)[aria-invalid=false]:is(:active,
 :focus) {
  --border-color: var(--form-element-valid-active-border-color);
  --box-shadow: 0 0 0 var(--outline-width) var(--form-element-valid-focus-color);
}

:where(input,
select,
textarea)[aria-invalid=true] {
  --border-color: var(--form-element-invalid-border-color);
}

:where(input,
select,
textarea)[aria-invalid=true]:is(:active,
 :focus) {
  --border-color: var(--form-element-invalid-active-border-color);
  --box-shadow: 0 0 0 var(--outline-width) var(--form-element-invalid-focus-color);
}

[dir=rtl] :where(input,
select,
textarea):not([type=checkbox],
[type=radio]):is([aria-invalid],
[aria-invalid=true],
[aria-invalid=false]) {
  background-position: center left 0.75rem;
}

input::placeholder,
input::-webkit-input-placeholder,
textarea::placeholder,
textarea::-webkit-input-placeholder,
select:invalid {
  color: var(--form-element-placeholder-color);
  opacity: 1;
}

input:not([type=checkbox],
[type=radio]),
select,
textarea {
  margin-bottom: var(--spacing);
}

select::-ms-expand {
  border: 0;
  background-color: transparent;
}

select:not([multiple],
[size]) {
  padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem);
  padding-left: var(--form-element-spacing-horizontal);
  -webkit-padding-start: var(--form-element-spacing-horizontal);
  padding-inline-start: var(--form-element-spacing-horizontal);
  -webkit-padding-end: calc(var(--form-element-spacing-horizontal) + 1.5rem);
  padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem);
  background-image: var(--icon-chevron);
  background-position: center right 0.75rem;
  background-size: 1rem auto;
  background-repeat: no-repeat;
}

[dir=rtl] select:not([multiple],
[size]) {
  background-position: center left 0.75rem;
}

:where(input,
select,
textarea,
.grid)+small {
  display: block;
  width: 100%;
  margin-top: calc(var(--spacing) * -0.75);
  margin-bottom: var(--spacing);
  color: var(--muted-color);
}

label> :where(input,
select,
textarea) {
  margin-top: calc(var(--spacing) * 0.25);
}

/**
 * Table
 */

:where(table) {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  text-indent: 0;
}

th,
td {
  padding: calc(var(--spacing) / 2) var(--spacing);
  border-bottom: var(--border-width) solid var(--table-border-color);
  color: var(--color);
  font-weight: var(--font-weight);
  font-size: var(--font-size);
  text-align: left;
  text-align: start;
}

tfoot th,
tfoot td {
  border-top: var(--border-width) solid var(--table-border-color);
  border-bottom: 0;
}

table[role=grid] tbody tr:nth-child(odd) {
  background-color: var(--table-row-stripped-background-color);
}

/**
 * Accessibility & User interaction
 */

[aria-controls] {
  cursor: pointer;
}

[aria-disabled=true],
[disabled] {
  cursor: not-allowed;
}

[aria-hidden=false][hidden] {
  display: initial;
}

[aria-hidden=false][hidden]:not(:focus) {
  clip: rect(0, 0, 0, 0);
  position: absolute;
}

a,
area,
button,
input,
label,
select,
summary,
textarea,
[tabindex] {
  -ms-touch-action: manipulation;
}

[dir=rtl] {
  direction: rtl;
}

/* CUSTOM CSS */

[data-theme=light],
:root:not([data-theme=dark]) {
  --primary: hsl(329, 98%, 49%);
  --primary-hover: hsl(329, 90%, 40%);
  --primary-focus: rgba(217, 32, 107, 0.125);
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(6, 1fr);
  grid-column-gap: var(--grid-spacing-horizontal);
  grid-row-gap: var(--grid-spacing-vertical);
  grid-template-areas: "image text  text" "image name  name" "image email email" "image phone phone" "image pass  pass" "image btn   btn";
}

/* image */

.grid-item-1 {
  grid-area: image;
}

/* text */

.grid-item-2 {
  grid-area: text;
}

/* first and last name */

.grid-item-3 {
  grid-area: name;
}

/* email and phone */

.grid-item-4 {
  grid-area: email;
}

/* passwords */

.grid-item-5 {
  grid-area: pass;
}

/* submit button */

.grid-item-6 {
  grid-area: btn;
}

.main-img {
  border-radius: var(--border-radius);
  width: 100%;
  max-height: 100%;
  object-fit: cover;
}

/* adds color fullstop after h1 */

h1::after {
  content: ".";
  color: var(--primary);
}

h1 {
  margin-bottom: var(--grid-spacing-horizontal);
}

.line-break {
  margin: 0;
}

<main class="container">
  <div class="grid-container">
    <div class="grid-item-1">
      <img class="main-img" src="https://scottwright-dev.github.io/hosted-assets/zak-7wBFsHWQDlk-unsplash.jpg" alt="abstract neon shapes">
    </div>
    <div class="grid-item-2">
      <h1>CircleSync</h1>
      <p class="line-break">Experience the precision and innovation of CircleSync.</p>
      <p class="line-break">Join our community and elevate your online presence with expert guidance and cutting-edge solutions.</p>
    </div>
    <form method="POST" action="#">
      <div class="grid-item-3">
        <label for="firstname">
                        First Name *
                        <input type="text" id="firstname" name="firstname" placeholder="Enter First Name" required>
                    </label>
        <label for="lastname">
                        Last Name *
                        <input type="text" id="lastname" name="lastname" placeholder="Enter Last Name" required>
                    </label>
      </div>
      <div class="grid-item-4">
        <label for="email">
                        Email *
                        <input type="email" id="email" name="email" placeholder="Enter Email" required>
                    </label>
        <label for="phone">
                        Phone
                        <input type="tel" id="phone" name="phone" placeholder="Enter Phone Number">
                    </label>
      </div>
      <div class="grid-item-5">
        <label for="password">
                        Password *
                        <input type="password" id="password" name="password" placeholder="Enter Password" pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,}$" required>
                    </label>
        <label for="password-confirm">
                        Confirm *
                        <input type="password" id="password-confirm" name="password-confirm" placeholder="Confirm" pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,}$" required>
                    </label>
      </div>
      <div class="grid-item-6">
        <small>* denotes required field</small>
        <button type="submit">Sign Up</button>
        <small>Already have an account? <a href="#">Log in</a></small>
      </div>
    </form>
  </div>
</main>