.boykovVisitorStats {
  width: 100%;
  box-sizing: border-box;

  margin: 0 0 32px;
  padding: 28px;

  border: 1px solid
    rgba(24, 36, 58, 0.1);

  border-radius: 18px;

  background: #fff;
}

.boykovVisitorStats__header {
  margin-bottom: 22px;
}

.boykovVisitorStats__eyebrow {
  margin-bottom: 7px;

  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;

  color: #2468d8;
}

.boykovVisitorStats__title {
  margin: 0;

  font-size: 24px;
  line-height: 1.2;

  color: #192235;
}

.boykovVisitorStats__description {
  margin: 7px 0 0;

  font-size: 13px;
  line-height: 1.5;

  color: #7a8699;
}

.boykovVisitorStats__grid {
  display: grid;

  grid-template-columns:
    repeat(
      5,
      minmax(0, 1fr)
    );

  gap: 10px;
}

.boykovVisitorStats__card {
  min-width: 0;

  padding: 16px 14px;

  border: 1px solid
    rgba(24, 36, 58, 0.08);

  border-radius: 12px;

  background:
    rgba(244, 247, 252, 0.72);
}

.boykovVisitorStats__label {
  margin-bottom: 9px;

  font-size: 12px;

  color: #77849a;
}

.boykovVisitorStats__value {
  font-size: 25px;
  font-weight: 700;
  line-height: 1;

  color: #192235;
}

.boykovVisitorStats__pageviews {
  margin-top: 18px;
  padding-top: 16px;

  border-top: 1px solid
    rgba(24, 36, 58, 0.08);

  font-size: 13px;

  color: #68758b;
}

.boykovVisitorStats__pageviews strong {
  margin-left: 4px;

  color: #192235;
}

.boykovVisitorStats__note,
.boykovVisitorStats__loading {
  margin-top: 8px;

  font-size: 11px;
  line-height: 1.5;

  color: #929caf;
}

@media (max-width: 900px) {
  .boykovVisitorStats__grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }
}

@media (max-width: 560px) {
  .boykovVisitorStats {
    padding: 20px 16px;
  }

  .boykovVisitorStats__grid {
    grid-template-columns:
      1fr 1fr;
  }

  .boykovVisitorStats__title {
    font-size: 21px;
  }
}