.event-info__bar {
  border-bottom: 1px solid var(--kf-white-1);
  background: var(--kf-bg-dark);
}

.event-info__bar-container {
  max-width: calc(var(--kf-page-width) * 1.2);
  margin: 0 auto;
  padding: 0 4rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.info-bar__item {
  padding: 2.2rem 2.8rem;
  border-right: 1px solid var(--kf-white-1);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.info-bar__item:first-child {
  padding-left: 0;
}

.info-bar__item:last-child {
  border-right: none;
}

.info-bar__label {
  font-size: calc(var(--kf-fs-sm) - 0.2rem);
  letter-spacing: var(--kf-ls-xll);
  text-transform: var(--kf-tu);
  color: var(--kf-white-3);
}

.info-bar__value {
  font-size: var(--kf-fs-md);
  font-weight: var(--kf-fw-bold);
  color: var(--kf-text-invert);
  letter-spacing: var(--kf-ls-xll);
  line-height: 1.1;
}

.info-bar__sub {
  font-size: var(--kf-fs-sm);
  color: var(--kf-white-3);
}

@media (max-width: 1280px) {
  .event-info__bar-container {
    padding: 0 2.8rem;
  }

  .info-bar__item {
    padding: 2rem 2.4rem;
  }

  .info-bar__item:first-child {
    padding-left: 0;
  }
}

@media (max-width: 1024px) {
  .event-info__bar-container {
    padding: 0 2.4rem;
    grid-template-columns: repeat(2, 1fr);
  }

  .info-bar__item {
    padding: 2rem 2rem;
  }

  .info-bar__item:first-child {
    padding-left: 2rem;
  }

  .info-bar__item:nth-child(2) {
    border-right: none;
  }

  .info-bar__item:nth-child(3) {
    border-right: 1px solid var(--kf-white-1);
    border-top: 1px solid var(--kf-white-1);
  }

  .info-bar__item:nth-child(4) {
    border-right: none;
    border-top: 1px solid var(--kf-white-1);
  }
}

@media (max-width: 768px) {
  .event-info__bar-container {
    padding: 0 2rem;
  }

  .info-bar__item {
    padding: 1.8rem 1.6rem;
  }

  .info-bar__item:first-child {
    padding-left: 1.6rem;
  }
}

@media (max-width: 480px) {
  .event-info__bar-container {
    padding: 0 1.6rem;
    grid-template-columns: 1fr;
  }

  .info-bar__item {
    padding: 1.6rem 0;
    border-right: none;
    border-top: 1px solid var(--kf-white-1);
  }

  .info-bar__item:first-child {
    padding-left: 0;
    border-top: none;
  }

  .info-bar__item:nth-child(2) {
    border-top: 1px solid var(--kf-white-1);
  }

  .info-bar__item:nth-child(3) {
    border-right: none;
  }

  .info-bar__item:nth-child(4) {
    border-top: 1px solid var(--kf-white-1);
  }
}