.faq,
.faq * { box-sizing: border-box; }

.faq {
  font-family: var(--font-family-base);
  font-optical-sizing: none;
}

.faq__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-block: calc(
    var(--spacing-60) + var(--bp-tablet) * (var(--spacing-80) - var(--spacing-60))
  );
}

.faq__head {
  align-self: stretch;
  padding-bottom: calc(
    var(--spacing-20) + var(--bp-tablet) * (var(--spacing-24) - var(--spacing-20))
  );
}

.faq__title-wrap {
  display: flex;
  align-items: flex-start;
}

.faq__title-wrap::before,
.faq__title-wrap::after {
  content: "";
  flex: var(--bp-tablet) 0 0;
}

.faq__title {
  margin: 0;
  width: fit-content;
  color: var(--color-gray-900);
  font-size: calc(
    var(--text-display-22-size) +
    var(--bp-tablet) * (var(--text-display-28-size) - var(--text-display-22-size))
  );
  line-height: calc(
    var(--text-display-22-line-height) +
    var(--bp-tablet) * (var(--text-display-28-line-height) - var(--text-display-22-line-height))
  );
  font-weight: var(--text-display-28-weight);
}

.faq__br { display: var(--only-mobile); }

.faq__count {
  position: relative;
  flex: none;
  width: 0;
  margin-left: var(--spacing-12);
  height: calc(
    var(--text-display-22-line-height) +
    var(--bp-tablet) * (var(--text-display-28-line-height) - var(--text-display-22-line-height))
  );
}

.faq__count .counter {
  position: absolute;
  left: 0;
  top: -8px;
}

.faq__list {
  width: 100%;
  max-width: calc(760px * var(--bp-desktop) + 100% * (1 - var(--bp-desktop)));
}