[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    -o-object-fit: cover;
 180       object-fit: cover;
 181  }
 182  .wp-block-gallery:not(.has-nested-images).columns-1 .blocks-gallery-image, .wp-block-gallery:not(.has-nested-images).columns-1 .blocks-gallery-item,
 183  .blocks-gallery-grid:not(.has-nested-images).columns-1 .blocks-gallery-image,
 184  .blocks-gallery-grid:not(.has-nested-images).columns-1 .blocks-gallery-item {
 185    width: 100%;
 186    margin-left: 0;
 187  }
 188  @media (min-width: 600px) {
 189    .wp-block-gallery:not(.has-nested-images).columns-3 .blocks-gallery-image, .wp-block-gallery:not(.has-nested-images).columns-3 .blocks-gallery-item,
 190    .blocks-gallery-grid:not(.has-nested-images).columns-3 .blocks-gallery-image,
 191    .blocks-gallery-grid:not(.has-nested-images).columns-3 .blocks-gallery-item {
 192      width: calc(33.3333333333% - 0.6666666667em);
 193      margin-left: 1em;
 194    }
 195    .wp-block-gallery:not(.has-nested-images).columns-4 .blocks-gallery-image, .wp-block-gallery:not(.has-nested-images).columns-4 .blocks-gallery-item,
 196    .blocks-gallery-grid:not(.has-nested-images).columns-4 .blocks-gallery-image,
 197    .blocks-gallery-grid:not(.has-nested-images).columns-4 .blocks-gallery-item {
 198      width: calc(25% - 0.75em);
 199      margin-left: 1em;
 200    }
 201    .wp-block-gallery:not(.has-nested-images).columns-5 .blocks-gallery-image, .wp-block-gallery:not(.has-nested-images).columns-5 .blocks-gallery-item,
 202    .blocks-gallery-grid:not(.has-nested-images).columns-5 .blocks-gallery-image,
 203    .blocks-gallery-grid:not(.has-nested-images).columns-5 .blocks-gallery-item {
 204      width: calc(20% - 0.8em);
 205      margin-left: 1em;
 206    }
 207    .wp-block-gallery:not(.has-nested-images).columns-6 .blocks-gallery-image, .wp-block-gallery:not(.has-nested-images).columns-6 .blocks-gallery-item,
 208    .blocks-gallery-grid:not(.has-nested-images).columns-6 .blocks-gallery-image,
 209    .blocks-gallery-grid:not(.has-nested-images).columns-6 .blocks-gallery-item {
 210      width: calc(16.6666666667% - 0.8333333333em);
 211      margin-left: 1em;
 212    }
 213    .wp-block-gallery:not(.has-nested-images).columns-7 .blocks-gallery-image, .wp-block-gallery:not(.has-nested-images).columns-7 .blocks-gallery-item,
 214    .blocks-gallery-grid:not(.has-nested-images).columns-7 .blocks-gallery-image,
 215    .blocks-gallery-grid:not(.has-nested-images).columns-7 .blocks-gallery-item {
 216      width: calc(14.2857142857% - 0.8571428571em);
 217      margin-left: 1em;
 218    }
 219    .wp-block-gallery:not(.has-nested-images).columns-8 .blocks-gallery-image, .wp-block-gallery:not(.has-nested-images).columns-8 .blocks-gallery-item,
 220    .blocks-gallery-grid:not(.has-nested-images).columns-8 .blocks-gallery-image,
 221    .blocks-gallery-grid:not(.has-nested-images).columns-8 .blocks-gallery-item {
 222      width: calc(12.5% - 0.875em);
 223      margin-left: 1em;
 224    }
 225    .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),
 226    .blocks-gallery-grid:not(.has-nested-images).columns-1 .blocks-gallery-image:nth-of-type(1n),
 227    .blocks-gallery-grid:not(.has-nested-images).columns-1 .blocks-gallery-item:nth-of-type(1n) {
 228      margin-left: 0;
 229    }
 230    .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),
 231    .blocks-gallery-grid:not(.has-nested-images).columns-2 .blocks-gallery-image:nth-of-type(2n),
 232    .blocks-gallery-grid:not(.has-nested-images).columns-2 .blocks-gallery-item:nth-of-type(2n) {
 233      margin-left: 0;
 234    }
 235    .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),
 236    .blocks-gallery-grid:not(.has-nested-images).columns-3 .blocks-gallery-image:nth-of-type(3n),
 237    .blocks-gallery-grid:not(.has-nested-images).columns-3 .blocks-gallery-item:nth-of-type(3n) {
 238      margin-left: 0;
 239    }
 240    .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),
 241    .blocks-gallery-grid:not(.has-nested-images).columns-4 .blocks-gallery-image:nth-of-type(4n),
 242    .blocks-gallery-grid:not(.has-nested-images).columns-4 .blocks-gallery-item:nth-of-type(4n) {
 243      margin-left: 0;
 244    }
 245    .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),
 246    .blocks-gallery-grid:not(.has-nested-images).columns-5 .blocks-gallery-image:nth-of-type(5n),
 247    .blocks-gallery-grid:not(.has-nested-images).columns-5 .blocks-gallery-item:nth-of-type(5n) {
 248      margin-left: 0;
 249    }
 250    .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),
 251    .blocks-gallery-grid:not(.has-nested-images).columns-6 .blocks-gallery-image:nth-of-type(6n),
 252    .blocks-gallery-grid:not(.has-nested-images).columns-6 .blocks-gallery-item:nth-of-type(6n) {
 253      margin-left: 0;
 254    }
 255    .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),
 256    .blocks-gallery-grid:not(.has-nested-images).columns-7 .blocks-gallery-image:nth-of-type(7n),
 257    .blocks-gallery-grid:not(.has-nested-images).columns-7 .blocks-gallery-item:nth-of-type(7n) {
 258      margin-left: 0;
 259    }
 260    .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),
 261    .blocks-gallery-grid:not(.has-nested-images).columns-8 .blocks-gallery-image:nth-of-type(8n),
 262    .blocks-gallery-grid:not(.has-nested-images).columns-8 .blocks-gallery-item:nth-of-type(8n) {
 263      margin-left: 0;
 264    }
 265  }
 266  .wp-block-gallery:not(.has-nested-images) .blocks-gallery-image:last-child,
 267  .wp-block-gallery:not(.has-nested-images) .blocks-gallery-item:last-child,
 268  .blocks-gallery-grid:not(.has-nested-images) .blocks-gallery-image:last-child,
 269  .blocks-gallery-grid:not(.has-nested-images) .blocks-gallery-item:last-child {
 270    margin-left: 0;
 271  }
 272  .wp-block-gallery:not(.has-nested-images).alignleft, .wp-block-gallery:not(.has-nested-images).alignright,
 273  .blocks-gallery-grid:not(.has-nested-images).alignleft,
 274  .blocks-gallery-grid:not(.has-nested-images).alignright {
 275    max-width: 420px;
 276    width: 100%;
 277  }
 278  .wp-block-gallery:not(.has-nested-images).aligncenter .blocks-gallery-item figure,
 279  .blocks-gallery-grid:not(.has-nested-images).aligncenter .blocks-gallery-item figure {
 280    justify-content: center;
 281  }
 282  
 283  .wp-block-gallery:not(.is-cropped) .blocks-gallery-item {
 284    align-self: flex-start;
 285  }
 286  
 287  figure.wp-block-gallery.has-nested-images {
 288    align-items: normal;
 289  }
 290  
 291  .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) {
 292    width: calc(50% - var(--wp--style--unstable-gallery-gap, 16px) / 2);
 293    margin: 0;
 294  }
 295  .wp-block-gallery.has-nested-images figure.wp-block-image {
 296    display: flex;
 297    flex-grow: 1;
 298    justify-content: center;
 299    position: relative;
 300    flex-direction: column;
 301    max-width: 100%;
 302    box-sizing: border-box;
 303  }
 304  .wp-block-gallery.has-nested-images figure.wp-block-image > div,
 305  .wp-block-gallery.has-nested-images figure.wp-block-image > a {
 306    margin: 0;
 307    flex-direction: column;
 308    flex-grow: 1;
 309  }
 310  .wp-block-gallery.has-nested-images figure.wp-block-image img {
 311    display: block;
 312    height: auto;
 313    max-width: 100% !important;
 314    width: auto;
 315  }
 316  .wp-block-gallery.has-nested-images figure.wp-block-image:has(figcaption)::before,
 317  .wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
 318    position: absolute;
 319    bottom: 0;
 320    left: 0;
 321    right: 0;
 322    max-height: 100%;
 323  }
 324  .wp-block-gallery.has-nested-images figure.wp-block-image:has(figcaption)::before {
 325    content: "";
 326    height: 100%;
 327    max-height: 3em;
 328    pointer-events: none;
 329    backdrop-filter: blur(3px);
 330    -webkit-mask-image: linear-gradient(0deg, #000 20%, transparent 100%);
 331            mask-image: linear-gradient(0deg, #000 20%, transparent 100%);
 332  }
 333  .wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
 334    color: #fff;
 335    text-shadow: 0 0 1.5px #000;
 336    font-size: 13px;
 337    margin: 0;
 338    overflow: auto;
 339    padding: 1em;
 340    text-align: center;
 341    box-sizing: border-box;
 342  }
 343  .wp-block-gallery.has-nested-images figure.wp-block-image figcaption::-webkit-scrollbar {
 344    width: 12px;
 345    height: 12px;
 346  }
 347  .wp-block-gallery.has-nested-images figure.wp-block-image figcaption::-webkit-scrollbar-track {
 348    background-color: transparent;
 349  }
 350  .wp-block-gallery.has-nested-images figure.wp-block-image figcaption::-webkit-scrollbar-thumb {
 351    background-color: transparent;
 352    border-radius: 8px;
 353    border: 3px solid transparent;
 354    background-clip: padding-box;
 355  }
 356  .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 {
 357    background-color: rgba(255, 255, 255, 0.8);
 358  }
 359  .wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
 360    scrollbar-width: thin;
 361    scrollbar-gutter: stable both-edges;
 362    scrollbar-color: transparent transparent;
 363  }
 364  .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 {
 365    scrollbar-color: rgba(255, 255, 255, 0.8) transparent;
 366  }
 367  .wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
 368    will-change: transform;
 369  }
 370  @media (hover: none) {
 371    .wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
 372      scrollbar-color: rgba(255, 255, 255, 0.8) transparent;
 373    }
 374  }
 375  .wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
 376    background: linear-gradient(0deg, rgba(0, 0, 0, 0.4) 0%, transparent 100%);
 377  }
 378  .wp-block-gallery.has-nested-images figure.wp-block-image figcaption img {
 379    display: inline;
 380  }
 381  .wp-block-gallery.has-nested-images figure.wp-block-image figcaption a {
 382    color: inherit;
 383  }
 384  .wp-block-gallery.has-nested-images figure.wp-block-image.has-custom-border img {
 385    box-sizing: border-box;
 386  }
 387  .wp-block-gallery.has-nested-images figure.wp-block-image.is-style-rounded > div,
 388  .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,
 389  .wp-block-gallery.has-nested-images figure.wp-block-image.has-custom-border > a {
 390    flex: 1 1 auto;
 391  }
 392  .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 {
 393    flex: initial;
 394    background: none;
 395    color: inherit;
 396    margin: 0;
 397    padding: 10px 10px 9px;
 398    position: relative;
 399    text-shadow: none;
 400  }
 401  .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 {
 402    content: none;
 403  }
 404  .wp-block-gallery.has-nested-images figcaption {
 405    flex-grow: 1;
 406    flex-basis: 100%;
 407    text-align: center;
 408  }
 409  .wp-block-gallery.has-nested-images:not(.is-cropped) figure.wp-block-image:not(#individual-image) {
 410    margin-top: 0;
 411    margin-bottom: auto;
 412  }
 413  .wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image) {
 414    align-self: inherit;
 415  }
 416  .wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image) > div:not(.components-drop-zone),
 417  .wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image) > a {
 418    display: flex;
 419  }
 420  .wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image) a,
 421  .wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image) img {
 422    width: 100%;
 423    flex: 1 0 0%;
 424    height: 100%;
 425    -o-object-fit: cover;
 426       object-fit: cover;
 427  }
 428  .wp-block-gallery.has-nested-images.columns-1 figure.wp-block-image:not(#individual-image) {
 429    width: 100%;
 430  }
 431  @media (min-width: 600px) {
 432    .wp-block-gallery.has-nested-images.columns-3 figure.wp-block-image:not(#individual-image) {
 433      width: calc(33.3333333333% - var(--wp--style--unstable-gallery-gap, 16px) * 0.6666666667);
 434    }
 435    .wp-block-gallery.has-nested-images.columns-4 figure.wp-block-image:not(#individual-image) {
 436      width: calc(25% - var(--wp--style--unstable-gallery-gap, 16px) * 0.75);
 437    }
 438    .wp-block-gallery.has-nested-images.columns-5 figure.wp-block-image:not(#individual-image) {
 439      width: calc(20% - var(--wp--style--unstable-gallery-gap, 16px) * 0.8);
 440    }
 441    .wp-block-gallery.has-nested-images.columns-6 figure.wp-block-image:not(#individual-image) {
 442      width: calc(16.6666666667% - var(--wp--style--unstable-gallery-gap, 16px) * 0.8333333333);
 443    }
 444    .wp-block-gallery.has-nested-images.columns-7 figure.wp-block-image:not(#individual-image) {
 445      width: calc(14.2857142857% - var(--wp--style--unstable-gallery-gap, 16px) * 0.8571428571);
 446    }
 447    .wp-block-gallery.has-nested-images.columns-8 figure.wp-block-image:not(#individual-image) {
 448      width: calc(12.5% - var(--wp--style--unstable-gallery-gap, 16px) * 0.875);
 449    }
 450    .wp-block-gallery.has-nested-images.columns-default figure.wp-block-image:not(#individual-image) {
 451      width: calc(33.33% - var(--wp--style--unstable-gallery-gap, 16px) * 0.6666666667);
 452    }
 453    .wp-block-gallery.has-nested-images.columns-default figure.wp-block-image:not(#individual-image):first-child:nth-last-child(2),
 454    .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) {
 455      width: calc(50% - var(--wp--style--unstable-gallery-gap, 16px) * 0.5);
 456    }
 457    .wp-block-gallery.has-nested-images.columns-default figure.wp-block-image:not(#individual-image):first-child:nth-last-child(1) {
 458      width: 100%;
 459    }
 460  }
 461  .wp-block-gallery.has-nested-images.alignleft, .wp-block-gallery.has-nested-images.alignright {
 462    max-width: 420px;
 463    width: 100%;
 464  }
 465  .wp-block-gallery.has-nested-images.aligncenter {
 466    justify-content: center;
 467  }