.contact-list {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  row-gap: var(--row-gap);
}
.contact-list.inline {
  flex-direction: row;
  column-gap: var(--column-gap);
}
.contact-list:not(.inline) {
  display: flex;
  flex-direction: column;
}

.contact-item {
  display: flex;
  column-gap: 10px;
  row-gap: 4px;
}
.contact-list.inline .contact-item {
  display: inline-flex;
}

.contact-item.horizontal {
  align-items: center;
}
.contact-item.horizontal.has-title {
  align-items: flex-start;
}
.contact-item.horizontal.left .contact-item-content {
  text-align: start;
}
.contact-item.horizontal.center .contact-item-content {
  text-align: center;
}
.contact-item.horizontal.right .contact-item-content {
  text-align: end;
}

.contact-item.vertical {
  flex-direction: column;
  align-items: center;
  column-gap: 8px;
  row-gap: 8px;
}
.contact-item.vertical.left {
  align-items: flex-start;
}
.contact-item.vertical.right {
  align-items: flex-end;
}
.contact-item.vertical.center {
  align-items: center;
}
.contact-item.vertical .contact-item-title {
  margin-bottom: 8px;
}
.contact-item.vertical.left .contact-item-content {
  text-align: start;
}
.contact-item.vertical.center .contact-item-content {
  text-align: center;
}
.contact-item.vertical.right .contact-item-content {
  text-align: end;
}

.contact-item-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--icon-bg-size);
  height: var(--icon-bg-size);
  border-radius: var(--icon-bg-radius);
  overflow: hidden;
  background-color: var(--icon-bg-color);
  border: 1px solid var(--icon-bg-border-color);
}
.contact-item-icon > i {
  line-height: 1;
  font-size: var(--icon-size);
  color: var(--icon-color);
}
.contact-item-icon > img {
  width: var(--icon-size);
  aspect-ratio: 1;
  object-fit: cover;
}
/* .contact-item.horizontal.has-title .contact-item-icon > i {
  line-height: inherit;
} */

.contact-item-title {
  color: var(--title-text-color);
}
.contact-item-value {
  color: var(--text-color);
}
.contact-item-title + .contact-item-value {
  margin-top: 4px;
}