@media (prefers-color-scheme: dark) {
  c-card p {
    color: var(--st-color-0) !important;
  }
}
.header-profile {
  height: 70vh;
  min-height: 450px;
  background-image: url(/img/office-login.jpeg);
  background-position: 0 80%;
  background-repeat: no-repeat;
  background-size: cover;
  color: var(--st-fore-color-alt);
}
.header-profile p:first-child {
  text-shadow: 1px 1px 2px black;
}
.header-profile > div {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-top: 64px;
}
.header-profile > div > div {
  display: flex;
  flex-direction: row;
}
.header-profile div c-steps gy-svg {
  margin-top: 1.5em;
  margin-left: 0.5em;
  width: 185px;
}
.card-content {
  display: grid;
  grid-template-columns: repeat(2, 1fr); 
  gap: 24px;
}
c-card {
  background-color: var(--st-bg-color) !important;
  width: 100%;
}

@media only screen and (max-width: 768px) {
  .header-profile {
    padding: 2em 6% 2% 10%;
  }
  .card-content {
    grid-template-columns: repeat(1, 1fr); 
  }
  c-card[type="clean"] {
    margin-bottom: 2em;
  }
}