/*
 * FindBestBet Ladder explainer banner.
 * Restores natural image ratio and centered gradient tagline.
 */

/* Existing image or picture wrapper */
.fbb-ladder-explainer-picture,
.fbb-ladder-explainer-frame {
  display: block !important;

  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;

  aspect-ratio: auto !important;

  margin-left: auto !important;
  margin-right: auto !important;

  line-height: 0 !important;
}

/* Outer bordered frame */
.fbb-ladder-explainer-frame {
  overflow: hidden !important;
  box-sizing: border-box !important;
}

/* The actual explainer banner */
.fbb-ladder-explainer-image {
  display: block !important;

  width: 100% !important;
  max-width: 100% !important;

  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;

  aspect-ratio: auto !important;

  margin: 0 auto !important;
  padding: 0 !important;

  object-fit: contain !important;
  object-position: center center !important;

  clip-path: none !important;
  transform: none !important;
}

/* Center the complete tagline beneath the image */
.fbb-ladder-banner-tagline-wrap {
  width: 100% !important;
  text-align: center !important;
}

.fbb-ladder-banner-tagline {
  display: block !important;

  width: 100% !important;
  max-width: none !important;

  margin: 24px auto 4px !important;
  padding: 0 14px !important;

  text-align: center !important;

  color: #00d9c4 !important;

  font-family: inherit !important;
  font-size: 0.96rem !important;
  font-weight: 800 !important;
  line-height: 1.55 !important;
  letter-spacing: 0.005em !important;

  background-image:
    linear-gradient(
      90deg,
      #00b1ff 0%,
      #00dfff 24%,
      #00ff87 50%,
      #00dfcf 76%,
      #00b1ff 100%
    ) !important;

  background-size: 180% auto !important;

  -webkit-background-clip: text !important;
  background-clip: text !important;

  -webkit-text-fill-color: transparent !important;

  filter:
    drop-shadow(
      0 0 6px rgba(0, 177, 255, 0.12)
    )
    drop-shadow(
      0 0 7px rgba(0, 255, 135, 0.10)
    );
}

@media (max-width: 768px) {
  .fbb-ladder-explainer-frame {
    border-radius: 13px !important;
  }

  .fbb-ladder-explainer-image {
    border-radius: 9px !important;
  }

  .fbb-ladder-banner-tagline {
    margin-top: 17px !important;
    padding: 0 8px !important;

    font-size: 0.82rem !important;
    line-height: 1.5 !important;
  }
}

@media (max-width: 390px) {
  .fbb-ladder-banner-tagline {
    font-size: 0.76rem !important;
    line-height: 1.48 !important;
  }
}