@charset "UTF-8";

/*===============================================================

	contact list

===============================================================*/

.contact-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--margin-s);
  row-gap: var(--margin-s);
}
.contact-item {
  display: grid;
  margin: 0;
  padding: calc( var(--margin) * 1.5 ) var(--margin);
  border: 1px solid var(--color-border);
}
.contact-item:nth-child(-n+2) {
  grid-column: 1 / 3;
}
.contact-group {
  display: flex;
  width: 100%;
  justify-content: space-between;
}
.contact-group > * {
  width: 100%;
}
.contact-group > *:nth-child(1) {
  flex: 13em 0 0;
}
.contact-bindec {
  display: flex;
  width: 100%;
  justify-content: space-between;
}
.contact-bindec > * {
  width: 100%;
}
.contact-bindec > *:nth-child(2) {
  flex: 200px 0 0;
}

@media (max-width: 768px) {
  .contact-item {
    grid-column: 1 / 3;
  }
  .contact-group {
    flex-direction: column;
    gap: var(--margin);
  }
  .contact-group > *:nth-child(1) {
    flex: auto 1 1;
    text-align: center;
  }
}