[Summary view] [Print] [Text view]

   1  /**
   2   * Colors
   3   */
   4  /**
   5   * SCSS Variables.
   6   *
   7   * Please use variables from this sheet to ensure consistency across the UI.
   8   * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
   9   * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
  10   */
  11  /**
  12   * Fonts & basic variables.
  13   */
  14  /**
  15   * Typography
  16   */
  17  /**
  18   * Grid System.
  19   * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
  20   */
  21  /**
  22   * Radius scale.
  23   */
  24  /**
  25   * Elevation scale.
  26   */
  27  /**
  28   * Dimensions.
  29   */
  30  /**
  31   * Mobile specific styles
  32   */
  33  /**
  34   * Editor styles.
  35   */
  36  /**
  37   * Block & Editor UI.
  38   */
  39  /**
  40   * Block paddings.
  41   */
  42  /**
  43   * React Native specific.
  44   * These variables do not appear to be used anywhere else.
  45   */
  46  .wp-block-cover-image,
  47  .wp-block-cover {
  48    min-height: 430px;
  49    padding: 1em;
  50    position: relative;
  51    background-position: center center;
  52    display: flex;
  53    justify-content: center;
  54    align-items: center;
  55    overflow: hidden;
  56    overflow: clip;
  57    box-sizing: border-box;
  58    /*rtl:raw: direction: ltr; */
  59    /**
  60     * Set a default background color for has-background-dim _unless_ it includes another
  61     * background-color class (e.g. has-green-background-color). The presence of another
  62     * background-color class implies that another style will provide the background color
  63     * for the overlay.
  64     *
  65     * See:
  66     *   - Issue with background color specificity: https://github.com/WordPress/gutenberg/issues/26545
  67     *   - Issue with alternative fix: https://github.com/WordPress/gutenberg/issues/26545
  68     */
  69  }
  70  .wp-block-cover-image.has-background-dim:not([class*=-background-color]),
  71  .wp-block-cover-image .has-background-dim:not([class*=-background-color]),
  72  .wp-block-cover.has-background-dim:not([class*=-background-color]),
  73  .wp-block-cover .has-background-dim:not([class*=-background-color]) {
  74    background-color: #000;
  75  }
  76  .wp-block-cover-image .has-background-dim.has-background-gradient,
  77  .wp-block-cover .has-background-dim.has-background-gradient {
  78    background-color: transparent;
  79  }
  80  .wp-block-cover-image.has-background-dim::before,
  81  .wp-block-cover.has-background-dim::before {
  82    content: "";
  83    background-color: inherit;
  84  }
  85  .wp-block-cover-image.has-background-dim:not(.has-background-gradient)::before,
  86  .wp-block-cover-image .wp-block-cover__background,
  87  .wp-block-cover-image .wp-block-cover__gradient-background,
  88  .wp-block-cover.has-background-dim:not(.has-background-gradient)::before,
  89  .wp-block-cover .wp-block-cover__background,
  90  .wp-block-cover .wp-block-cover__gradient-background {
  91    position: absolute;
  92    top: 0;
  93    left: 0;
  94    bottom: 0;
  95    right: 0;
  96    opacity: 0.5;
  97  }
  98  .wp-block-cover-image.has-background-dim.has-background-dim-10:not(.has-background-gradient)::before,
  99  .wp-block-cover-image.has-background-dim.has-background-dim-10 .wp-block-cover__background,
 100  .wp-block-cover-image.has-background-dim.has-background-dim-10 .wp-block-cover__gradient-background,
 101  .wp-block-cover.has-background-dim.has-background-dim-10:not(.has-background-gradient)::before,
 102  .wp-block-cover.has-background-dim.has-background-dim-10 .wp-block-cover__background,
 103  .wp-block-cover.has-background-dim.has-background-dim-10 .wp-block-cover__gradient-background {
 104    opacity: 0.1;
 105  }
 106  .wp-block-cover-image.has-background-dim.has-background-dim-20:not(.has-background-gradient)::before,
 107  .wp-block-cover-image.has-background-dim.has-background-dim-20 .wp-block-cover__background,
 108  .wp-block-cover-image.has-background-dim.has-background-dim-20 .wp-block-cover__gradient-background,
 109  .wp-block-cover.has-background-dim.has-background-dim-20:not(.has-background-gradient)::before,
 110  .wp-block-cover.has-background-dim.has-background-dim-20 .wp-block-cover__background,
 111  .wp-block-cover.has-background-dim.has-background-dim-20 .wp-block-cover__gradient-background {
 112    opacity: 0.2;
 113  }
 114  .wp-block-cover-image.has-background-dim.has-background-dim-30:not(.has-background-gradient)::before,
 115  .wp-block-cover-image.has-background-dim.has-background-dim-30 .wp-block-cover__background,
 116  .wp-block-cover-image.has-background-dim.has-background-dim-30 .wp-block-cover__gradient-background,
 117  .wp-block-cover.has-background-dim.has-background-dim-30:not(.has-background-gradient)::before,
 118  .wp-block-cover.has-background-dim.has-background-dim-30 .wp-block-cover__background,
 119  .wp-block-cover.has-background-dim.has-background-dim-30 .wp-block-cover__gradient-background {
 120    opacity: 0.3;
 121  }
 122  .wp-block-cover-image.has-background-dim.has-background-dim-40:not(.has-background-gradient)::before,
 123  .wp-block-cover-image.has-background-dim.has-background-dim-40 .wp-block-cover__background,
 124  .wp-block-cover-image.has-background-dim.has-background-dim-40 .wp-block-cover__gradient-background,
 125  .wp-block-cover.has-background-dim.has-background-dim-40:not(.has-background-gradient)::before,
 126  .wp-block-cover.has-background-dim.has-background-dim-40 .wp-block-cover__background,
 127  .wp-block-cover.has-background-dim.has-background-dim-40 .wp-block-cover__gradient-background {
 128    opacity: 0.4;
 129  }
 130  .wp-block-cover-image.has-background-dim.has-background-dim-50:not(.has-background-gradient)::before,
 131  .wp-block-cover-image.has-background-dim.has-background-dim-50 .wp-block-cover__background,
 132  .wp-block-cover-image.has-background-dim.has-background-dim-50 .wp-block-cover__gradient-background,
 133  .wp-block-cover.has-background-dim.has-background-dim-50:not(.has-background-gradient)::before,
 134  .wp-block-cover.has-background-dim.has-background-dim-50 .wp-block-cover__background,
 135  .wp-block-cover.has-background-dim.has-background-dim-50 .wp-block-cover__gradient-background {
 136    opacity: 0.5;
 137  }
 138  .wp-block-cover-image.has-background-dim.has-background-dim-60:not(.has-background-gradient)::before,
 139  .wp-block-cover-image.has-background-dim.has-background-dim-60 .wp-block-cover__background,
 140  .wp-block-cover-image.has-background-dim.has-background-dim-60 .wp-block-cover__gradient-background,
 141  .wp-block-cover.has-background-dim.has-background-dim-60:not(.has-background-gradient)::before,
 142  .wp-block-cover.has-background-dim.has-background-dim-60 .wp-block-cover__background,
 143  .wp-block-cover.has-background-dim.has-background-dim-60 .wp-block-cover__gradient-background {
 144    opacity: 0.6;
 145  }
 146  .wp-block-cover-image.has-background-dim.has-background-dim-70:not(.has-background-gradient)::before,
 147  .wp-block-cover-image.has-background-dim.has-background-dim-70 .wp-block-cover__background,
 148  .wp-block-cover-image.has-background-dim.has-background-dim-70 .wp-block-cover__gradient-background,
 149  .wp-block-cover.has-background-dim.has-background-dim-70:not(.has-background-gradient)::before,
 150  .wp-block-cover.has-background-dim.has-background-dim-70 .wp-block-cover__background,
 151  .wp-block-cover.has-background-dim.has-background-dim-70 .wp-block-cover__gradient-background {
 152    opacity: 0.7;
 153  }
 154  .wp-block-cover-image.has-background-dim.has-background-dim-80:not(.has-background-gradient)::before,
 155  .wp-block-cover-image.has-background-dim.has-background-dim-80 .wp-block-cover__background,
 156  .wp-block-cover-image.has-background-dim.has-background-dim-80 .wp-block-cover__gradient-background,
 157  .wp-block-cover.has-background-dim.has-background-dim-80:not(.has-background-gradient)::before,
 158  .wp-block-cover.has-background-dim.has-background-dim-80 .wp-block-cover__background,
 159  .wp-block-cover.has-background-dim.has-background-dim-80 .wp-block-cover__gradient-background {
 160    opacity: 0.8;
 161  }
 162  .wp-block-cover-image.has-background-dim.has-background-dim-90:not(.has-background-gradient)::before,
 163  .wp-block-cover-image.has-background-dim.has-background-dim-90 .wp-block-cover__background,
 164  .wp-block-cover-image.has-background-dim.has-background-dim-90 .wp-block-cover__gradient-background,
 165  .wp-block-cover.has-background-dim.has-background-dim-90:not(.has-background-gradient)::before,
 166  .wp-block-cover.has-background-dim.has-background-dim-90 .wp-block-cover__background,
 167  .wp-block-cover.has-background-dim.has-background-dim-90 .wp-block-cover__gradient-background {
 168    opacity: 0.9;
 169  }
 170  .wp-block-cover-image.has-background-dim.has-background-dim-100:not(.has-background-gradient)::before,
 171  .wp-block-cover-image.has-background-dim.has-background-dim-100 .wp-block-cover__background,
 172  .wp-block-cover-image.has-background-dim.has-background-dim-100 .wp-block-cover__gradient-background,
 173  .wp-block-cover.has-background-dim.has-background-dim-100:not(.has-background-gradient)::before,
 174  .wp-block-cover.has-background-dim.has-background-dim-100 .wp-block-cover__background,
 175  .wp-block-cover.has-background-dim.has-background-dim-100 .wp-block-cover__gradient-background {
 176    opacity: 1;
 177  }
 178  .wp-block-cover-image .wp-block-cover__gradient-background.has-background-dim.has-background-dim-0,
 179  .wp-block-cover-image .wp-block-cover__background.has-background-dim.has-background-dim-0,
 180  .wp-block-cover .wp-block-cover__gradient-background.has-background-dim.has-background-dim-0,
 181  .wp-block-cover .wp-block-cover__background.has-background-dim.has-background-dim-0 {
 182    opacity: 0;
 183  }
 184  .wp-block-cover-image .wp-block-cover__gradient-background.has-background-dim.has-background-dim-10,
 185  .wp-block-cover-image .wp-block-cover__background.has-background-dim.has-background-dim-10,
 186  .wp-block-cover .wp-block-cover__gradient-background.has-background-dim.has-background-dim-10,
 187  .wp-block-cover .wp-block-cover__background.has-background-dim.has-background-dim-10 {
 188    opacity: 0.1;
 189  }
 190  .wp-block-cover-image .wp-block-cover__gradient-background.has-background-dim.has-background-dim-20,
 191  .wp-block-cover-image .wp-block-cover__background.has-background-dim.has-background-dim-20,
 192  .wp-block-cover .wp-block-cover__gradient-background.has-background-dim.has-background-dim-20,
 193  .wp-block-cover .wp-block-cover__background.has-background-dim.has-background-dim-20 {
 194    opacity: 0.2;
 195  }
 196  .wp-block-cover-image .wp-block-cover__gradient-background.has-background-dim.has-background-dim-30,
 197  .wp-block-cover-image .wp-block-cover__background.has-background-dim.has-background-dim-30,
 198  .wp-block-cover .wp-block-cover__gradient-background.has-background-dim.has-background-dim-30,
 199  .wp-block-cover .wp-block-cover__background.has-background-dim.has-background-dim-30 {
 200    opacity: 0.3;
 201  }
 202  .wp-block-cover-image .wp-block-cover__gradient-background.has-background-dim.has-background-dim-40,
 203  .wp-block-cover-image .wp-block-cover__background.has-background-dim.has-background-dim-40,
 204  .wp-block-cover .wp-block-cover__gradient-background.has-background-dim.has-background-dim-40,
 205  .wp-block-cover .wp-block-cover__background.has-background-dim.has-background-dim-40 {
 206    opacity: 0.4;
 207  }
 208  .wp-block-cover-image .wp-block-cover__gradient-background.has-background-dim.has-background-dim-50,
 209  .wp-block-cover-image .wp-block-cover__background.has-background-dim.has-background-dim-50,
 210  .wp-block-cover .wp-block-cover__gradient-background.has-background-dim.has-background-dim-50,
 211  .wp-block-cover .wp-block-cover__background.has-background-dim.has-background-dim-50 {
 212    opacity: 0.5;
 213  }
 214  .wp-block-cover-image .wp-block-cover__gradient-background.has-background-dim.has-background-dim-60,
 215  .wp-block-cover-image .wp-block-cover__background.has-background-dim.has-background-dim-60,
 216  .wp-block-cover .wp-block-cover__gradient-background.has-background-dim.has-background-dim-60,
 217  .wp-block-cover .wp-block-cover__background.has-background-dim.has-background-dim-60 {
 218    opacity: 0.6;
 219  }
 220  .wp-block-cover-image .wp-block-cover__gradient-background.has-background-dim.has-background-dim-70,
 221  .wp-block-cover-image .wp-block-cover__background.has-background-dim.has-background-dim-70,
 222  .wp-block-cover .wp-block-cover__gradient-background.has-background-dim.has-background-dim-70,
 223  .wp-block-cover .wp-block-cover__background.has-background-dim.has-background-dim-70 {
 224    opacity: 0.7;
 225  }
 226  .wp-block-cover-image .wp-block-cover__gradient-background.has-background-dim.has-background-dim-80,
 227  .wp-block-cover-image .wp-block-cover__background.has-background-dim.has-background-dim-80,
 228  .wp-block-cover .wp-block-cover__gradient-background.has-background-dim.has-background-dim-80,
 229  .wp-block-cover .wp-block-cover__background.has-background-dim.has-background-dim-80 {
 230    opacity: 0.8;
 231  }
 232  .wp-block-cover-image .wp-block-cover__gradient-background.has-background-dim.has-background-dim-90,
 233  .wp-block-cover-image .wp-block-cover__background.has-background-dim.has-background-dim-90,
 234  .wp-block-cover .wp-block-cover__gradient-background.has-background-dim.has-background-dim-90,
 235  .wp-block-cover .wp-block-cover__background.has-background-dim.has-background-dim-90 {
 236    opacity: 0.9;
 237  }
 238  .wp-block-cover-image .wp-block-cover__gradient-background.has-background-dim.has-background-dim-100,
 239  .wp-block-cover-image .wp-block-cover__background.has-background-dim.has-background-dim-100,
 240  .wp-block-cover .wp-block-cover__gradient-background.has-background-dim.has-background-dim-100,
 241  .wp-block-cover .wp-block-cover__background.has-background-dim.has-background-dim-100 {
 242    opacity: 1;
 243  }
 244  .wp-block-cover-image.alignleft, .wp-block-cover-image.alignright,
 245  .wp-block-cover.alignleft,
 246  .wp-block-cover.alignright {
 247    max-width: 420px;
 248    width: 100%;
 249  }
 250  .wp-block-cover-image.aligncenter, .wp-block-cover-image.alignleft, .wp-block-cover-image.alignright,
 251  .wp-block-cover.aligncenter,
 252  .wp-block-cover.alignleft,
 253  .wp-block-cover.alignright {
 254    display: flex;
 255  }
 256  .wp-block-cover-image .wp-block-cover__inner-container,
 257  .wp-block-cover .wp-block-cover__inner-container {
 258    position: relative;
 259    width: 100%;
 260    color: inherit;
 261    /*rtl:raw: direction: rtl; */
 262  }
 263  .wp-block-cover-image.is-position-top-left,
 264  .wp-block-cover.is-position-top-left {
 265    align-items: flex-start;
 266    justify-content: flex-start;
 267  }
 268  .wp-block-cover-image.is-position-top-center,
 269  .wp-block-cover.is-position-top-center {
 270    align-items: flex-start;
 271    justify-content: center;
 272  }
 273  .wp-block-cover-image.is-position-top-right,
 274  .wp-block-cover.is-position-top-right {
 275    align-items: flex-start;
 276    justify-content: flex-end;
 277  }
 278  .wp-block-cover-image.is-position-center-left,
 279  .wp-block-cover.is-position-center-left {
 280    align-items: center;
 281    justify-content: flex-start;
 282  }
 283  .wp-block-cover-image.is-position-center-center,
 284  .wp-block-cover.is-position-center-center {
 285    align-items: center;
 286    justify-content: center;
 287  }
 288  .wp-block-cover-image.is-position-center-right,
 289  .wp-block-cover.is-position-center-right {
 290    align-items: center;
 291    justify-content: flex-end;
 292  }
 293  .wp-block-cover-image.is-position-bottom-left,
 294  .wp-block-cover.is-position-bottom-left {
 295    align-items: flex-end;
 296    justify-content: flex-start;
 297  }
 298  .wp-block-cover-image.is-position-bottom-center,
 299  .wp-block-cover.is-position-bottom-center {
 300    align-items: flex-end;
 301    justify-content: center;
 302  }
 303  .wp-block-cover-image.is-position-bottom-right,
 304  .wp-block-cover.is-position-bottom-right {
 305    align-items: flex-end;
 306    justify-content: flex-end;
 307  }
 308  .wp-block-cover-image.has-custom-content-position.has-custom-content-position .wp-block-cover__inner-container,
 309  .wp-block-cover.has-custom-content-position.has-custom-content-position .wp-block-cover__inner-container {
 310    margin: 0;
 311  }
 312  .wp-block-cover-image.has-custom-content-position.has-custom-content-position.is-position-top-left .wp-block-cover__inner-container, .wp-block-cover-image.has-custom-content-position.has-custom-content-position.is-position-top-right .wp-block-cover__inner-container, .wp-block-cover-image.has-custom-content-position.has-custom-content-position.is-position-center-left .wp-block-cover__inner-container, .wp-block-cover-image.has-custom-content-position.has-custom-content-position.is-position-center-right .wp-block-cover__inner-container, .wp-block-cover-image.has-custom-content-position.has-custom-content-position.is-position-bottom-left .wp-block-cover__inner-container, .wp-block-cover-image.has-custom-content-position.has-custom-content-position.is-position-bottom-right .wp-block-cover__inner-container,
 313  .wp-block-cover.has-custom-content-position.has-custom-content-position.is-position-top-left .wp-block-cover__inner-container,
 314  .wp-block-cover.has-custom-content-position.has-custom-content-position.is-position-top-right .wp-block-cover__inner-container,
 315  .wp-block-cover.has-custom-content-position.has-custom-content-position.is-position-center-left .wp-block-cover__inner-container,
 316  .wp-block-cover.has-custom-content-position.has-custom-content-position.is-position-center-right .wp-block-cover__inner-container,
 317  .wp-block-cover.has-custom-content-position.has-custom-content-position.is-position-bottom-left .wp-block-cover__inner-container,
 318  .wp-block-cover.has-custom-content-position.has-custom-content-position.is-position-bottom-right .wp-block-cover__inner-container {
 319    margin: 0;
 320    width: auto;
 321  }
 322  .wp-block-cover-image .wp-block-cover__image-background,
 323  .wp-block-cover-image video.wp-block-cover__video-background,
 324  .wp-block-cover .wp-block-cover__image-background,
 325  .wp-block-cover video.wp-block-cover__video-background {
 326    position: absolute;
 327    top: 0;
 328    left: 0;
 329    right: 0;
 330    bottom: 0;
 331    margin: 0;
 332    padding: 0;
 333    width: 100%;
 334    height: 100%;
 335    max-width: none;
 336    max-height: none;
 337    object-fit: cover;
 338    outline: none;
 339    border: none;
 340    box-shadow: none;
 341  }
 342  @supports (-webkit-hyphens: none) {
 343    .wp-block-cover-image.has-aspect-ratio,
 344    .wp-block-cover.has-aspect-ratio {
 345      min-height: fit-content !important;
 346    }
 347  }
 348  .wp-block-cover-image .wp-block-cover__embed-background,
 349  .wp-block-cover .wp-block-cover__embed-background {
 350    position: absolute;
 351    top: 0;
 352    left: 0;
 353    right: 0;
 354    bottom: 0;
 355    margin: 0;
 356    padding: 0;
 357    width: 100%;
 358    height: 100%;
 359    max-width: none;
 360    max-height: none;
 361    outline: none;
 362    border: none;
 363    box-shadow: none;
 364    pointer-events: none;
 365  }
 366  .wp-block-cover-image .wp-block-cover__embed-background .wp-block-embed__wrapper,
 367  .wp-block-cover .wp-block-cover__embed-background .wp-block-embed__wrapper {
 368    position: absolute;
 369    top: 0;
 370    left: 0;
 371    right: 0;
 372    bottom: 0;
 373    margin: 0;
 374    padding: 0;
 375    width: 100%;
 376    height: 100%;
 377  }
 378  .wp-block-cover-image .wp-block-cover__embed-background iframe,
 379  .wp-block-cover-image .wp-block-cover__embed-background .wp-block-embed__wrapper iframe,
 380  .wp-block-cover .wp-block-cover__embed-background iframe,
 381  .wp-block-cover .wp-block-cover__embed-background .wp-block-embed__wrapper iframe {
 382    position: absolute;
 383    top: 50%;
 384    left: 50%;
 385    width: 100vw;
 386    height: 100vh;
 387    min-width: 100%;
 388    min-height: 100%;
 389    transform: translate(-50%, -50%);
 390    pointer-events: none;
 391  }
 392  
 393  .wp-block-cover-image.has-parallax,
 394  .wp-block-cover.has-parallax,
 395  .wp-block-cover__image-background.has-parallax,
 396  video.wp-block-cover__video-background.has-parallax {
 397    background-attachment: fixed;
 398    background-size: cover;
 399    background-repeat: no-repeat;
 400  }
 401  @supports (-webkit-touch-callout: inherit) {
 402    .wp-block-cover-image.has-parallax,
 403    .wp-block-cover.has-parallax,
 404    .wp-block-cover__image-background.has-parallax,
 405    video.wp-block-cover__video-background.has-parallax {
 406      background-attachment: scroll;
 407    }
 408  }
 409  @media (prefers-reduced-motion: reduce) {
 410    .wp-block-cover-image.has-parallax,
 411    .wp-block-cover.has-parallax,
 412    .wp-block-cover__image-background.has-parallax,
 413    video.wp-block-cover__video-background.has-parallax {
 414      background-attachment: scroll;
 415    }
 416  }
 417  .wp-block-cover-image.is-repeated,
 418  .wp-block-cover.is-repeated,
 419  .wp-block-cover__image-background.is-repeated,
 420  video.wp-block-cover__video-background.is-repeated {
 421    background-repeat: repeat;
 422    background-size: auto;
 423  }
 424  
 425  section.wp-block-cover-image h2,
 426  .wp-block-cover-image-text,
 427  .wp-block-cover-text {
 428    color: #fff;
 429  }
 430  section.wp-block-cover-image h2 a,
 431  section.wp-block-cover-image h2 a:hover,
 432  section.wp-block-cover-image h2 a:focus,
 433  section.wp-block-cover-image h2 a:active,
 434  .wp-block-cover-image-text a,
 435  .wp-block-cover-image-text a:hover,
 436  .wp-block-cover-image-text a:focus,
 437  .wp-block-cover-image-text a:active,
 438  .wp-block-cover-text a,
 439  .wp-block-cover-text a:hover,
 440  .wp-block-cover-text a:focus,
 441  .wp-block-cover-text a:active {
 442    color: #fff;
 443  }
 444  
 445  .wp-block-cover-image .wp-block-cover.has-left-content {
 446    justify-content: flex-start;
 447  }
 448  .wp-block-cover-image .wp-block-cover.has-right-content {
 449    justify-content: flex-end;
 450  }
 451  
 452  section.wp-block-cover-image.has-left-content > h2,
 453  .wp-block-cover-image.has-left-content .wp-block-cover-image-text,
 454  .wp-block-cover.has-left-content .wp-block-cover-text {
 455    margin-left: 0;
 456    text-align: left;
 457  }
 458  
 459  section.wp-block-cover-image.has-right-content > h2,
 460  .wp-block-cover-image.has-right-content .wp-block-cover-image-text,
 461  .wp-block-cover.has-right-content .wp-block-cover-text {
 462    margin-right: 0;
 463    text-align: right;
 464  }
 465  
 466  section.wp-block-cover-image > h2,
 467  .wp-block-cover-image .wp-block-cover-image-text,
 468  .wp-block-cover .wp-block-cover-text {
 469    font-size: 2em;
 470    line-height: 1.25;
 471    z-index: 1;
 472    margin-bottom: 0;
 473    max-width: 840px;
 474    padding: 0.44em;
 475    text-align: center;
 476  }
 477  
 478  :where(.wp-block-cover:not(.has-text-color)),
 479  :where(.wp-block-cover-image:not(.has-text-color)) {
 480    color: #fff;
 481  }
 482  
 483  :where(.wp-block-cover.is-light:not(.has-text-color)),
 484  :where(.wp-block-cover-image.is-light:not(.has-text-color)) {
 485    color: #000;
 486  }
 487  
 488  :root :where(.wp-block-cover p:not(.has-text-color)),
 489  :root :where(.wp-block-cover h1:not(.has-text-color)),
 490  :root :where(.wp-block-cover h2:not(.has-text-color)),
 491  :root :where(.wp-block-cover h3:not(.has-text-color)),
 492  :root :where(.wp-block-cover h4:not(.has-text-color)),
 493  :root :where(.wp-block-cover h5:not(.has-text-color)),
 494  :root :where(.wp-block-cover h6:not(.has-text-color)) {
 495    color: inherit;
 496  }
 497  
 498  body:not(.editor-styles-wrapper) .wp-block-cover:not(.wp-block-cover:has(.wp-block-cover__background + .wp-block-cover__inner-container)) .wp-block-cover__video-background {
 499    z-index: 0;
 500  }
 501  body:not(.editor-styles-wrapper) .wp-block-cover:not(.wp-block-cover:has(.wp-block-cover__background + .wp-block-cover__inner-container)) .wp-block-cover__embed-background {
 502    z-index: 0;
 503  }
 504  body:not(.editor-styles-wrapper) .wp-block-cover:not(.wp-block-cover:has(.wp-block-cover__background + .wp-block-cover__inner-container)) .wp-block-cover__image-background {
 505    z-index: 0;
 506  }
 507  body:not(.editor-styles-wrapper) .wp-block-cover:not(.wp-block-cover:has(.wp-block-cover__background + .wp-block-cover__inner-container)).has-background-dim:not(.has-background-gradient)::before,
 508  body:not(.editor-styles-wrapper) .wp-block-cover:not(.wp-block-cover:has(.wp-block-cover__background + .wp-block-cover__inner-container)) .wp-block-cover__background,
 509  body:not(.editor-styles-wrapper) .wp-block-cover:not(.wp-block-cover:has(.wp-block-cover__background + .wp-block-cover__inner-container)) .wp-block-cover__gradient-background {
 510    z-index: 1;
 511  }
 512  body:not(.editor-styles-wrapper) .wp-block-cover:not(.wp-block-cover:has(.wp-block-cover__background + .wp-block-cover__inner-container)) .wp-block-cover__inner-container {
 513    z-index: 1;
 514  }
 515  .has-modal-open body:not(.editor-styles-wrapper) .wp-block-cover:not(.wp-block-cover:has(.wp-block-cover__background + .wp-block-cover__inner-container)) .wp-block-cover__inner-container {
 516    z-index: auto;
 517  }