/**
 * KSM Theme 01 - Custom CSS
 */
 .ksm-reviews-summary-wrapper {
  background-color: #c0c0c0;
  text-align: center !important;
  padding:1rem;
}
 strong {
  font-weight: 700;
}
.ksm-contact-form {margin-left:0 !important;}
.curved-left {
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  background-color: #3498db;
}
.ksm-lightbox-caption {
  display: none !important;
}
.footer-widget .menu-services-container li {
  margin-left: 1rem;
}
.header-widget strong {
  color: var(--accent);
  font-weight: 600;
}
.custom-logo-link {
  width: 100%;
}
/* ============================================
   BREADCRUMBS & NAVIGATION
   ============================================ */

/* Simple breadcrumb styling for work posts */
.simple-breadcrumb {
  margin-bottom: 1rem;
}

.simple-breadcrumb .breadcrumbs {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.simple-breadcrumb .breadcrumbs li {
  display: inline-flex;
  align-items: center;
}

.simple-breadcrumb .breadcrumbs li::after {
  content: "/";
  margin-left: 0.5rem;
  color: rgba(255, 255, 255, 0.6);
}

.simple-breadcrumb .breadcrumbs li:last-child::after {
  display: none;
}

.simple-breadcrumb .breadcrumbs a {
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  transition: color 0.2s ease;
}

.simple-breadcrumb .breadcrumbs a:hover {
  color: #ffffff;
  text-decoration: underline;
}

ul.breadcrumbs {
  padding-left: 0rem;
}

.breadcrumbs {
  flex-wrap: wrap;
  font-weight: 300;
  line-height: 1.2;
}

.breadcrumbs li {
  list-style-type: none;
  display: inline;
}

.breadcrumbs li:not(:last-child)::after {
  content: " | ";
  padding: 0 5px;
}

.breadcrumb.breadcrumb--last {
  font-weight: 800;
  color: var(--secondary);
}

/* ============================================
   WORK POST HEADER & TITLES
   ============================================ */

/* Work Post Header */
.work-post-header {
  border-bottom: 4px solid var(--accent, #007bff);
}

.work-title {
  margin: 0;
  line-height: 1.2;
}

/* ============================================
   HERO SECTIONS
   ============================================ */

.buck_div_header_left {
    position: relative;
}

.buck_div_hero_heading::after {
  content: "";
  display: block;
  width: 50%;
  border-bottom: 5px solid var(--accent);
  margin-top:5px;
  margin-bottom:5px;
}

.hero-intro-wrapper {
  overflow: auto;
}

.buck_div_hero--box {
  overflow: auto;
}

.hero-text {
  line-height: 1;
}

.hero-text span {
  font-size: 2rem;
  display: block;
  color: var(--secondary);
}

.hero-intro-title {
  font-size: 5rem !important;
  color: var(--accent);
}

/* ============================================
   GRAVITY FORMS STYLING
   ============================================ */

.gchoice.gchoice_1_8_0 {
  font-size: 3rem;
}

#gform_wrapper_2 {
  display: block !important;
}

#gform_submit_button_1 {
  background-color: var(--secondary);
}

.gform_button {
  width: 100%;
  padding: 1rem;
  background-color: var(--primary);
  color: #fff;
}

/* ============================================
   FOOTER
   ============================================ */

.footer-menu .menu-item a {
  font-size:16px !important;
}

.footer-widget h4 {
  border-bottom: 2px solid;
  margin-bottom: 2rem;
}

.copyright-footer {
  text-align: center;
}

/* Footer Widget Row */
.footer-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

/* ============================================
   IMAGES & ALIGNMENT
   ============================================ */

.alignright img {
  border: 1px solid #fff;
}

img.hide-featured-image {
  margin: 0 0 0.5em 2em;
  width: 50%;
  border: 2px solid var(--light);
  max-height: 150px;
  object-fit: cover;
}

.hide-featured-image {
  display: none;
}

.alignright {
  margin-left: 1rem !important;
  float: right !important;
  margin-bottom: 1rem;
  margin-top:2rem;
}

img.alignright {
  margin: 2em 0 0.5em 2em;
  border:2px solid var(--light);
}

.featured-image {
  padding: 1rem;
  width:100%;
}

.related-image {
  width: 100%;
}

#image-single {
  width: 100%;
}

.work-image {
  max-height:250px;
}

/* ============================================
   MOBILE MENU
   ============================================ */
.slanted.margin-top--xs {
    display: flex;
    justify-content: space-around;
}
.first {
    border: 2px solid var(--dark);
    padding: 1rem;
    color: var(--dark);
    background-color: var(--light);
}
.first a { color:#000; }

.second {
    border: 2px solid var(--light);
    padding: 1rem;
    background-color: var(--accent);
    color:var(--light);
}

/* ============================================
   ANIMATION & TRANSITIONS
   ============================================ */

/* Visible state triggered by JavaScript */
.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.fade-in {
  opacity: 0;
  animation: zoomer 1s 0.5s backwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.slide-in {
  opacity: 0;
  transform: translateX(-100%);
  transition: opacity 0.5s, transform 0.5s;
}

.slide-in:not(.slide-in-visible) {
  transition-duration: 0s;
}

.slide-in-visible {
  opacity: 1;
  transform: translateX(0);
}

.slide-in-right {
  opacity: 0;
  transform: translateX(100%);
  transition: opacity 0.5s, transform 0.5s;
}

.slide-in-right:not(.slide-in-right-visible) {
  transition-duration: 0s;
}

.slide-in-right-visible {
  opacity: 1;
  transform: translateX(0);
}

/* ============================================
   SIDEBAR
   ============================================ */

.gform_wrapper {
  padding: 1rem;
}
.sidebar-widget {
  margin-bottom: 3rem;
}
.sidebar-widget h3 {
  padding: 1rem;
  
}
.widget-text-accent {background-color:var(--accent);}
.widget-text-accent .textwidget {background-color:var(--primary);}
.widget-header-color h3 {
  background-color: var(--accent);
  margin-bottom: 2rem;

}
.widget-header-color {
  background-color: var(--secondary);
}
.widget-header-color .textwidget {
  font-size: 3rem;
  padding-bottom: 1rem;
    margin-left: 1rem;
}
@media only screen and (min-width: 993px) {
.custom-flex-gallery img { max-height:450px !important; }
}
/* Collapse sidebar to full width under 992px */
@media only screen and (max-width: 992px) {
  #buck_div_main_content_wrapper [style*="display: flex"] {
    flex-direction: column !important;
  }
  
  .content-box[style*="flex"],
  .page-sidebar {
    flex: 1 1 100% !important;
    max-width: 100% !important;
    width:100%;
  }
}
#related-posts h3 {
    text-align: center;
    background-color: var(--primary);
    color: #fff;
    padding:1rem;
    text-transform:uppercase;
}

/* ============================================
   CONTENT BOX STYLING
   ============================================ */

.content-box img {
    margin-top: 1rem;
    margin-bottom: 1rem;
    width:100%;
    object-fit:cover;
}
.entry-content h2 {
  color: var(--primary);
}
.content-box h3 {
  color: var(--accent);
}
.star-list li::marker {
  color: var(--primary);
}
/* ============================================
   LAYOUT & GRID SYSTEMS
   ============================================ */

.related_row {
  flex: 1 1 calc(25% - 20px);
  max-width: calc(25% - 20px);
  box-sizing: border-box;
  margin-bottom: 20px;
  margin-right: 20px;
  border: 2px solid var(--accent);
  border-radius: 5px;
}

.review-wrapper {
  margin-bottom: 2rem;
}
.center-content { 
  align-items:center; 
}

/* ============================================
   MOBILE NAVIGATION
   ============================================ */

#nav-wrapper-mob {
  opacity: 0;
  z-index:999;
}

  #div_block-2903-5620 {
    display: flex;
    text-align: left;
    flex-direction: column;
    position: absolute;
    right: 0px;
  }

.hidden-nav {
  display: none;
}

/* ============================================
   STYLES & UTILITIES
   ============================================ */

#menu-services-menu .current_page_item {
  background-color: transparent !important;
}

.style-title {
  width:100%;
  background-color: var(--primary);
  color: #fff;
  padding:1rem;
}

#cookie-notice .cn-button {
  padding: 1rem;
  background-color: var(--secondary);
  color: #fff;
}

.background-dark {
  background-color:var(--dark);
}

.background-light {
  background-color:var(--light);
}

.text-stroke-light {
  -webkit-text-stroke: 1px white;
}

/* ============================================
   STAR LISTS & CONTENT BOXES
   ============================================ */

.star-list ul {
  list-style-type: ' ⏵ ';
  padding-left:2.5rem;
  margin-bottom:2rem;
}

.text-box-links a {
  color: var(--accent);
  border-bottom: 2px solid var(--primary);
  font-weight: 500;
}

.content-box > * {
  color: #000;
}

/* ============================================
   GALLERIES
   ============================================ */

.flex-gallery-container {
  max-width: 100%;
  width: 1400px;
  display: flex;
  flex-wrap: wrap;
  margin-left: auto;
  margin-right: auto;
  gap:5px
}

.flex-gallery-item {
  width: calc(25% - 5px);
  position:relative;
  line-height:0;
  overflow:hidden;
  box-shadow: 0.3rem 0.4rem 0.4rem rgba(0, 0, 0, 0.4);
}

.flex-gallery-item img { 
  width:100%; 
  object-fit:cover; 
  height:250px; 
  transition: transform 400ms ease-out;
}

.flex-gallery-item img:hover {
  transform: scale(1.05);
}

.flex-gallery-item a {
  height: 100%;
  display: block;
}

.flex-gallery-caption {
  background-color: var(--primary);
  color: #fff;
  padding: 2rem;
  position: absolute;
  bottom: 20%;
  width: 80%;
  text-transform: uppercase;
  box-shadow: 0 5px 8px rgba(0,0,0,.6);
}

.fancybox-caption__body {
  max-height: 50vh;
  overflow: auto;
  pointer-events: all;
  text-transform: uppercase;
  background-color: var(--primary);
  padding: 1rem;
}

.gallery-columns-4 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-gap: 5px;
  margin-bottom: 3rem;
  margin-top: 1rem;
}

.gallery-columns-4 figure {
  margin: 0.5rem;
  border:1px solid #fff;
}

.gallery-columns-4 img {
  max-height: 250px;
  min-height:250px;
  object-fit: cover;
}

.custom-flex-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom:6rem;
  margin-bottom:5rem;
}

.custom-flex-gallery img {
  flex: 1 1 calc(25% - 10px);
  max-width: calc(25% - 10px);
  object-fit: cover;
  max-height: 250px;
  min-height:250px;
  border:1px solid #fff;
}

/* 2-1-2 Gallery Layout (5 images) */
.custom-flex-gallery img:nth-child(1):nth-last-child(5),
.custom-flex-gallery img:nth-child(2):nth-last-child(4) {
  flex: 0 0 calc(50% - 3px);
  max-width: calc(50% - 3px);
}

.custom-flex-gallery img:nth-child(3):nth-last-child(3) {
  flex: 0 0 100%;
  max-width: 100%;
}

.custom-flex-gallery img:nth-child(4):nth-last-child(2),
.custom-flex-gallery img:nth-child(5):nth-last-child(1) {
  flex: 0 0 calc(50% - 3px);
  max-width: calc(50% - 3px);
}

/* ============================================
   RELATED POSTS & WORKS
   ============================================ */

.related-posts {
  width:100%;
}

.related-post {
  overflow: hidden;
  position: relative;
  border: 2px solid var(--primary);
}

.related-post-image {
  width: 100%;
  height: auto;
  display: block;
  overflow: hidden;
  max-height: 300px;
}

.service-link-button {
  flex-direction: row;
  display: flex;
  width: 100%;
  align-items: center;
  background-color: var(--secondary);
  justify-content: space-between;
  position:absolute;
  bottom:0;
}

.service-title-button {
  width: 80%;
  padding-left: 1rem;
  font-size:1.5rem;
  text-transform:uppercase;
  line-height:1;
}

.service-image-button {
  width: 40px;
  height: 50px;
  object-fit: contain;
  background-color: var(--primary);
}

.related-works {
  width: 100%;
}

.related-work {
  width:100%;
  overflow: hidden;
  position: relative;
  background-color: var(--accent);
  color: var(--light);
}

.related-work-details {
  gap: 10px;
  display: grid;
}

.related-post-text-only {
  background-color: var(--primary);
  margin-top: 2rem;
}

/* ============================================
   PAGINATION
   ============================================ */

.pagination-wrap {
  justify-content: space-between;
  display: flex;
  width: 100%;
  background-color: var(--accent);
}

.page-numbers {
  color:var(--light);
  padding:1rem;
}

.navigation.pagination {
  display: flex;
  width: 100%;
}

.page-numbers:hover {
  color: var(--secondary);
}

.nav-links {
  width: 100%;
  display: flex;
  justify-content: space-evenly;
}

.page-numbers.current { 
  color: var(--secondary);
}

/* ============================================
   ACCESSIBILITY
   ============================================ */

/* Text meant only for screen readers. */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}

/* ============================================
   VIDEO & MEDIA
   ============================================ */

.video-layout {
  display: flex;
  flex-wrap: wrap;
  width:100%;
}

video {
  width: 100% !important;
  height: auto !important;
}

/* ============================================
   BUTTONS & LINKS
   ============================================ */

.link-button {
  background-color: var(--accent);
  color: #fff;
  padding: 1rem;
}

/* ============================================
   404 PAGE
   ============================================ */

.quick-links {
  margin-top: 2rem;
}

.quick-links h2 {
  margin-bottom: 1rem;
}

.quick-links ul {
  list-style: none;
  padding-left: 0;
  margin-left: 0;
}

.quick-links li {
  margin-bottom: 0.5rem;
}

.quick-links a {
  color: var(--primary);
  text-decoration: none;
  font-size: 1.6rem;
}

.quick-links a:hover {
  color: var(--accent);
  text-decoration: underline;
}

/* ============================================
   RESPONSIVE - TABLET (480px - 1200px)
   ============================================ */

@media (min-width: 480px) and (max-width: 1200px) {
  .related-posts {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-column-gap: 1rem;
  }
  
  .related-works {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-column-gap: 1rem;
  }
}

/* ============================================
   RESPONSIVE - DESKTOP (992px+)
   ============================================ */

@media (min-width: 992px) {
  .related-posts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-column-gap: 1rem;
  }
  
  .related-works {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-column-gap: 1rem;
  }
  
  .cta-box-2 {
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
  }
  
  .cta-box-1 {
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
  }
}

/* ============================================
   RESPONSIVE - LARGE DESKTOP (1200px+)
   ============================================ */

@media (min-width: 1200px) {
  .related-posts {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-column-gap: 1rem;
  }
  
  .service-title-button {
    font-size:1.5rem;
  }
}

/* ============================================
   RESPONSIVE - TABLET & MOBILE (max 992px)
   ============================================ */

@media only screen and (max-width: 992px) {
  .visible-nav {
    opacity: 1 !important;
    transition: opacity 2s ease;
    display: block;
  }
  
  .related_row {
    flex: 0 0 calc(33% - 20px);
    max-width: calc(33% - 20px);
  }
  
  .hide-featured-image {
    display: block;
    float: right;
    margin-left: 1rem;
    margin-bottom: 1rem;
    max-width: 50%;
  }
  
  .featured-image {
    display: none;
  }
  
  .flex-gallery-item {
    width: calc(33.33% - 10px);
  }
  
  .text--hero {
    font-size: 3.5rem;   
    text-align: center;
    line-height: 1.1;
  }
  
  .alignright {
    max-width: 50% !important;
    height: auto;
  }
  
  .row-two-line {
    display: grid !important;
    align-items: stretch;
    grid-template-columns: repeat(2,minmax(200px,1fr));
    grid-column-gap: 20px;
    grid-row-gap: 20px;
  }
  
  .responsive-50-width {
    width:100%;
  }
  
  #nav-wrapper-mob {
    position: fixed;
    bottom: 0px;
    width: 100%;
  }
  
  .footer-row {
    grid-template-columns: 1fr;
  }
}

/* ============================================
   RESPONSIVE - MOBILE (max 767px)
   ============================================ */

@media only screen and (max-width: 767px) {
  .related_row {
    flex: 0 0 calc(50% - 20px);
    max-width: calc(50% - 20px);
  }
  
  .flex-gallery-item {
    width: calc(50% - 5px);
    margin-bottom: 1rem;
  }
  
  .work-image {
    max-height:300px;
  }
  
  .width--80 {
    width:100%;
  }
  
  .row-two-line {
    display: grid !important;
    align-items: stretch;
    grid-template-columns: repeat(1,minmax(250px,1fr));
    grid-column-gap: 20px;
    grid-row-gap: 20px;
  }
}

/* ============================================
   RESPONSIVE - SMALL MOBILE (max 480px)
   ============================================ */

@media only screen and (max-width: 480px) {
  .text--hero {
    font-size: 2.5rem;
  }
  
  .related_row {
    flex: 0 0 100%;
    max-width: 100%;
  }
  
  .flex-gallery-container {
    max-width: 100%;
    width: 100%;
    display: block;
  }
  
  .flex-gallery-item {
    width: 100%;
    margin-bottom: 1rem;
    max-height:250px;
  }
  
  .flex-gallery-item img {
    height:200px;
  }
  
  .related-post {
    width: 100%;
  }
  
  .related-work {
    width: 100%;
  }
  
  .grid-4-2-1 {
    grid-template-columns: repeat(1,1fr);
    gap: 1rem;
  }
  
  #nav-wrapper-mob {
    position: fixed;
    right: 0px;
    top: 70%;
  }
}

/* ============================================
   RESPONSIVE - CUSTOM FLEX GALLERY
   ============================================ */

@media (max-width: 1024px) {
  .custom-flex-gallery img {
    flex: 1 1 calc(33.33% - 10px);
    max-width: calc(33.33% - 10px);
  }
}

@media (max-width: 768px) {
    .custom-flex-gallery__link {
  border: none !important;
}
  .custom-flex-gallery img {
    flex: 1 1 calc(50% - 10px);
    
    max-width: calc(50% - 10px);
  }
}

@media (max-width: 480px) {
  .custom-flex-gallery img {
    flex: 1 1 100%;
    max-width: 100%;
  }
}
.custom-flex-gallery img {
    border: 2px solid var(--primary);
}
/* ============================================
   FAQ ACCORDION (Stage 7)
   ============================================ */
#service-related-posts h3 {
  margin-left: 1rem;
}
.ksm-faq__item {
  border-bottom: 1px solid var(--secondary);
  padding-left:1rem;
  padding-right:1rem;
  margin-bottom:1rem;
}

.ksm-faq__item:first-of-type {
  border-top: 1px solid var(--secondary);
}

.ksm-faq__q {
  cursor: pointer;
  font-weight: 600;
  color: var(--dark);
  padding: 0.25rem 0;
  list-style-position: outside;
}

.ksm-faq__q:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.ksm-faq__a {
  padding-top: 0.5rem;
  color: var(--secondary);
}

/* ============================================
   FAQ TITLE — independent of global h3 (Stage 7 amendment)
   Global bare `h3 { font-size: var(--text-l); }` (style.css) resolves
   to a fluid clamp(20px, 16.667px + 1.0667vw, 30px) at this theme's
   root 62.5% (1rem = 10px). No other property (margin, text-transform,
   letter-spacing, font-family) is set on the bare h3 selector, and the
   universal `* { margin:0 }` reset already zeroes any UA margin, so
   font-size is the only property that actually leaks and needs
   overriding here — a class selector already outranks the bare
   element selector on specificity, so this simply declares its own
   explicit value rather than relying on that.
   Visual treatment (background/colour/padding/width) is carried over
   unchanged from the retired .style-title rule per Shane's ruling to
   keep the existing colour tokens and contrast.
   ============================================ */

.ksm-faq__title {
  width: 100%;
  background-color: var(--primary);
  color: #fff !important;
  padding: 1rem;
  font-size: 2.2rem;
}
/* ============================================
   LINKED FLEX GALLERY (Stage 2)

   Scoped entirely under .custom-flex-gallery--linked, which the [gallery]
   shortcode emits ONLY when it wraps each image in an anchor. Unlinked
   galleries keep the bare .custom-flex-gallery wrapper and are untouched by
   every rule below.

   Why these overrides exist: the base rules above style
   .custom-flex-gallery img as the direct flex child. Once an <a> sits between
   the container and the image, the anchor becomes the grid item and the
   image's inherited max-width / min-height / max-height would size it wrongly.
   .custom-flex-gallery--linked img is (0,2,1) against the base (0,1,1), so it
   wins on specificity alone and no priority flag is needed anywhere below.

   The one rule that cannot be beaten is the 450px max-height cap on
   .custom-flex-gallery img inside the min-width:993px block near the top of
   this file, which carries a priority flag. It is not fought: at four
   columns a cell computes
   to roughly 346px wide, so a 4/3 box is about 260px tall and the cap never
   binds. The cap only starts to bind above a cell width of 600px.
   ============================================ */

.custom-flex-gallery--linked {
  display: grid;
  grid-template-columns: 1fr;
}

.custom-flex-gallery--linked a {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  border: none !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Neutralise the flex-child sizing the base rules apply to the image. */
.custom-flex-gallery--linked img {
  display: block;
  width: 100%;
  max-width: 100%;
  min-height: 0;
  max-height: none;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* Hover treatment carried over from .work-gallery-grid in single-work.php,
   so a linked gallery behaves the same way as the completed-project grids. */
.custom-flex-gallery--linked a:hover {
  transform: translateY(-4px);
}

.custom-flex-gallery--linked a::after {
  content: 'Click to View';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2rem;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  padding: 1rem;
  background-color: #fff;
}

.custom-flex-gallery--linked a:hover::after {
  opacity: 1;
}

/* Respect a reduced-motion preference: keep the overlay, drop the movement. */
@media (prefers-reduced-motion: reduce) {
  .custom-flex-gallery--linked a,
  .custom-flex-gallery--linked a::after {
    transition: none;
  }

  .custom-flex-gallery--linked a:hover {
    transform: none;
  }
}

/* One column on phones. */
@media (max-width: 599px) {
  .custom-flex-gallery--linked {
    grid-template-columns: 1fr;
  }
}

/* Two columns on tablets. */
@media (min-width: 600px) and (max-width: 992px) {
  .custom-flex-gallery--linked {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Desktop honours the column count the shortcode asked for. */
@media (min-width: 993px) {
  .custom-flex-gallery--linked.custom-flex-gallery--cols-1 {
    grid-template-columns: repeat(1, 1fr);
  }

  .custom-flex-gallery--linked.custom-flex-gallery--cols-2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .custom-flex-gallery--linked.custom-flex-gallery--cols-3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .custom-flex-gallery--linked.custom-flex-gallery--cols-4 {
    grid-template-columns: repeat(4, 1fr);
  }

  .custom-flex-gallery--linked.custom-flex-gallery--cols-5 {
    grid-template-columns: repeat(5, 1fr);
  }

  .custom-flex-gallery--linked.custom-flex-gallery--cols-6 {
    grid-template-columns: repeat(6, 1fr);
  }

  /* Five and six columns leave cells too narrow for the 2rem overlay the
     other counts use, so it steps down. One to four are left alone. */
  .custom-flex-gallery--linked.custom-flex-gallery--cols-5 a::after,
  .custom-flex-gallery--linked.custom-flex-gallery--cols-6 a::after {
    font-size: 1.25rem;
  }
}