/* G247 H5P custom overrides
   Place your CSS overrides below. These apply inside H5P iframes and div embeds.
   Tip: scope to `.h5p-content` to avoid unintended global changes.
   Docs: https://h5p.org/documentation/for-developers/visual-changes
*/

.h5p-question-image .h5p-question-image-wrap {
	width: 100%
}

@container (max-width: 350px) {
    .h5p-theme-primary-cta {
         --label-display: unset;
         --is-icon-only: 0;
         --icon-position: absolute;
    }

    .h5p-theme-secondary-cta {
        --label-display: unset;
    }
}

@container h5p-navigation (max-width: 700px) {
    .h5p-theme-nav-button {
        --label-display: unset;
    }

    .h5p-navigation .h5p-theme-primary-cta {
        --label-display: unset;
        --is-icon-only: 0;
        --icon-position: absolute;
    }
    
}

@media (max-width: 550px) {
   .h5p-theme .h5p-navigation {
      display: block!important;
    }

    .h5p-theme-previous {
      position: absolute;
      bottom: 25px;
    }
}