.directory {
  --fg-200: repeat(auto-fill, minmax(min(200px, 100%), 1fr));
  --fg-250: repeat(auto-fill, minmax(min(250px, 100%), 1fr));
  --fg-300: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  --fg-325: repeat(auto-fill, minmax(min(325px, 100%), 1fr));
  --fg-350: repeat(auto-fill, minmax(min(350px, 100%), 1fr));
  --fg-400: repeat(auto-fill, minmax(min(400px, 100%), 1fr));
  --fg-450: repeat(auto-fill, minmax(min(450px, 100%), 1fr));
  --ascwhite: #f5f6f8;
  --ascgold: #fc0;
  --asclightblue: #0085ca;
  --ascblue: #003c71;
  --ascblue90: hsla(208, 100%, 22%, 0.9);
  --ascblue80: hsla(208, 100%, 22%, 0.8);
  --ascblue70: hsla(208, 100%, 22%, 0.7);
  --ascblue60: hsla(208, 100%, 22%, 0.6);
  --ascblue50: hsla(208, 100%, 22%, 0.5);
  --ascblue40: hsla(208, 100%, 22%, 0.4);
  --ascblue30: hsla(208, 100%, 22%, 0.3);
  --ascblue20: hsla(208, 100%, 22%, 0.2);
  --ascblue15: hsla(208, 100%, 22%, 0.15);
  --ascblue10: hsla(208, 100%, 22%, 0.1);
  --ascblue05: hsla(208, 100%, 22%, 0.05);
  --ascdarkblue: #00203c;
  --transition: 150ms ease-in-out;
}

/* BEGIN RESETS */

.directory *,
.directory *::before,
.directory *::after {
  box-sizing: border-box;
}

.directory * {
  margin: 0;
  padding: 0;
}

.directory {
  margin-inline: auto;
}

.directory img {
  display: block;
  width: 100%;
  border-radius: initial;
}

.directory p {
  text-wrap: pretty;
  line-height: 1.5;
}

.directory a[href^="tel"] {
  text-decoration: inherit;
  color: inherit;
}
/* END RESETS */

.directory .flow > * + * {
  margin-top: 1rem;
}

.directory .hide {
  display: none !important;
}

.directory .views-exposed-form {
  margin-bottom: 1em;
}

.directory .pager {
  margin-top: 2em;
}

.directory .content-grid {
  --padding-inline: 1rem;
  --content-max-width: 1140px;
  --breakout-max-width: 1300px;
  --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];
}

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

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

.directory .content-grid > .full-width {
  display: grid;
  grid-template-columns: inherit;
  grid-column: full-width;
}

.directory .directory__profiles {
  grid-template-columns: var(--fg-450);
}

.directory__profiles {
  display: grid;
  gap: 2rem;
  grid-template-columns: var(--fg-250);
}

/**
 * Pager styles
 */

nav.pager {
  position: sticky;
  z-index: 10;
  bottom: 5px;
  padding: 10px;
  border-radius: 8px;
  background-color: #013b72;
}

.pager__items {
  display: flex;
  justify-content: center;
  list-style: none;
  gap: 5px;
}

.pager__item a {
  display: block;
  padding: 8px;
  text-decoration: none;
  color: #fff;
  border-radius: 8px;
  font-weight: 700;
}

.pager__item a:hover {
  color: #003c71;
  background: #fc0;
}

.pager__item--ellipsis {
  display: none;
}

.pager__item--next,
.pager__item--last,
.pager__item--previous,
.pager__item--first {
  width: 90px;
}