.p-header__contact-wrapper {
  --padding: 0.5rem;
  --size-title: 2.5rem;
  --gap: 0.5rem;

  position: absolute;
  top: var(--spacing);
  right: 0;
  z-index: 10;
  overflow: hidden;
}

.p-header__contact {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
  color: var(--v-color__light);
  fill: var(--v-color__light);
  width: 13rem;
  transform: translateX( calc( 100% - var(--size-title) ) );
  transition: var(--v-transition__default);
  font-size: 70%;
}

.p-header__contact:hover {
  transform: translateX(0);
}

.p-header__contact-group {
  flex: 0 0 100%;
  display: flex;
  gap: var(--gap);
  align-items: stretch;
}

.p-header__contact-group-item {
  background-color: var(--v-color__primary);
  overflow: hidden;
}

.p-header__contact-icon,
.p-header__contact-title {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--size-title);
}

.p-header__contact-icon-svg {
  height: 1.5rem;
}

.p-header__contact-title-inner {
  display: block;
  transform: rotate(90deg);
  transform-origin: center center;
}

.p-header__contact-phone,
.p-header__contact-content {
  flex: 1 1 0%;
}

.p-header__contact-phone .p-header__contact-group-item-inner,
.p-header__contact-content .p-header__contact-group-item-inner {
  padding: var(--padding);
}

.p-header__contact-phone {
  text-decoration: none;
  font-weight: var(--v-font-weight__default--bold);
  line-height: 1.2;
  font-size: 130%;
}

.p-header__contact-phone span {
  font-size: 0.9rem;
  font-weight: var(--v-font-weight__default);
  display: block;
}

.p-header__contact-table td {
  padding: 0 0.5rem 0.2rem 0;
}

@media (min-width: 400px) {
  .p-header__contact {
    width: 16rem;
    font-size: 85%;
  }
}

@media (min-width: 1700px) {
  .p-header__contact {
    --padding: 1rem;
    --size-title: 3.5rem;
    --gap: 1rem;

    width: 22rem;
    font-size: 100%;
  }

  .p-header__contact-icon-svg {
    height: 2rem;
  }

  .p-header__contact-table td {
    padding: 0 1rem 0.5rem 0;
  }

}