/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/


/* Content Grid */
.content-grid {
  --padding-inline: 1rem;
  --content-max-width: 1300px;
  --breakout-max-width: 1500px;

  --breakout-size: calc(
    (var(--breakout-max-width) - var(--content-max-width)) / 2
  );

  display: grid;
  grid-template-columns:
    [full-width-start] minmax(var(--padding-inline), 1fr)
    [breakout-start] minmax(0, var(--breakout-size))
    [content-start] min(
      100% - (var(--padding-inline) * 2),
      var(--content-max-width)
    )
    [content-end]
    minmax(0, var(--breakout-size)) [breakout-end]
    minmax(var(--padding-inline), 1fr) [full-width-end];
}

.content-grid > :not(.breakout, .full-width),
.full-width > :not(.breakout, .full-width) {
  grid-column: content;
}

.content-grid > .breakout {
  grid-column: breakout;
}

.content-grid > .full-width {
  grid-column: full-width;

  display: grid;
  grid-template-columns: inherit;
}


/* Auto Grid */
.auto-grid {
  --auto-keyword: auto-fit;
  --max-column-width: 100% / var(--auto-grid-max-columns, infinity) - var(--auto-grid-gap);
  --column-width: max(
    var(--max-column-width),
    min(var(--auto-grid-min-size, 10rem), 100%)
  );

  display: grid;

  grid-template-columns: repeat(var(--auto-keyword), minmax(var(--column-width), 1fr));

  /* vertical gap falls back to general gap then falls back to 1rem*/
  gap: var(--auto-grid-gap-vertical, var(--auto-grid-gap, 1rem))
    var(--auto-grid-gap, 1rem);
}

/* Section Block Spacing Utils */
.section-space-inner {
  padding-block: var(--block-spacing);
}
.section-space-outer {
  margin-block: var(--block-spacing);  
}
/*  Flow */
.flow > * + * {
    margin-top: var(--flow-spacing, 5rem);
}