.frame {
  height: 100%;
  position: relative;
  min-height: 850px;
}

.frame canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: -1;
}

.frame .contact-form > p:first-of-type {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

@media (prefers-reduced-motion) {
  .frame .no-animation-background {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -1;
    background-repeat: no-repeat;
    background-size: cover;
  }

  .frame canvas {
    display: none !important;
  }
}

@media (max-width: 960px) and (prefers-reduced-motion: no-preference) {
  .frame .no-animation-background {
    display: none;
  }
}

/* S */
@media (max-width: 479px) {
  /* 4 columns */
  .frame-wrapper {
    grid-column: 1 / 5;
    padding: 16px;
  }

  .frame .contact-form label.half {
    width: 100%;
  }
}

/* M */
@media (min-width: 480px) and (max-width: 960px) {
  /* 8 columns */
  .frame-wrapper {
    grid-column: 1 / 9;
    padding: 48px;
  }

  .frame .contact-form label.half {
    width: 50%;
  }

  .frame .contact-form label.half:nth-child(4n + 1) {
    padding-right: 16px;
  }
  .frame .contact-form label.half:nth-child(4n + 3) {
    padding-left: 16px;
  }
}

@media (max-width: 960px) {
  .frame .no-animation-background {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -1;
    background-repeat: no-repeat;
    background-size: 2947px 1163px;
  }

  .frame canvas {
    display: none !important;
  }
}

/* L - XL */
@media (min-width: 960px) {
  /* 12 columns */
  .frame-wrapper {
    grid-column: 2 / 10;
    padding: 48px;
  }

  .frame .contact-form label.half {
    width: 50%;
  }

  .frame .contact-form label.half:nth-child(4n + 1) {
    padding-right: 16px;
  }
  .frame .contact-form label.half:nth-child(4n + 3) {
    padding-left: 16px;
  }
}

.frame .contact-form label,
.frame .wpcf7-response-output {
  font-family: "WorkSans", Helvetica, Arial, sans-serif !important;
  font-weight: 600;
  font-size: 14px;
}
.frame-wrapper {
  background-color: var(--background);
}

.frame .contact-form {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.frame .contact-form label input,
.frame .contact-form label textarea {
  width: calc(100% - 16px);
  transform: translate(8px, 8px);
  background-color: var(--gray-10);
  border-right: none;
  border-left: none;
  border-top: none;
  border-bottom: 1px solid var(--foreground);
  outline: 8px solid var(--gray-10);
  margin-top: 8px;
}

.frame .contact-form label input:focus,
.frame .contact-form label textarea:focus {
  border-bottom: 1px solid var(--primary);
}

.frame .contact-form label input,
.frame .contact-form label textarea {
  font-size: 17px;
}

.frame .contact-form label,
.frame .contact-form p {
  margin: 16px 0;
}

.frame .contact-form label.full {
  width: 100%;
}

.frame .contact-form #submit {
  display: flex;
  flex-direction: row-reverse;
  margin-right: 0;
}

.frame .contact-form .wpcf7-spinner {
  display: none;
}