@media only screen and (min-width: 0rem) {
  .contact-banner {
    display: flex;
    flex-direction: column;
    gap: var(--space-l);

    .contact-info {
      > .section-title {
        margin-bottom: var(--space-2xs);
      }

      > .section-description {
        margin-bottom: var(--space-m);
        color: var(--color-text);
      }

      > .contact-methods-list {
        display: flex;
        flex-direction: column;
        gap: var(--space-xs);

        font-size: var(--step--1);

        > .contact-method {
          display: flex;
          flex-direction: row;
          gap: var(--space-s);
          align-items: center;

          > .icon {
            display: grid;
            place-items: center;

            width: 3.2em;
            height: 3.2em;
            border-radius: 14px;
            border: 1px solid var(--color-divider);

            > img {
              width: 1.5em;
              height: 1.5em;
            }
          }

          > .content {
            > .label {
              font-weight: 600;
            }

            > a.value {
              display: inline-flex;
              align-items: center;
              gap: 0.125rem;

              text-decoration-line: underline;
              text-decoration-thickness: 1px;
              text-underline-offset: 0.125em;

              > svg {
                width: 1.25em;
              }
            }
          }
        }
      }
    }

    .contact-form {
      --color-form-error: #ca6363;

      display: flex;
      flex-direction: column;
      gap: var(--space-s);

      background: var(--color-surface);
      border-radius: 4px;

      /* Honeypot */
      .yummy-stuff {
        position: absolute;
        left: -10000px;
        top: auto;
        width: 1px;
        height: 1px;
        overflow: hidden;
      }

      .form-row {
        display: grid;
        gap: var(--space-s);
      }

      .form-element {
        display: flex;
        flex-direction: column;
        gap: var(--space-3xs);

        .label {
          color: var(--color-text);
          font-size: var(--step--1);
          font-weight: 600;
        }

        .optional-indicator {
          font-size: var(--step--1);
          font-weight: 500;
          opacity: 0.8;
        }

        .field-hint {
          font-size: var(--step--2);
          opacity: 0.9;
        }

        .input,
        .text-area {
          padding: var(--space-2xs) var(--space-xs);
          border: 1px solid var(--color-divider);

          background: var(--color-surface);
          border-radius: 8px;
          color: var(--color-text);

          transition:
            border-color var(--duration-normal) var(--ease),
            box-shadow var(--duration-normal) var(--ease);
        }

        .text-area {
          resize: vertical;
        }

        .input:hover,
        .text-area:hover {
          border-color: var(--color-accent-divider);
        }

        .input:focus-visible,
        .text-area:focus-visible {
          outline: none;
          border-color: var(--color-accent);
          box-shadow: 0 0 0 2px
            color-mix(in srgb, var(--color-accent) 20%, transparent);
        }

        .input:user-invalid,
        .text-area:user-invalid {
          border-color: var(--color-form-error);
          box-shadow: 0 0 0 2px
            color-mix(in srgb, var(--color-form-error) 20%, transparent);
        }

      }

      .fallback-message {
        font-size: var(--step--2);
      }
    }
  }
}

@media only screen and (min-width: 48rem) {
  .contact-banner {
    flex-direction: row;

    > .contact-info {
      flex: 0.7;

      > .section-label,
      > .section-title {
        text-align: left;
      }
    }

    > .contact-form {
      flex: 1;

      .form-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .btn-primary {
        align-self: flex-start;
      }
    }
  }
}