.contact-section .container{
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--y-space-26);
  padding-top: var(--y-space-30);
}
.contact-section .container .right{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--y-space-20);
  color: var(--y-color-text);
  background-color: var(--y-color-fg);
  border-radius: var(--y-space-14);
  padding: var(--y-space-30);
}
.contact-section .container .right form{
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--y-space-20);
}
.contact-section .container .right form input,
.contact-section .container .right form textarea{
  width: 100%;
  box-sizing: border-box;
}
.contact-section .container .right h2{
  color:color-mix(in oklab, var(--y-color-secondary) 50%, black);
}
.contact-section .container .right h2 i{
  background-color: color-mix(in oklab, var(--y-color-secondary) 50%, black);
}
.contact-section .container .right input,
.contact-section .container .right textarea{
  width: 100%;
  padding: var(--y-space-16);
  border-radius: var(--y-space-16);
  border: 1px solid var(--y-color-border);
  background-color: var(--y-color-bg);
}
.contact-section .container .right input:focus,
.contact-section .container .right textarea:focus{
  border-color: var(--y-color-secondary);
  box-shadow: 0 0 0 3px
    color-mix(in oklab, var(--y-color-secondary) 20%, transparent);
  outline: none;
}
.contact-section .container .right input::placeholder,
.contact-section .container .right textarea::placeholder{
  font-size: var(--y-text-sm);
  font-weight: 400;
  color: var(--y-color-text);
}
.contact-section .container .right textarea{
  height: 200px;
}

.contact-section .container .left{
  display: flex;
  flex-direction: column;
  gap: var(--y-space-20);
  color: var(--y-color-bg);
  background-color: color-mix(in oklab, var(--y-color-secondary) 50%, black);
  padding: var(--y-space-30);
  border-radius: var(--y-space-14);
}
.contact-section .container h2{
  font-size: var(--y-space-32);
  font-weight: 600;
  padding-bottom: var(--y-space-20);
  display: flex;
  align-items: center;
  gap: var(--y-space-10);
}
.contact-section .container h2 i{
  color: var(--y-color-bg);
  background-color: var(--y-color-secondary);
  font-size: var(--y-space-24);
}
.contact-section .container h3{
  font-size: var(--y-space-24);
  font-weight: 600;
}
.contact-section .container p{
  font-size: var(--y-space-16);
  font-weight: 400;
}
.contact-section .container .contact-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--y-space-20);
}
.contact-section .container .contact-grid .contact-item{
  display: flex;
  align-items: center;
  gap: var(--y-space-10);
  border-radius: var(--y-space-16);
  padding: var(--y-space-10);
  background-color: var(--y-color-secondary);
  color: var(--y-color-bg);
  width: 100%;
}

.contact-section .container i{
  width: var(--y-space-48);
  aspect-ratio: 1/1;
  display: grid;
  place-items: center;
  border-radius: var(--y-space-32);
}
.contact-section .container .contact-grid .contact-item i{
  color: var(--y-color-secondary);
font-size: var(--y-space-24);
  background-color: var(--y-color-bg);
}
.contact-section .container .contact-grid .contact-item .content{
  display: flex;
  flex-direction: column;
  gap: var(--y-space-10);
}

/* --- Responsive --- */
@media (max-width: 1024px) {
  .contact-section .container {
    grid-template-columns: 1fr;
    padding-top: var(--y-space-24);
  }

  .contact-section .container .right {
    order: 1;
  }

  .contact-section .container .left {
    order: 2;
  }
}

@media (max-width: 768px) {
  .contact-section .container {
    gap: var(--y-space-20);
    padding-inline: var(--y-space-12);
  }

  .contact-section .container .right,
  .contact-section .container .left {
    padding: var(--y-space-20);
  }

  .contact-section .container h2 {
    font-size: 1.4rem;
  }

  .contact-section .container h3 {
    font-size: 1.1rem;
  }

  .contact-section .container p {
    font-size: 0.95rem;
  }

  .contact-section .container .contact-grid {
    gap: var(--y-space-14);
  }
}

@media (max-width: 540px) {
  .contact-section .container {
    gap: var(--y-space-16);
  }

  .contact-section .container .right input,
  .contact-section .container .right textarea {
    padding: var(--y-space-12);
  }

  .contact-section .container .right textarea {
    height: 160px;
  }

  .contact-section .container i {
    width: var(--y-space-40);
  }

  .contact-section .container .contact-grid .contact-item {
    gap: var(--y-space-8);
  }
}