main {
  display: grid;
  grid-template-areas:
    "header header"
    "content aside"
    "content aside"
    "content aside";
  grid-template-columns: 1fr minmax(1px, 300px);
  column-gap: calc(var(--global-space) * 2);
}
@media screen and (width < 768px) {
  main {
    grid-template-areas:
      "header"
      "content"
      "aside";
    grid-template-columns: 1fr;
  }
}

main header {
  grid-area: header;
}
main .content {
  grid-area: content;

  padding-block-end: calc(var(--global-space) * 4);
}
main .content a {
  color: var(--clr-secondary-400);
  font-weight: bold;
}
main aside {
  grid-area: aside;

  --padding-margin: calc(var(--global-space));

  background-color: var(--clr-secondary-400);
  box-shadow: var(--shadow-md);
  color: var(--text-color-alternative);

  padding: var(--padding-margin);
  padding-block-end: calc(var(--padding-margin) * 4);
  margin-block-end: calc(var(--padding-margin) * 4);
}

aside :where(h2, p, a) {
  font-family: sans-serif;
  font-style: normal;
}

aside h2 {
  text-transform: uppercase;
  font-size: var(--fs-small);
  font-weight: bolder;
}

aside i {
  margin-inline-end: 0.5ch;
}
aside .map-link {
  font-weight: bolder;
  text-transform: uppercase;
  font-size: var(--fs-small);
  text-decoration: none;

  color: inherit;
}
aside .contact-link {
  text-decoration: underline;
  font-weight: bolder;
}

aside .map {
  margin-block-end: var(--global-space);
}

aside .map iframe {
  width: 100%;
  height: 100%;
  min-height: 250px;
}

aside address > * {
  --flow-spacer: calc(var(--global-space) * 2);
}
aside address > div > * {
  --flow-spacer: calc(var(--global-space) / 2);
}

aside .company-name {
  font-weight: bolder;
  font-size: var(--fs-large);
}

main form {
  flex: 5 1 auto;

  display: grid;
  gap: var(--global-space);
}
main form input,
main form textarea,
main form select,
main form button,
main .radio-group {
  border-radius: var(--border-radius);

  box-shadow: var(--shadow-md);

  padding-block: var(--global-space);
  padding-inline: calc(var(--global-space) / 2);
}
main form input,
main form textarea,
main form select,
main .radio-group {
  border: 1px solid var(--clr-neutral-950);
}
main form :where(input[type="radio"], input[type="checkbox"]) {
  margin-inline-start: calc(var(--global-space));
  margin-inline-end: calc(var(--global-space) / 4);
  margin-block-start: calc(var(--global-space) * 0.75);
}
main form textarea {
  resize: vertical;
}
main form button {
  --button-border-size: 0px;

  --buton-background-color: var(--clr-secondary-400);
  --buton-background-color-hover: var(--clr-secondary-300);

  color: var(--text-color-alternative);
}
main .form-group {
  display: flex;
  flex-flow: row wrap;
  gap: calc(var(--global-space));
}
main .form-group > * {
  flex: 1 1 auto;
}

main .form-group.quote-request {
  justify-content: flex-end;
}
main .form-group.quote-request > * {
  flex: 0 1 auto;
}

main .form-group.address > * {
  flex: 1 1 100%;
}
main .form-group.address .chip {
  flex: 1 1 30%;
}

main .form-group.options > * {
  flex: 1 1 40%;
}

main form [data-visible="false"] {
  display: none;
}