.contact-hero {
  background:
    linear-gradient(90deg, rgba(23, 37, 56, 0.92), rgba(32, 51, 75, 0)),
    url("../images/service-nails-contact.png") center / cover no-repeat;
}

.contact-layout {
  align-items: start;
  background:
    radial-gradient(circle at 88% 18%, var(--green-100) 0 180px, transparent 181px),
    var(--gray-50);
}

.contact-panel {
  position: sticky;
  top: 28px;
  background: var(--glass-green);
}

.contact-panel h2,
.contact-panel p,
.contact-panel a {
  color: var(--blue-950);
}

.contact-panel::after {
  content: "Orders | Services | Partnerships";
  display: block;
  margin-top: 28px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 22px 6px 22px 6px;
  color: var(--blue-950);
  background: rgba(255, 255, 255, 0.32);
  font-weight: 900;
  backdrop-filter: blur(10px);
}

.contact-form {
  border-top: 5px solid var(--green-600);
}

.contact-form textarea {
  resize: vertical;
}

.contact-form .button {
  min-width: 180px;
}

@media (max-width: 900px) {
  .contact-panel {
    position: static;
  }
}