.hazard-ribbon-container-giant {
  width: 100%;
  position: sticky;
  top: 0;
  left: 0;
  z-index: 999999;
}

.hazard-ribbon-giant {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: #000000;
  text-align: center;
  letter-spacing: 2.5px;
  position: relative;
  padding: 24px 0;
  width: 100%;

  background:
    repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 39px,
      rgba(26, 26, 26, 0.7) 30px,
      rgba(26, 26, 26, 0.7) 60px
    ),
    linear-gradient(to right, #fdc652, #ffff58);

  /* Blends the top stripe layer with the bottom gradient layer */
  background-blend-mode: overlay, normal;

  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.55);
  border-bottom: 5px solid #1a1a1a;
}

.ribbon-text-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  line-height: 1.1;
  width: 100%;
}

.ribbon-large-text {
  font-size: 40px;
  font-weight: 950;
  text-shadow: 0px 1.5px 0px rgba(255, 255, 255, 0.5);
}

.ribbon-small-text {
  font-size: 20px;
  font-weight: 700;
  color: #555555;
}

.ribbon-bottom-row {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  gap: 60px; /* message and phone gap */
  flex-wrap: wrap;
}

.ribbon-phone-text {
  font-size: 19.8px;
  font-weight: 700;
  color: #222222;
  white-space: nowrap;
}

@media screen and (max-width: 480px) {
  .hazard-ribbon-giant {
    padding: 12px 0;
    border-bottom-width: 2.5px;
    letter-spacing: 1px;

    background:
      repeating-linear-gradient(
        -45deg,
        transparent,
        transparent 13px,
        rgba(26, 26, 26, 0.7) 13px,
        rgba(26, 26, 26, 0.7) 26px
      ),
      linear-gradient(to right, #fdc652, #ffff58);
    background-blend-mode: overlay, normal;

    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.55);
  }

  .ribbon-text-wrapper {
    gap: 2.5px;
  }

  .ribbon-large-text {
    font-size: 20px;
  }

  .ribbon-small-text {
    font-size: 10px;
  }

  .ribbon-phone-text {
    font-size: 10px;
  }

  .ribbon-bottom-row {
    gap: 10px;
  }
}