/*
 * Contact details in a row: round icon, label, link.
 *
 *   <ul class="yb-contact-list">
 *     <li>
 *       <span class="yb-icon-badge" aria-hidden="true"><span class="yb-icon yb-icon--phone"></span></span>
 *       <span class="yb-contact-list__label">Telefonil</span>
 *       <a href="tel:+37255662951">+372 5566 2951</a>
 *     </li>
 *   </ul>
 */
.yb-contact-list {
  display: flex;
  justify-content: space-between;
  gap: var(--yb-space-m);
  margin: 0 0 81px;
  padding: 64px 0;
  list-style: none;
}

.yb-contact-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 15px;
  row-gap: 5px;
  align-items: center;
  flex: 0 1 285px;
}

.yb-contact-list .yb-icon-badge {
  grid-row: span 2;
}

.yb-contact-list__label {
  align-self: end;
  color: var(--yb-color-primary);
}

.yb-contact-list a {
  align-self: start;
  color: var(--yb-color-black);
}

@media (max-width: 1024px) {
  .yb-contact-list {
    margin-bottom: 46px;
    padding: 30px 44px 64px;
  }

  .yb-contact-list .yb-icon-badge {
    width: 53px;
    height: 53px;
  }
}

@media (max-width: 767px) {
  .yb-contact-list {
    flex-direction: column;
    gap: 33px;
    margin-bottom: 81px;
    padding-top: 40px;
  }

  .yb-contact-list li {
    flex: none;
    row-gap: 18px;
  }
}