/* Uklad na cala wysokosc ekranu: tresc wypelnia przestrzen miedzy
   nav a stopka i jest wycentrowana, stopka zawsze na samym dole. */
body.body-2 {
  display: flex;
  flex-flow: column;
  min-height: 100vh;
}

.wkrotce-section {
  flex: 1 0 auto;
  align-items: center;
  padding-top: 60px;
}

.site-footer {
  flex-shrink: 0;
}

.wkrotce {
  padding-top: var(--xl);
  padding-bottom: var(--xl);
  display: flex;
  flex-flow: column;
  align-items: center;
  text-align: center;
  grid-row-gap: var(--l);
  max-width: 560px;
  margin: 0 auto;
}

.wkrotce__eyebrow {
  color: var(--company-gray-500);
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin: 0;
}

.wkrotce__heading {
  color: var(--company-gray-100);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 500;
  line-height: 1.2;
  margin: 0;
}

.wkrotce__text {
  color: var(--company-gray-400);
  font-size: var(--m);
  font-weight: 300;
  line-height: 1.6;
  margin: 0;
}

.wkrotce__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  grid-column-gap: var(--m);
  grid-row-gap: var(--m);
  margin-top: var(--m);
}

/* Wariant outline .primary-button - niezalezny od .contact-card,
   zeby nie dotykac istniejacego, dzialajacego kodu kart kontaktowych. */
.primary-button.is--outline {
  background-color: transparent;
  border: 1px solid var(--company-gray-200);
  color: var(--company-gray-100);
  transition: background-color .2s ease, color .2s ease;
}

.primary-button.is--outline:hover {
  background-color: var(--company-gray-100);
  color: var(--white);
}

.primary-button.is--outline:hover .button__row {
  filter: brightness(0) invert(1);
}

@media screen and (max-width: 479px) {
  .wkrotce__actions {
    flex-flow: column;
    align-items: stretch;
    width: 100%;
  }
}