[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   * Applies editor left position to the selector passed as argument
  72   */
  73  /**
  74   * Styles that are reused verbatim in a few places
  75   */
  76  /**
  77   * Allows users to opt-out of animations via OS-level preferences.
  78   */
  79  /**
  80   * Reset default styles for JavaScript UI based pages.
  81   * This is a WP-admin agnostic reset
  82   */
  83  /**
  84   * Reset the WP Admin page styles for Gutenberg-like pages.
  85   */
  86  /**
  87   * Creates a checkerboard pattern background to indicate transparency.
  88   * @param {String} $size - The size of the squares in the checkerboard pattern. Default is 12px.
  89   */
  90  .wp-block-gallery:not(.has-nested-images),
  91  .blocks-gallery-grid:not(.has-nested-images) {
  92    display: flex;
  93    flex-wrap: wrap;
  94    list-style-type: none;
  95    padding: 0;
  96    margin: 0;
  97  }
  98  .wp-block-gallery:not(.has-nested-images) .blocks-gallery-image,
  99  .wp-block-gallery:not(.has-nested-images) .blocks-gallery-item,
 100  .blocks-gallery-grid:not(.has-nested-images) .blocks-gallery-image,
 101  .blocks-gallery-grid:not(.has-nested-images) .blocks-gallery-item {
 102    margin: 0 1em 1em 0;
 103    display: flex;
 104    flex-grow: 1;
 105    flex-direction: column;
 106    justify-content: center;
 107    position: relative;
 108    width: calc(50% - 1em);
 109  }
 110  .wp-block-gallery:not(.has-nested-images) .blocks-gallery-image:nth-of-type(even),
 111  .wp-block-gallery:not(.has-nested-images) .blocks-gallery-item:nth-of-type(even),
 112  .blocks-gallery-grid:not(.has-nested-images) .blocks-gallery-image:nth-of-type(even),
 113  .blocks-gallery-grid:not(.has-nested-images) .blocks-gallery-item:nth-of-type(even) {
 114    margin-right: 0;
 115  }
 116  .wp-block-gallery:not(.has-nested-images) .blocks-gallery-image figure,
 117  .wp-block-gallery:not(.has-nested-images) .blocks-gallery-item figure,
 118  .blocks-gallery-grid:not(.has-nested-images) .blocks-gallery-image figure,
 119  .blocks-gallery-grid:not(.has-nested-images) .blocks-gallery-item figure {
 120    margin: 0;
 121    height: 100%;
 122    display: flex;
 123    align-items: flex-end;
 124    justify-content: flex-start;
 125  }
 126  .wp-block-gallery:not(.has-nested-images) .blocks-gallery-image img,
 127  .wp-block-gallery:not(.has-nested-images) .blocks-gallery-item img,
 128  .blocks-gallery-grid:not(.has-nested-images) .blocks-gallery-image img,
 129  .blocks-gallery-grid:not(.has-nested-images) .blocks-gallery-item img {
 130    display: block;
 131    max-width: 100%;
 132    height: auto;
 133    width: auto;
 134  }
 135  .wp-block-gallery:not(.has-nested-images) .blocks-gallery-image figcaption,
 136  .wp-block-gallery:not(.has-nested-images) .blocks-gallery-item figcaption,
 137  .blocks-gallery-grid:not(.has-nested-images) .blocks-gallery-image figcaption,
 138  .blocks-gallery-grid:not(.has-nested-images) .blocks-gallery-item figcaption {
 139    position: absolute;
 140    bottom: 0;
 141    width: 100%;
 142    max-height: 100%;
 143    overflow: auto;
 144    padding: 3em 0.77em 0.7em;
 145    color: #fff;
 146    text-align: center;
 147    font-size: 0.8em;
 148    background: linear-gradient(0deg, rgba(0, 0, 0, 0.7) 0, rgba(0, 0, 0, 0.3) 70%, transparent);
 149    box-sizing: border-box;
 150    margin: 0;
 151    z-index: 2;
 152  }
 153  .wp-block-gallery:not(.has-nested-images) .blocks-gallery-image figcaption img,
 154  .wp-block-gallery:not(.has-nested-images) .blocks-gallery-item figcaption img,
 155  .blocks-gallery-grid:not(.has-nested-images) .blocks-gallery-image figcaption img,
 156  .blocks-gallery-grid:not(.has-nested-images) .blocks-gallery-item figcaption img {
 157    display: inline;
 158  }
 159  .wp-block-gallery:not(.has-nested-images) figcaption,
 160  .blocks-gallery-grid:not(.has-nested-images) figcaption {
 161    flex-grow: 1;
 162  }
 163  .wp-block-gallery:not(.has-nested-images).is-cropped .blocks-gallery-image a,
 164  .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,
 165  .wp-block-gallery:not(.has-nested-images).is-cropped .blocks-gallery-item img,
 166  .blocks-gallery-grid:not(.has-nested-images).is-cropped .blocks-gallery-image a,
 167  .blocks-gallery-grid:not(.has-nested-images).is-cropped .blocks-gallery-image img,
 168  .blocks-gallery-grid:not(.has-nested-images).is-cropped .blocks-gallery-item a,
 169  .blocks-gallery-grid:not(.has-nested-images).is-cropped .blocks-gallery-item img {
 170    width: 100%;
 171    height: 100%;
 172    flex: 1;
 173    object-fit: cover;
 174  }
 175  .wp-block-gallery:not(.has-nested-images).columns-1 .blocks-gallery-image, .wp-block-gallery:not(.has-nested-images).columns-1 .blocks-gallery-item,
 176  .blocks-gallery-grid:not(.has-nested-images).columns-1 .blocks-gallery-image,
 177  .blocks-gallery-grid:not(.has-nested-images).columns-1 .blocks-gallery-item {
 178    width: 100%;
 179    margin-right: 0;
 180  }
 181  @media (min-width: 600px) {
 182    .wp-block-gallery:not(.has-nested-images).columns-3 .blocks-gallery-image, .wp-block-gallery:not(.has-nested-images).columns-3 .blocks-gallery-item,
 183    .blocks-gallery-grid:not(.has-nested-images).columns-3 .blocks-gallery-image,
 184    .blocks-gallery-grid:not(.has-nested-images).columns-3 .blocks-gallery-item {
 185      width: calc(33.3333333333% - 0.6666666667em);
 186      margin-right: 1em;
 187    }
 188    .wp-block-gallery:not(.has-nested-images).columns-4 .blocks-gallery-image, .wp-block-gallery:not(.has-nested-images).columns-4 .blocks-gallery-item,
 189    .blocks-gallery-grid:not(.has-nested-images).columns-4 .blocks-gallery-image,
 190    .blocks-gallery-grid:not(.has-nested-images).columns-4 .blocks-gallery-item {
 191      width: calc(25% - 0.75em);
 192      margin-right: 1em;
 193    }
 194    .wp-block-gallery:not(.has-nested-images).columns-5 .blocks-gallery-image, .wp-block-gallery:not(.has-nested-images).columns-5 .blocks-gallery-item,
 195    .blocks-gallery-grid:not(.has-nested-images).columns-5 .blocks-gallery-image,
 196    .blocks-gallery-grid:not(.has-nested-images).columns-5 .blocks-gallery-item {
 197      width: calc(20% - 0.8em);
 198      margin-right: 1em;
 199    }
 200    .wp-block-gallery:not(.has-nested-images).columns-6 .blocks-gallery-image, .wp-block-gallery:not(.has-nested-images).columns-6 .blocks-gallery-item,
 201    .blocks-gallery-grid:not(.has-nested-images).columns-6 .blocks-gallery-image,
 202    .blocks-gallery-grid:not(.has-nested-images).columns-6 .blocks-gallery-item {
 203      width: calc(16.6666666667% - 0.8333333333em);
 204      margin-right: 1em;
 205    }
 206    .wp-block-gallery:not(.has-nested-images).columns-7 .blocks-gallery-image, .wp-block-gallery:not(.has-nested-images).columns-7 .blocks-gallery-item,
 207    .blocks-gallery-grid:not(.has-nested-images).columns-7 .blocks-gallery-image,
 208    .blocks-gallery-grid:not(.has-nested-images).columns-7 .blocks-gallery-item {
 209      width: calc(14.2857142857% - 0.8571428571em);
 210      margin-right: 1em;
 211    }
 212    .wp-block-gallery:not(.has-nested-images).columns-8 .blocks-gallery-image, .wp-block-gallery:not(.has-nested-images).columns-8 .blocks-gallery-item,
 213    .blocks-gallery-grid:not(.has-nested-images).columns-8 .blocks-gallery-image,
 214    .blocks-gallery-grid:not(.has-nested-images).columns-8 .blocks-gallery-item {
 215      width: calc(12.5% - 0.875em);
 216      margin-right: 1em;
 217    }
 218    .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),
 219    .blocks-gallery-grid:not(.has-nested-images).columns-1 .blocks-gallery-image:nth-of-type(1n),
 220    .blocks-gallery-grid:not(.has-nested-images).columns-1 .blocks-gallery-item:nth-of-type(1n) {
 221      margin-right: 0;
 222    }
 223    .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),
 224    .blocks-gallery-grid:not(.has-nested-images).columns-2 .blocks-gallery-image:nth-of-type(2n),
 225    .blocks-gallery-grid:not(.has-nested-images).columns-2 .blocks-gallery-item:nth-of-type(2n) {
 226      margin-right: 0;
 227    }
 228    .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),
 229    .blocks-gallery-grid:not(.has-nested-images).columns-3 .blocks-gallery-image:nth-of-type(3n),
 230    .blocks-gallery-grid:not(.has-nested-images).columns-3 .blocks-gallery-item:nth-of-type(3n) {
 231      margin-right: 0;
 232    }
 233    .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),
 234    .blocks-gallery-grid:not(.has-nested-images).columns-4 .blocks-gallery-image:nth-of-type(4n),
 235    .blocks-gallery-grid:not(.has-nested-images).columns-4 .blocks-gallery-item:nth-of-type(4n) {
 236      margin-right: 0;
 237    }
 238    .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),
 239    .blocks-gallery-grid:not(.has-nested-images).columns-5 .blocks-gallery-image:nth-of-type(5n),
 240    .blocks-gallery-grid:not(.has-nested-images).columns-5 .blocks-gallery-item:nth-of-type(5n) {
 241      margin-right: 0;
 242    }
 243    .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),
 244    .blocks-gallery-grid:not(.has-nested-images).columns-6 .blocks-gallery-image:nth-of-type(6n),
 245    .blocks-gallery-grid:not(.has-nested-images).columns-6 .blocks-gallery-item:nth-of-type(6n) {
 246      margin-right: 0;
 247    }
 248    .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),
 249    .blocks-gallery-grid:not(.has-nested-images).columns-7 .blocks-gallery-image:nth-of-type(7n),
 250    .blocks-gallery-grid:not(.has-nested-images).columns-7 .blocks-gallery-item:nth-of-type(7n) {
 251      margin-right: 0;
 252    }
 253    .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),
 254    .blocks-gallery-grid:not(.has-nested-images).columns-8 .blocks-gallery-image:nth-of-type(8n),
 255    .blocks-gallery-grid:not(.has-nested-images).columns-8 .blocks-gallery-item:nth-of-type(8n) {
 256      margin-right: 0;
 257    }
 258  }
 259  .wp-block-gallery:not(.has-nested-images) .blocks-gallery-image:last-child,
 260  .wp-block-gallery:not(.has-nested-images) .blocks-gallery-item:last-child,
 261  .blocks-gallery-grid:not(.has-nested-images) .blocks-gallery-image:last-child,
 262  .blocks-gallery-grid:not(.has-nested-images) .blocks-gallery-item:last-child {
 263    margin-right: 0;
 264  }
 265  .wp-block-gallery:not(.has-nested-images).alignleft, .wp-block-gallery:not(.has-nested-images).alignright,
 266  .blocks-gallery-grid:not(.has-nested-images).alignleft,
 267  .blocks-gallery-grid:not(.has-nested-images).alignright {
 268    max-width: 420px;
 269    width: 100%;
 270  }
 271  .wp-block-gallery:not(.has-nested-images).aligncenter .blocks-gallery-item figure,
 272  .blocks-gallery-grid:not(.has-nested-images).aligncenter .blocks-gallery-item figure {
 273    justify-content: center;
 274  }
 275  
 276  .wp-block-gallery:not(.is-cropped) .blocks-gallery-item {
 277    align-self: flex-start;
 278  }
 279  
 280  figure.wp-block-gallery.has-nested-images {
 281    align-items: normal;
 282  }
 283  
 284  .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) {
 285    width: calc(50% - var(--wp--style--unstable-gallery-gap, 16px) / 2);
 286    margin: 0;
 287  }
 288  .wp-block-gallery.has-nested-images figure.wp-block-image {
 289    display: flex;
 290    flex-grow: 1;
 291    justify-content: center;
 292    position: relative;
 293    flex-direction: column;
 294    max-width: 100%;
 295    box-sizing: border-box;
 296  }
 297  .wp-block-gallery.has-nested-images figure.wp-block-image > div,
 298  .wp-block-gallery.has-nested-images figure.wp-block-image > a {
 299    margin: 0;
 300    flex-direction: column;
 301    flex-grow: 1;
 302  }
 303  .wp-block-gallery.has-nested-images figure.wp-block-image img {
 304    display: block;
 305    height: auto;
 306    max-width: 100% !important;
 307    width: auto;
 308  }
 309  .wp-block-gallery.has-nested-images figure.wp-block-image:has(figcaption)::before,
 310  .wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
 311    position: absolute;
 312    bottom: 0;
 313    right: 0;
 314    left: 0;
 315    max-height: 100%;
 316  }
 317  .wp-block-gallery.has-nested-images figure.wp-block-image:has(figcaption)::before {
 318    content: "";
 319    height: 100%;
 320    max-height: 3em;
 321    pointer-events: none;
 322    backdrop-filter: blur(3px);
 323    -webkit-mask-image: linear-gradient(0deg, #000 20%, transparent 100%);
 324            mask-image: linear-gradient(0deg, #000 20%, transparent 100%);
 325  }
 326  .wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
 327    color: #fff;
 328    text-shadow: 0 0 1.5px #000;
 329    font-size: 13px;
 330    margin: 0;
 331    overflow: auto;
 332    padding: 1em;
 333    text-align: center;
 334    box-sizing: border-box;
 335  }
 336  .wp-block-gallery.has-nested-images figure.wp-block-image figcaption::-webkit-scrollbar {
 337    width: 12px;
 338    height: 12px;
 339  }
 340  .wp-block-gallery.has-nested-images figure.wp-block-image figcaption::-webkit-scrollbar-track {
 341    background-color: transparent;
 342  }
 343  .wp-block-gallery.has-nested-images figure.wp-block-image figcaption::-webkit-scrollbar-thumb {
 344    background-color: transparent;
 345    border-radius: 8px;
 346    border: 3px solid transparent;
 347    background-clip: padding-box;
 348  }
 349  .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 {
 350    background-color: rgba(255, 255, 255, 0.8);
 351  }
 352  .wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
 353    scrollbar-width: thin;
 354    scrollbar-gutter: stable both-edges;
 355    scrollbar-color: transparent transparent;
 356  }
 357  .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 {
 358    scrollbar-color: rgba(255, 255, 255, 0.8) transparent;
 359  }
 360  .wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
 361    will-change: transform;
 362  }
 363  @media (hover: none) {
 364    .wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
 365      scrollbar-color: rgba(255, 255, 255, 0.8) transparent;
 366    }
 367  }
 368  .wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
 369    background: linear-gradient(0deg, rgba(0, 0, 0, 0.4) 0%, transparent 100%);
 370  }
 371  .wp-block-gallery.has-nested-images figure.wp-block-image figcaption img {
 372    display: inline;
 373  }
 374  .wp-block-gallery.has-nested-images figure.wp-block-image figcaption a {
 375    color: inherit;
 376  }
 377  .wp-block-gallery.has-nested-images figure.wp-block-image.has-custom-border img {
 378    box-sizing: border-box;
 379  }
 380  .wp-block-gallery.has-nested-images figure.wp-block-image.is-style-rounded > div,
 381  .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,
 382  .wp-block-gallery.has-nested-images figure.wp-block-image.has-custom-border > a {
 383    flex: 1 1 auto;
 384  }
 385  .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 {
 386    flex: initial;
 387    background: none;
 388    color: inherit;
 389    margin: 0;
 390    padding: 10px 10px 9px;
 391    position: relative;
 392    text-shadow: none;
 393  }
 394  .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 {
 395    content: none;
 396  }
 397  .wp-block-gallery.has-nested-images figcaption {
 398    flex-grow: 1;
 399    flex-basis: 100%;
 400    text-align: center;
 401  }
 402  .wp-block-gallery.has-nested-images:not(.is-cropped) figure.wp-block-image:not(#individual-image) {
 403    margin-top: 0;
 404    margin-bottom: auto;
 405  }
 406  .wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image) {
 407    align-self: inherit;
 408  }
 409  .wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image) > div:not(.components-drop-zone),
 410  .wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image) > a {
 411    display: flex;
 412  }
 413  .wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image) a,
 414  .wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image) img {
 415    width: 100%;
 416    flex: 1 0 0%;
 417    height: 100%;
 418    object-fit: cover;
 419  }
 420  .wp-block-gallery.has-nested-images.columns-1 figure.wp-block-image:not(#individual-image) {
 421    width: 100%;
 422  }
 423  @media (min-width: 600px) {
 424    .wp-block-gallery.has-nested-images.columns-3 figure.wp-block-image:not(#individual-image) {
 425      width: calc(33.3333333333% - var(--wp--style--unstable-gallery-gap, 16px) * 0.6666666667);
 426    }
 427    .wp-block-gallery.has-nested-images.columns-4 figure.wp-block-image:not(#individual-image) {
 428      width: calc(25% - var(--wp--style--unstable-gallery-gap, 16px) * 0.75);
 429    }
 430    .wp-block-gallery.has-nested-images.columns-5 figure.wp-block-image:not(#individual-image) {
 431      width: calc(20% - var(--wp--style--unstable-gallery-gap, 16px) * 0.8);
 432    }
 433    .wp-block-gallery.has-nested-images.columns-6 figure.wp-block-image:not(#individual-image) {
 434      width: calc(16.6666666667% - var(--wp--style--unstable-gallery-gap, 16px) * 0.8333333333);
 435    }
 436    .wp-block-gallery.has-nested-images.columns-7 figure.wp-block-image:not(#individual-image) {
 437      width: calc(14.2857142857% - var(--wp--style--unstable-gallery-gap, 16px) * 0.8571428571);
 438    }
 439    .wp-block-gallery.has-nested-images.columns-8 figure.wp-block-image:not(#individual-image) {
 440      width: calc(12.5% - var(--wp--style--unstable-gallery-gap, 16px) * 0.875);
 441    }
 442    .wp-block-gallery.has-nested-images.columns-default figure.wp-block-image:not(#individual-image) {
 443      width: calc(33.33% - var(--wp--style--unstable-gallery-gap, 16px) * 0.6666666667);
 444    }
 445    .wp-block-gallery.has-nested-images.columns-default figure.wp-block-image:not(#individual-image):first-child:nth-last-child(2),
 446    .wp-block-gallery.has-nested-images.columns-default figure.wp-block-image:not(#individual-image):first-child:nth-last-child(2) ~ figure.wp-block-image:not(#individual-image) {
 447      width: calc(50% - var(--wp--style--unstable-gallery-gap, 16px) * 0.5);
 448    }
 449    .wp-block-gallery.has-nested-images.columns-default figure.wp-block-image:not(#individual-image):first-child:nth-last-child(1) {
 450      width: 100%;
 451    }
 452  }
 453  .wp-block-gallery.has-nested-images.alignleft, .wp-block-gallery.has-nested-images.alignright {
 454    max-width: 420px;
 455    width: 100%;
 456  }
 457  .wp-block-gallery.has-nested-images.aligncenter {
 458    justify-content: center;
 459  }