.froggy-background {
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  padding: var(--spacing-l, 3rem) var(--spacing-m, 1.5rem);
}

/* froggy-hero already sits flush to its own bottom edge (no bottom
   padding) so its image can reach the very bottom - don't add it back
   here when a hero is what's inside this background section. */
.froggy-background:has(.wp-block-acf-froggy-hero) {
  padding-bottom: 0;
}

.froggy-background--vertical-align-middle { align-items: center; }
.froggy-background--vertical-align-top { align-items: flex-start; }
.froggy-background--vertical-align-bottom { align-items: flex-end; }

.froggy-background--padding-small { padding-top: var(--spacing-m, 1.5rem); padding-bottom: var(--spacing-m, 1.5rem); }
.froggy-background--padding-large { padding-top: var(--spacing-xl, 6rem); padding-bottom: var(--spacing-xl, 6rem); }
.froggy-background--padding-none { padding-top: 0; padding-bottom: 0; }

.froggy-background--height-50 { min-height: 50vh; }
.froggy-background--height-75 { min-height: 75vh; }
.froggy-background--height-100 { min-height: 100vh; }

/* colors */
.froggy-background--color-none { background: transparent; }
.froggy-background--color-dark-blue { background: #16243E; }
.froggy-background--color-light-grey { background: #F5F5F7; }
.froggy-background--color-gradient-navy { background: linear-gradient(180deg, #20375F 0%, #D2E2EF 100%); }

.froggy-background.is-dark-mode {
  color: var(--color-white, #fff);
}

.froggy-background.is-dark-mode.froggy-background--type-image,
.froggy-background.is-dark-mode.froggy-background--type-video {
  background: var(--color-black, #000);
}

.froggy-background__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.froggy-background__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.froggy-background__media__video-wrapper {
  position: absolute;
  inset: 0;
}

.froggy-background__media__video-wrapper video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.froggy-background__dimming {
  position: absolute;
  inset: 0;
  background: var(--color-black, #000);
}

.froggy-background__content {
  position: relative;
  width: 100%;
}

.froggy-background--content-background-light .froggy-background__content {
  background: var(--color-white, #fff);
  max-width: calc(var(--width-content-m, 50rem) + 6rem);
  margin-left: auto;
  margin-right: auto;
  padding: 2rem;
}

/* The theme's global .blocks .inner-blocks > * rule caps every direct
   child at --width-content-m (800px) - override it for heading/paragraph
   so they can use the full width of this section. */
.froggy-background__content.inner-blocks > .wp-block-heading,
.froggy-background__content.inner-blocks > p {
  max-width: none;
}