/* link tiles of the contact buttons block */
/* after .card on the same element: padding and background must win */
.hero-box {
  padding: 25px 50px;
  background-color: var(--bg-light);
  transition: all 0.15s ease-in-out;
  cursor: pointer;
}

.hero-box h2 {
  margin: 0;
}

.hero-box:hover {
  background-color: var(--dark-petrol);
  color: #fff;
}

.hero-box:hover .light,
.hero-box .dark {
  display: initial;
}

.hero-box:hover .dark,
.hero-box .light {
  display: none;
}

.hero-box.sm {
  max-width: 350px;
  height: 100px;
}

.hero-box.sm > * {
  max-height: 100px;
  max-width: 50%;
  margin: 0;
}

@media (max-width: 1200px) {
  /* after .flex:not(.nowrap, .nav) in default.css (same specificity): stays a row */
  .hero-box .flex {
    flex-direction: row;
  }

  .hero-box.sm {
    justify-content: center;
  }

  .hero-box.sm,
  .hero-box.sm > * {
    height: auto;
    max-height: max-content;
    max-width: 100%;
    gap: 30px;
  }
}

@media (max-width: 1025px) {
  .hero-box.sm {
    justify-content: center;
    max-width: 100%;
    max-height: 100%;
    padding: 100px 100px;
    gap: 100px;
    height: auto;
    min-height: max-content;
    text-align: center;
  }

  .hero-box {
    border-radius: var(--mobile-border-radius);
  }

  .hero-box.sm * {
    font-size: var(--font-xxxl);
  }

  .hero-box.sm img {
    width: 50vw;
    height: auto;
    max-height: 100%;
    max-width: 100%;
  }
}