[Summary view] [Print] [Text view]

   1  /**
   2   * Colors
   3   */
   4  /**
   5   * Typography
   6   */
   7  /**
   8   * SCSS Variables.
   9   *
  10   * Please use variables from this sheet to ensure consistency across the UI.
  11   * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
  12   * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
  13   */
  14  /**
  15   * Fonts & basic variables.
  16   */
  17  /**
  18   * Typography
  19   */
  20  /**
  21   * Grid System.
  22   * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
  23   */
  24  /**
  25   * Radius scale.
  26   */
  27  /**
  28   * Elevation scale.
  29   */
  30  /**
  31   * Dimensions.
  32   */
  33  /**
  34   * Mobile specific styles
  35   */
  36  /**
  37   * Editor styles.
  38   */
  39  /**
  40   * Block & Editor UI.
  41   */
  42  /**
  43   * Block paddings.
  44   */
  45  /**
  46   * React Native specific.
  47   * These variables do not appear to be used anywhere else.
  48   */
  49  /**
  50   * Breakpoints & Media Queries
  51   */
  52  /**
  53  *  Converts a hex value into the rgb equivalent.
  54  *
  55  * @param {string} hex - the hexadecimal value to convert
  56  * @return {string} comma separated rgb values
  57  */
  58  /**
  59   * Long content fade mixin
  60   *
  61   * Creates a fading overlay to signify that the content is longer
  62   * than the space allows.
  63   */
  64  /**
  65   * Breakpoint mixins
  66   */
  67  /**
  68   * Focus styles.
  69   */
  70  /**
  71   * Standard focus rings for the WordPress Design System.
  72   *
  73   * Apply `outset-ring__focus` inside the relevant pseudo-class at the call site,
  74   * e.g. `&:focus { @include outset-ring__focus(); }`.
  75   */
  76  /**
  77   * Applies editor left position to the selector passed as argument
  78   */
  79  /**
  80   * Styles that are reused verbatim in a few places
  81   */
  82  /**
  83   * Allows users to opt-out of animations via OS-level preferences.
  84   */
  85  /**
  86   * Reset default styles for JavaScript UI based pages.
  87   * This is a WP-admin agnostic reset
  88   */
  89  /**
  90   * Reset the WP Admin page styles for Gutenberg-like pages.
  91   */
  92  /**
  93   * Creates a checkerboard pattern background to indicate transparency.
  94   * @param {String} $size - The size of the squares in the checkerboard pattern. Default is 12px.
  95   */
  96  .wp-block-gallery:not(.has-nested-images),
  97  .blocks-gallery-grid:not(.has-nested-images) {
  98    display: flex;
  99    flex-wrap: wrap;
 100    list-style-type: none;
 101    padding: 0;
 102    margin: 0;
 103  }
 104  .wp-block-gallery:not(.has-nested-images) .blocks-gallery-image,
 105  .wp-block-gallery:not(.has-nested-images) .blocks-gallery-item,
 106  .blocks-gallery-grid:not(.has-nested-images) .blocks-gallery-image,
 107  .blocks-gallery-grid:not(.has-nested-images) .blocks-gallery-item {
 108    margin: 0 0 1em 1em;
 109    display: flex;
 110    flex-grow: 1;
 111    flex-direction: column;
 112    justify-content: center;
 113    position: relative;
 114    width: calc(50% - 1em);
 115  }
 116  .wp-block-gallery:not(.has-nested-images) .blocks-gallery-image:nth-of-type(even),
 117  .wp-block-gallery:not(.has-nested-images) .blocks-gallery-item:nth-of-type(even),
 118  .blocks-gallery-grid:not(.has-nested-images) .blocks-gallery-image:nth-of-type(even),
 119  .blocks-gallery-grid:not(.has-nested-images) .blocks-gallery-item:nth-of-type(even) {
 120    margin-left: 0;
 121  }
 122  .wp-block-gallery:not(.has-nested-images) .blocks-gallery-image figure,
 123  .wp-block-gallery:not(.has-nested-images) .blocks-gallery-item figure,
 124  .blocks-gallery-grid:not(.has-nested-images) .blocks-gallery-image figure,
 125  .blocks-gallery-grid:not(.has-nested-images) .blocks-gallery-item figure {
 126    margin: 0;
 127    height: 100%;
 128    display: flex;
 129    align-items: flex-end;
 130    justify-content: flex-start;
 131  }
 132  .wp-block-gallery:not(.has-nested-images) .blocks-gallery-image img,
 133  .wp-block-gallery:not(.has-nested-images) .blocks-gallery-item img,
 134  .blocks-gallery-grid:not(.has-nested-images) .blocks-gallery-image img,
 135  .blocks-gallery-grid:not(.has-nested-images) .blocks-gallery-item img {
 136    display: block;
 137    max-width: 100%;
 138    height: auto;
 139    width: auto;
 140  }
 141  .wp-block-gallery:not(.has-nested-images) .blocks-gallery-image figcaption,
 142  .wp-block-gallery:not(.has-nested-images) .blocks-gallery-item figcaption,
 143  .blocks-gallery-grid:not(.has-nested-images) .blocks-gallery-image figcaption,
 144  .blocks-gallery-grid:not(.has-nested-images) .blocks-gallery-item figcaption {
 145    position: absolute;
 146    bottom: 0;
 147    width: 100%;
 148    max-height: 100%;
 149    overflow: auto;
 150    padding: 3em 0.77em 0.7em;
 151    color: #fff;
 152    text-align: center;
 153    font-size: 0.8em;
 154    background: linear-gradient(0deg, rgba(0, 0, 0, 0.7) 0, rgba(0, 0, 0, 0.3) 70%, transparent);
 155    box-sizing: border-box;
 156    margin: 0;
 157    z-index: 2;
 158  }
 159  .wp-block-gallery:not(.has-nested-images) .blocks-gallery-image figcaption img,
 160  .wp-block-gallery:not(.has-nested-images) .blocks-gallery-item figcaption img,
 161  .blocks-gallery-grid:not(.has-nested-images) .blocks-gallery-image figcaption img,
 162  .blocks-gallery-grid:not(.has-nested-images) .blocks-gallery-item figcaption img {
 163    display: inline;
 164  }
 165  .wp-block-gallery:not(.has-nested-images) figcaption,
 166  .blocks-gallery-grid:not(.has-nested-images) figcaption {
 167    flex-grow: 1;
 168  }
 169  .wp-block-gallery:not(.has-nested-images).is-cropped .blocks-gallery-image a,
 170  .wp-block-gallery:not(.has-nested-images).is-cropped .blocks-gallery-image img, .wp-block-gallery:not(.has-nested-images).is-cropped .blocks-gallery-item a,
 171  .wp-block-gallery:not(.has-nested-images).is-cropped .blocks-gallery-item img,
 172  .blocks-gallery-grid:not(.has-nested-images).is-cropped .blocks-gallery-image a,
 173  .blocks-gallery-grid:not(.has-nested-images).is-cropped .blocks-gallery-image img,
 174  .blocks-gallery-grid:not(.has-nested-images).is-cropped .blocks-gallery-item a,
 175  .blocks-gallery-grid:not(.has-nested-images).is-cropped .blocks-gallery-item img {
 176    width: 100%;
 177    height: 100%;
 178    flex: 1;
 179    object-fit: cover;
 180  }
 181  .wp-block-gallery:not(.has-nested-images).columns-1 .blocks-gallery-image, .wp-block-gallery:not(.has-nested-images).columns-1 .blocks-gallery-item,
 182  .blocks-gallery-grid:not(.has-nested-images).columns-1 .blocks-gallery-image,
 183  .blocks-gallery-grid:not(.has-nested-images).columns-1 .blocks-gallery-item {
 184    width: 100%;
 185    margin-left: 0;
 186  }
 187  @media (min-width: 600px) {
 188    .wp-block-gallery:not(.has-nested-images).columns-3 .blocks-gallery-image, .wp-block-gallery:not(.has-nested-images).columns-3 .blocks-gallery-item,
 189    .blocks-gallery-grid:not(.has-nested-images).columns-3 .blocks-gallery-image,
 190    .blocks-gallery-grid:not(.has-nested-images).columns-3 .blocks-gallery-item {
 191      width: calc(33.3333333333% - 0.6666666667em);
 192      margin-left: 1em;
 193    }
 194    .wp-block-gallery:not(.has-nested-images).columns-4 .blocks-gallery-image, .wp-block-gallery:not(.has-nested-images).columns-4 .blocks-gallery-item,
 195    .blocks-gallery-grid:not(.has-nested-images).columns-4 .blocks-gallery-image,
 196    .blocks-gallery-grid:not(.has-nested-images).columns-4 .blocks-gallery-item {
 197      width: calc(25% - 0.75em);
 198      margin-left: 1em;
 199    }
 200    .wp-block-gallery:not(.has-nested-images).columns-5 .blocks-gallery-image, .wp-block-gallery:not(.has-nested-images).columns-5 .blocks-gallery-item,
 201    .blocks-gallery-grid:not(.has-nested-images).columns-5 .blocks-gallery-image,
 202    .blocks-gallery-grid:not(.has-nested-images).columns-5 .blocks-gallery-item {
 203      width: calc(20% - 0.8em);
 204      margin-left: 1em;
 205    }
 206    .wp-block-gallery:not(.has-nested-images).columns-6 .blocks-gallery-image, .wp-block-gallery:not(.has-nested-images).columns-6 .blocks-gallery-item,
 207    .blocks-gallery-grid:not(.has-nested-images).columns-6 .blocks-gallery-image,
 208    .blocks-gallery-grid:not(.has-nested-images).columns-6 .blocks-gallery-item {
 209      width: calc(16.6666666667% - 0.8333333333em);
 210      margin-left: 1em;
 211    }
 212    .wp-block-gallery:not(.has-nested-images).columns-7 .blocks-gallery-image, .wp-block-gallery:not(.has-nested-images).columns-7 .blocks-gallery-item,
 213    .blocks-gallery-grid:not(.has-nested-images).columns-7 .blocks-gallery-image,
 214    .blocks-gallery-grid:not(.has-nested-images).columns-7 .blocks-gallery-item {
 215      width: calc(14.2857142857% - 0.8571428571em);
 216      margin-left: 1em;
 217    }
 218    .wp-block-gallery:not(.has-nested-images).columns-8 .blocks-gallery-image, .wp-block-gallery:not(.has-nested-images).columns-8 .blocks-gallery-item,
 219    .blocks-gallery-grid:not(.has-nested-images).columns-8 .blocks-gallery-image,
 220    .blocks-gallery-grid:not(.has-nested-images).columns-8 .blocks-gallery-item {
 221      width: calc(12.5% - 0.875em);
 222      margin-left: 1em;
 223    }
 224    .wp-block-gallery:not(.has-nested-images).columns-1 .blocks-gallery-image:nth-of-type(1n), .wp-block-gallery:not(.has-nested-images).columns-1 .blocks-gallery-item:nth-of-type(1n),
 225    .blocks-gallery-grid:not(.has-nested-images).columns-1 .blocks-gallery-image:nth-of-type(1n),
 226    .blocks-gallery-grid:not(.has-nested-images).columns-1 .blocks-gallery-item:nth-of-type(1n) {
 227      margin-left: 0;
 228    }
 229    .wp-block-gallery:not(.has-nested-images).columns-2 .blocks-gallery-image:nth-of-type(2n), .wp-block-gallery:not(.has-nested-images).columns-2 .blocks-gallery-item:nth-of-type(2n),
 230    .blocks-gallery-grid:not(.has-nested-images).columns-2 .blocks-gallery-image:nth-of-type(2n),
 231    .blocks-gallery-grid:not(.has-nested-images).columns-2 .blocks-gallery-item:nth-of-type(2n) {
 232      margin-left: 0;
 233    }
 234    .wp-block-gallery:not(.has-nested-images).columns-3 .blocks-gallery-image:nth-of-type(3n), .wp-block-gallery:not(.has-nested-images).columns-3 .blocks-gallery-item:nth-of-type(3n),
 235    .blocks-gallery-grid:not(.has-nested-images).columns-3 .blocks-gallery-image:nth-of-type(3n),
 236    .blocks-gallery-grid:not(.has-nested-images).columns-3 .blocks-gallery-item:nth-of-type(3n) {
 237      margin-left: 0;
 238    }
 239    .wp-block-gallery:not(.has-nested-images).columns-4 .blocks-gallery-image:nth-of-type(4n), .wp-block-gallery:not(.has-nested-images).columns-4 .blocks-gallery-item:nth-of-type(4n),
 240    .blocks-gallery-grid:not(.has-nested-images).columns-4 .blocks-gallery-image:nth-of-type(4n),
 241    .blocks-gallery-grid:not(.has-nested-images).columns-4 .blocks-gallery-item:nth-of-type(4n) {
 242      margin-left: 0;
 243    }
 244    .wp-block-gallery:not(.has-nested-images).columns-5 .blocks-gallery-image:nth-of-type(5n), .wp-block-gallery:not(.has-nested-images).columns-5 .blocks-gallery-item:nth-of-type(5n),
 245    .blocks-gallery-grid:not(.has-nested-images).columns-5 .blocks-gallery-image:nth-of-type(5n),
 246    .blocks-gallery-grid:not(.has-nested-images).columns-5 .blocks-gallery-item:nth-of-type(5n) {
 247      margin-left: 0;
 248    }
 249    .wp-block-gallery:not(.has-nested-images).columns-6 .blocks-gallery-image:nth-of-type(6n), .wp-block-gallery:not(.has-nested-images).columns-6 .blocks-gallery-item:nth-of-type(6n),
 250    .blocks-gallery-grid:not(.has-nested-images).columns-6 .blocks-gallery-image:nth-of-type(6n),
 251    .blocks-gallery-grid:not(.has-nested-images).columns-6 .blocks-gallery-item:nth-of-type(6n) {
 252      margin-left: 0;
 253    }
 254    .wp-block-gallery:not(.has-nested-images).columns-7 .blocks-gallery-image:nth-of-type(7n), .wp-block-gallery:not(.has-nested-images).columns-7 .blocks-gallery-item:nth-of-type(7n),
 255    .blocks-gallery-grid:not(.has-nested-images).columns-7 .blocks-gallery-image:nth-of-type(7n),
 256    .blocks-gallery-grid:not(.has-nested-images).columns-7 .blocks-gallery-item:nth-of-type(7n) {
 257      margin-left: 0;
 258    }
 259    .wp-block-gallery:not(.has-nested-images).columns-8 .blocks-gallery-image:nth-of-type(8n), .wp-block-gallery:not(.has-nested-images).columns-8 .blocks-gallery-item:nth-of-type(8n),
 260    .blocks-gallery-grid:not(.has-nested-images).columns-8 .blocks-gallery-image:nth-of-type(8n),
 261    .blocks-gallery-grid:not(.has-nested-images).columns-8 .blocks-gallery-item:nth-of-type(8n) {
 262      margin-left: 0;
 263    }
 264  }
 265  .wp-block-gallery:not(.has-nested-images) .blocks-gallery-image:last-child,
 266  .wp-block-gallery:not(.has-nested-images) .blocks-gallery-item:last-child,
 267  .blocks-gallery-grid:not(.has-nested-images) .blocks-gallery-image:last-child,
 268  .blocks-gallery-grid:not(.has-nested-images) .blocks-gallery-item:last-child {
 269    margin-left: 0;
 270  }
 271  .wp-block-gallery:not(.has-nested-images).alignleft, .wp-block-gallery:not(.has-nested-images).alignright,
 272  .blocks-gallery-grid:not(.has-nested-images).alignleft,
 273  .blocks-gallery-grid:not(.has-nested-images).alignright {
 274    max-width: 420px;
 275    width: 100%;
 276  }
 277  .wp-block-gallery:not(.has-nested-images).aligncenter .blocks-gallery-item figure,
 278  .blocks-gallery-grid:not(.has-nested-images).aligncenter .blocks-gallery-item figure {
 279    justify-content: center;
 280  }
 281  
 282  .wp-block-gallery:not(.is-cropped) .blocks-gallery-item {
 283    align-self: flex-start;
 284  }
 285  
 286  figure.wp-block-gallery.has-nested-images:where(.is-layout-flex) {
 287    align-items: normal;
 288  }
 289  
 290  .wp-block-gallery.has-nested-images:where(.is-layout-flex) figure.wp-block-image:not(#individual-image) {
 291    width: calc(50% - var(--wp--style--unstable-gallery-gap, 16px) / 2);
 292    margin: 0;
 293  }
 294  .wp-block-gallery.has-nested-images:where(.is-layout-flex) figure.wp-block-image {
 295    display: flex;
 296    flex-grow: 1;
 297    justify-content: center;
 298    flex-direction: column;
 299    max-width: 100%;
 300    box-sizing: border-box;
 301  }
 302  .wp-block-gallery.has-nested-images:where(.is-layout-flex) figure.wp-block-image > div,
 303  .wp-block-gallery.has-nested-images:where(.is-layout-flex) figure.wp-block-image > a {
 304    margin: 0;
 305    flex-direction: column;
 306    flex-grow: 1;
 307  }
 308  .wp-block-gallery.has-nested-images:where(.is-layout-flex) figure.wp-block-image img {
 309    display: block;
 310    height: auto;
 311    max-width: 100% !important;
 312    width: auto;
 313  }
 314  .wp-block-gallery.has-nested-images:where(.is-layout-flex) figcaption {
 315    flex-grow: 1;
 316    flex-basis: 100%;
 317    text-align: center;
 318  }
 319  .wp-block-gallery.has-nested-images:where(.is-layout-flex):not(.is-cropped) figure.wp-block-image:not(#individual-image) {
 320    margin-top: 0;
 321    margin-bottom: auto;
 322  }
 323  .wp-block-gallery.has-nested-images:where(.is-layout-flex).is-cropped figure.wp-block-image:not(#individual-image) {
 324    align-self: inherit;
 325  }
 326  .wp-block-gallery.has-nested-images:where(.is-layout-flex).is-cropped figure.wp-block-image:not(#individual-image) > div:not(.components-drop-zone),
 327  .wp-block-gallery.has-nested-images:where(.is-layout-flex).is-cropped figure.wp-block-image:not(#individual-image) > a {
 328    display: flex;
 329  }
 330  .wp-block-gallery.has-nested-images:where(.is-layout-flex).is-cropped figure.wp-block-image:not(#individual-image) a,
 331  .wp-block-gallery.has-nested-images:where(.is-layout-flex).is-cropped figure.wp-block-image:not(#individual-image) img {
 332    width: 100%;
 333    flex: 1 0 0%;
 334    height: 100%;
 335    object-fit: cover;
 336  }
 337  .wp-block-gallery.has-nested-images:where(.is-layout-flex).columns-1 figure.wp-block-image:not(#individual-image) {
 338    width: 100%;
 339  }
 340  @media (min-width: 600px) {
 341    .wp-block-gallery.has-nested-images:where(.is-layout-flex).columns-3 figure.wp-block-image:not(#individual-image) {
 342      width: calc(33.3333333333% - var(--wp--style--unstable-gallery-gap, 16px) * 0.6666666667);
 343    }
 344    .wp-block-gallery.has-nested-images:where(.is-layout-flex).columns-4 figure.wp-block-image:not(#individual-image) {
 345      width: calc(25% - var(--wp--style--unstable-gallery-gap, 16px) * 0.75);
 346    }
 347    .wp-block-gallery.has-nested-images:where(.is-layout-flex).columns-5 figure.wp-block-image:not(#individual-image) {
 348      width: calc(20% - var(--wp--style--unstable-gallery-gap, 16px) * 0.8);
 349    }
 350    .wp-block-gallery.has-nested-images:where(.is-layout-flex).columns-6 figure.wp-block-image:not(#individual-image) {
 351      width: calc(16.6666666667% - var(--wp--style--unstable-gallery-gap, 16px) * 0.8333333333);
 352    }
 353    .wp-block-gallery.has-nested-images:where(.is-layout-flex).columns-7 figure.wp-block-image:not(#individual-image) {
 354      width: calc(14.2857142857% - var(--wp--style--unstable-gallery-gap, 16px) * 0.8571428571);
 355    }
 356    .wp-block-gallery.has-nested-images:where(.is-layout-flex).columns-8 figure.wp-block-image:not(#individual-image) {
 357      width: calc(12.5% - var(--wp--style--unstable-gallery-gap, 16px) * 0.875);
 358    }
 359    .wp-block-gallery.has-nested-images:where(.is-layout-flex).columns-default figure.wp-block-image:not(#individual-image) {
 360      width: calc(33.33% - var(--wp--style--unstable-gallery-gap, 16px) * 0.6666666667);
 361    }
 362    .wp-block-gallery.has-nested-images:where(.is-layout-flex).columns-default figure.wp-block-image:not(#individual-image):first-child:nth-last-child(2),
 363    .wp-block-gallery.has-nested-images:where(.is-layout-flex).columns-default figure.wp-block-image:not(#individual-image):first-child:nth-last-child(2) ~ figure.wp-block-image:not(#individual-image) {
 364      width: calc(50% - var(--wp--style--unstable-gallery-gap, 16px) * 0.5);
 365    }
 366    .wp-block-gallery.has-nested-images:where(.is-layout-flex).columns-default figure.wp-block-image:not(#individual-image):first-child:nth-last-child(1) {
 367      width: 100%;
 368    }
 369  }
 370  .wp-block-gallery.has-nested-images:where(.is-layout-flex).alignleft, .wp-block-gallery.has-nested-images:where(.is-layout-flex).alignright {
 371    max-width: 420px;
 372    width: 100%;
 373  }
 374  .wp-block-gallery.has-nested-images:where(.is-layout-flex).aligncenter {
 375    justify-content: center;
 376  }
 377  
 378  .wp-block-gallery.has-nested-images figure.wp-block-image {
 379    position: relative;
 380    margin: 0;
 381  }
 382  .wp-block-gallery.has-nested-images figure.wp-block-image:has(figcaption)::before,
 383  .wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
 384    position: absolute;
 385    bottom: 0;
 386    left: 0;
 387    right: 0;
 388    max-height: 100%;
 389  }
 390  .wp-block-gallery.has-nested-images figure.wp-block-image:has(figcaption)::before {
 391    content: "";
 392    height: 100%;
 393    max-height: 3em;
 394    pointer-events: none;
 395    backdrop-filter: blur(3px);
 396    -webkit-mask-image: linear-gradient(0deg, #000 20%, transparent 100%);
 397            mask-image: linear-gradient(0deg, #000 20%, transparent 100%);
 398  }
 399  .wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
 400    color: #fff;
 401    text-shadow: 0 0 1.5px #000;
 402    font-size: 13px;
 403    margin: 0;
 404    overflow: auto;
 405    padding: 1em;
 406    text-align: center;
 407    box-sizing: border-box;
 408  }
 409  .wp-block-gallery.has-nested-images figure.wp-block-image figcaption::-webkit-scrollbar {
 410    width: 12px;
 411    height: 12px;
 412  }
 413  .wp-block-gallery.has-nested-images figure.wp-block-image figcaption::-webkit-scrollbar-track {
 414    background-color: transparent;
 415  }
 416  .wp-block-gallery.has-nested-images figure.wp-block-image figcaption::-webkit-scrollbar-thumb {
 417    background-color: transparent;
 418    border-radius: 8px;
 419    border: 3px solid transparent;
 420    background-clip: padding-box;
 421  }
 422  .wp-block-gallery.has-nested-images figure.wp-block-image figcaption:hover::-webkit-scrollbar-thumb, .wp-block-gallery.has-nested-images figure.wp-block-image figcaption:focus::-webkit-scrollbar-thumb, .wp-block-gallery.has-nested-images figure.wp-block-image figcaption:focus-within::-webkit-scrollbar-thumb {
 423    background-color: rgba(255, 255, 255, 0.8);
 424  }
 425  .wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
 426    scrollbar-width: thin;
 427    scrollbar-gutter: stable both-edges;
 428    scrollbar-color: transparent transparent;
 429  }
 430  .wp-block-gallery.has-nested-images figure.wp-block-image figcaption:hover, .wp-block-gallery.has-nested-images figure.wp-block-image figcaption:focus, .wp-block-gallery.has-nested-images figure.wp-block-image figcaption:focus-within {
 431    scrollbar-color: rgba(255, 255, 255, 0.8) transparent;
 432  }
 433  .wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
 434    will-change: transform;
 435  }
 436  @media (hover: none) {
 437    .wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
 438      scrollbar-color: rgba(255, 255, 255, 0.8) transparent;
 439    }
 440  }
 441  .wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
 442    background: linear-gradient(0deg, rgba(0, 0, 0, 0.4) 0%, transparent 100%);
 443  }
 444  .wp-block-gallery.has-nested-images figure.wp-block-image figcaption img {
 445    display: inline;
 446  }
 447  .wp-block-gallery.has-nested-images figure.wp-block-image figcaption a {
 448    color: inherit;
 449  }
 450  .wp-block-gallery.has-nested-images figure.wp-block-image.has-custom-border img {
 451    box-sizing: border-box;
 452  }
 453  .wp-block-gallery.has-nested-images figure.wp-block-image.is-style-rounded > div,
 454  .wp-block-gallery.has-nested-images figure.wp-block-image.is-style-rounded > a, .wp-block-gallery.has-nested-images figure.wp-block-image.has-custom-border > div,
 455  .wp-block-gallery.has-nested-images figure.wp-block-image.has-custom-border > a {
 456    flex: 1 1 auto;
 457  }
 458  .wp-block-gallery.has-nested-images figure.wp-block-image.is-style-rounded figcaption, .wp-block-gallery.has-nested-images figure.wp-block-image.has-custom-border figcaption {
 459    flex: initial;
 460    background: none;
 461    color: inherit;
 462    margin: 0;
 463    padding: 10px 10px 9px;
 464    position: relative;
 465    text-shadow: none;
 466  }
 467  .wp-block-gallery.has-nested-images figure.wp-block-image.is-style-rounded::before, .wp-block-gallery.has-nested-images figure.wp-block-image.has-custom-border::before {
 468    content: none;
 469  }
 470  
 471  :where(.wp-block-gallery.has-nested-images.is-layout-grid) > .blocks-gallery-caption {
 472    grid-column: 1/-1;
 473    text-align: center;
 474  }