/**
 SASS files that don't get compiled into CSS. Do not put element selectors in here.
 Every file not starting with '_' should import this file if you want to use functions and mixins.
 */
/**
 * SASS variables
 *
 These are only used in the properties and abstract SASS files.
 */
/**
 Breakpoints and columns
 */
/**
 Text
 */
/**
Fill in the header styles, only write the properties you want to override.
 */
/**
 Form
 */
/**
  Buttons
 */
/**
 Breakpoints

 @param {Keyword} $breakpoint - The breakpoint name of the minimum width. Can be any of the names in the $breakpoint variable
 */
/**
  Custom column size.
  Especially handy inside other columns.

  @param {Number|string} $size - the size in columns or 'expand'/'shrink'.
  @param {number} $total - the total size in columns. Ignored when size is 'expand'/'shrink'
 */
/**
  Custom offset size.
  Especially handy inside other columns.

  @param {Number|string} $size - the size of the offset.
  @param {number} $total - the total size in columns.
  @param {string} - the side from the offset.
 */
.paragraph--type--gallery {
  --views-responsive-grid--column-count: 3;
  --views-responsive-grid--cell-min-width: 280px;
  --views-responsive-grid--layout-gap: 20px;
  --views-responsive-grid--gap-count: calc(var(--views-responsive-grid--column-count) - 1);
  --views-responsive-grid--total-gap-width: calc(var(--views-responsive-grid--gap-count) * var(--views-responsive-grid--layout-gap));
  --views-responsive-grid-item--max-width: calc((100% - var(--views-responsive-grid--total-gap-width)) / var(--views-responsive-grid--column-count));
  --views-responsive-grid-item--calculated-min-width: min(100%, var(--views-responsive-grid--cell-min-width));
  /* Tablet: 2 items per row */
  /* Mobile: 1 item per row */
}
.paragraph--type--gallery .field--name-field-media-multiple {
  --views-responsive-grid--layout-gap: 20px;
  container-type: inline-size;
}
.paragraph--type--gallery .field--name-field-media-multiple > .field__items {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--views-responsive-grid--layout-gap);
}
.paragraph--type--gallery .field--name-field-media-multiple > .field__items > .field__item {
  grid-column: span 2;
  /* Every second row: 2 items */
}
.paragraph--type--gallery .field--name-field-media-multiple > .field__items > .field__item:nth-child(5n+4), .paragraph--type--gallery .field--name-field-media-multiple > .field__items > .field__item:nth-child(5n+5) {
  grid-column: span 3;
}
@container (max-width: 879px) {
  .paragraph--type--gallery .field--name-field-media-multiple > .field__items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .paragraph--type--gallery .field--name-field-media-multiple > .field__items > .field__item, .paragraph--type--gallery .field--name-field-media-multiple > .field__items > .field__item:nth-child(5n+4), .paragraph--type--gallery .field--name-field-media-multiple > .field__items > .field__item:nth-child(5n+5) {
    grid-column: span 1;
  }
}
@container (max-width: 579px) {
  .paragraph--type--gallery .field--name-field-media-multiple > .field__items {
    grid-template-columns: 1fr;
  }
}
.paragraph--type--gallery h3 {
  margin-bottom: 24px;
}
@media (min-width: 1200px) {
  .paragraph--type--gallery h3 {
    margin-bottom: 48px;
  }
}
.paragraph--type--gallery img {
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}