.object-contain {
  object-fit: contain;
}

section[id] {
  scroll-margin-top: 5rem;
}

.site-hero-background {
  background-color: hsl(var(--background));
  background-image:
    linear-gradient(
      90deg,
      rgba(244, 247, 250, 0.98) 0%,
      rgba(244, 247, 250, 0.92) 43%,
      rgba(244, 247, 250, 0.58) 100%
    ),
    url("/assets/cloud4it-hero-cloud-datacenter.webp");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.cybersecurity-background {
  background-color: hsl(var(--background));
  background-image:
    linear-gradient(
      180deg,
      rgba(244, 247, 250, 0.93) 0%,
      rgba(244, 247, 250, 0.96) 38rem,
      rgba(244, 247, 250, 1) 68rem
    ),
    url("/assets/cloud4it-cybersecurity.webp");
  background-position: center top;
  background-repeat: no-repeat;
  background-size: 100% auto;
}

.datacenter-background {
  background-color: hsl(var(--background));
  background-image:
    linear-gradient(
      90deg,
      rgba(244, 247, 250, 0.99) 0%,
      rgba(244, 247, 250, 0.94) 52%,
      rgba(244, 247, 250, 0.78) 100%
    ),
    url("/assets/cloud4it-datacenter.webp");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.ecosystem-background {
  background-color: #061a3a;
  background-image: url("/assets/cloud4it-ecosystem.webp");
  background-position: 70% center;
  background-repeat: no-repeat;
  background-size: cover;
}

.ecosystem-overlay {
  background: linear-gradient(
    90deg,
    rgba(8, 57, 122, 0.94) 0%,
    rgba(5, 51, 112, 0.82) 48%,
    rgba(0, 106, 132, 0.72) 100%
  ) !important;
}

.incident-button {
  right: 1.25rem;
  bottom: 1.25rem;
}

@media (min-width: 1100px) {
  .desktop-navigation {
    display: flex;
  }
}

@media (max-width: 480px) {
  .site-hero-background {
    background-image:
      linear-gradient(rgba(244, 247, 250, 0.9), rgba(244, 247, 250, 0.94)),
      url("/assets/cloud4it-hero-cloud-datacenter.webp");
    background-position: 72% center;
  }

  .cybersecurity-background {
    background-image:
      linear-gradient(rgba(244, 247, 250, 0.94), rgba(244, 247, 250, 0.98)),
      url("/assets/cloud4it-cybersecurity.webp");
    background-position: 68% top;
    background-size: auto 38rem;
  }

  .datacenter-background {
    background-image:
      linear-gradient(rgba(244, 247, 250, 0.94), rgba(244, 247, 250, 0.97)),
      url("/assets/cloud4it-datacenter.webp");
    background-position: 70% center;
  }

  .ecosystem-background {
    background-position: 68% center;
  }

  .incident-button {
    right: 1rem;
    bottom: 1rem;
    padding: 0.65rem 0.9rem;
    font-size: 0.75rem;
  }
}