.contact-form__panel {
  height: fit-content;
  border-radius: var(--radius-default);
  border: var(--border-default);
  background-color: var(--color-primary);
  color: var(--color-on-primary);
  box-shadow: var(--shadow-default);
}

.contact-form__input {
  width: 100%;
  border-radius: var(--radius-default);
  border: var(--border-secondary);
  background-color: var(--color-primary-light);
  color: var(--color-on-primary);
  box-shadow: var(--shadow-secondary);
  padding: 0.75rem 1rem;
  font-family: var(--font-body);
  font-size: var(--fs-input);
}

.contact-form__input::placeholder {
  color: var(--color-on-primary);
  opacity: 0.6;
}

.contact-form__panel.theme-dark {
  background-color: var(--color-secondary);
  color: var(--color-on-secondary);
  border: var(--border-secondary);
  box-shadow: var(--shadow-secondary);

  .section-subtitle {
    color: var(--color-on-secondary);
  }

  .contact-form__input {
    background-color: var(--color-secondary-light);
    color: var(--color-on-secondary);
    border: var(--border-secondary);
    box-shadow: var(--shadow-secondary);
  }

  .contact-form__input::placeholder {
    color: var(--color-on-secondary);
    opacity: 0.6;
  }
}

.contact-form-section {
  .contact-form__panel {
    background-color: var(--color-secondary-light);
    color: var(--color-on-secondary);

    .section-subtitle {
      color: var(--color-on-secondary);
    }
  }
}

/* MOBILE */
.contact-form-section--detailed {
  .page-section__inner {
    display: grid;
    gap: 2rem;
  }
}

.contact-form-section--compact {
  .page-section__inner {
    display: grid;
    gap: 2rem;
  }
}

/* DESKTOP */
@media(min-width: 768px) {
  .contact-form-section--detailed {
    .page-section__inner {
      grid-template-columns: 1fr 1fr;
      gap: 5rem;
    }
  }

  .contact-form-section--compact {
    .page-section__inner {
      grid-template-columns: 1fr 2fr;
      gap: 5rem;
    }
  }
}