.elementor-71 .elementor-element.elementor-element-88be31b{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-71 .elementor-element.elementor-element-d842e80{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-71 .elementor-element.elementor-element-c64b172 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-71 .elementor-element.elementor-element-c64b172 .aux-filters li > a{font-family:"Open Sans", Sans-serif;}.elementor-71 .elementor-element.elementor-element-c64b172 .aux-media-image{border-radius:0px 0px 0px 0px !important;}.elementor-71 .elementor-element.elementor-element-c64b172 .entry-header .entry-title a{font-family:"Open Sans", Sans-serif;}.elementor-71 .elementor-element.elementor-element-c64b172 .aux-iso-item{margin-bottom:0px !important;}:root{--page-title-display:none;}/* Start custom CSS for aux_recent_portfolios_grid, class: .elementor-element-c64b172 */.elementor-71 .elementor-element.elementor-element-c64b172 .aux-filters ul {
    max-width: 1235px;
    margin: 16px auto;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-88be31b *//* Apply this to your outer container ID (Advanced → CSS ID: portfolioNarrow) */
#portfolioNarrow {
  /* ✳️ This is the single control variable you can adjust: */
  --portfolio-width: 75vw;   /* e.g. 80vw = 80% of viewport width; try 70vw or 90vw */
  --portfolio-gap: 30px;     /* space between grid items */

  width: var(--portfolio-width);
  max-width: 1600px;         /* optional safety limit */
  margin-left: auto;
  margin-right: auto;

  /* Optional: center content and add breathing room */
  display: flex;
  justify-content: center;
}

/* Target the actual grid inside the container */
#portfolioNarrow .portfolio-grid,
#portfolioNarrow .grid-portfolio,
#portfolioNarrow .portfolio-items,
#portfolioNarrow .phlox-portfolio,
#portfolioNarrow .phlox-portfolio .items {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  column-gap: var(--portfolio-gap);
  row-gap: var(--portfolio-gap);
  justify-content: center;
  align-content: start;
  width: 100%;
}

/* Each portfolio item: fixed 3-column width with no margin bleed */
#portfolioNarrow .portfolio-item,
#portfolioNarrow .grid-item,
#portfolioNarrow .item {
  box-sizing: border-box;
  margin: 0 !important;
  width: 100%; /* each grid cell is auto-sized via the grid layout */
}

/* Ensure images and inner elements stay contained */
#portfolioNarrow img,
#portfolioNarrow .portfolio-item * {
  max-width: 100%;
  box-sizing: border-box;
}/* End custom CSS */