:root {
  --purple-primary: var(--color-purple-70);
  --purple-secondary: var(--color-purple-80);
  --blue-primary: var(--color-blue-60);
  --blue-primary-hover: var(--color-blue-70);
  --violet-primary: var(--color-violet-60);
  --controls-hover: var(--color-violet-80);
  --bg-white: var(--color-white);
  --bg-purple-primary: var(--purple-primary);
  --bg-purple-secondary: var(--purple-secondary);
  --bg-violet-light: var(--color-violet-10);
  --bg-violet: var(--color-violet-40);
  --bg-soft-grey: var(--color-grey-10);
  --bg-light-grey: var(--color-grey-30);
  --bg-body-surface: var(--bg-white);
  --bg-container: var(--bg-white);
  --outline-light: var(--color-grey-20);
  --outline-dark: var(--color-grey-40);
  --text-breadcrumb: var(--color-grey-70);
  --text-breadcrumb-link: var(--blue-primary);
  --text-light-surface: var(--color-grey-80);
  --text-light-surface-hover: var(--color-grey-70);
  --text-dark-surface: var(--color-white);
  --text-body: var(--text-light-surface);
  --text-body-hover: var(--text-light-surface-hover);
  --text-h1-h3: var(--purple-primary);
  --text-h4-h5: var(--color-grey-70);
  --text-label: var(--violet-primary);
  --text-violet: var(--color-violet-70);
  --text-dark: var(--color-black);
  --text-media-caption: var(--color-grey-60);
  --text-over-surface: var(--color-white);
  --text-controls: var(--color-violet-70);
  --text-label-link: var(--blue-primary);
  --text-label-link-hover: var(--blue-primary-hover);
  --active-link-violet: var(--violet-primary);
  --button-blue-bg: var(--color-blue-60);
  --button-blue-bg-hover: var(--color-blue-70);
  --button-blue-bg-pressed: var(--color-blue-80);
  --button-blue-text: var(--color-white);
  --button-blue-text-hover: var(--color-white);
  --button-blue-text-pressed: var(--color-white);
  --button-blue-border: var(--color-blue-60);
  --button-blue-border-hover: var(--color-blue-70);
  --button-blue-border-pressed: var(--color-blue-80);
  --button-secondary-bg: var(--color-white);
  --button-secondary-bg-hover: var(--color-blue-20);
  --button-secondary-bg-pressed: var(--color-blue-30);
  --button-secondary-text: var(--color-blue-60);
  --button-secondary-text-hover: var(--color-blue-70);
  --button-secondary-text-pressed: var(--color-blue-80);
  --button-secondary-border: var(--color-blue-60);
  --button-secondary-border-hover: var(--color-blue-70);
  --button-secondary-border-pressed: var(--color-blue-80);
  --button-ghost-bg: transparent;
  --button-ghost-light-bg-hover: var(--color-blue-20);
  --button-ghost-light-bg-pressed: var(--color-blue-30);
  --button-ghost-light-text: var(--color-blue-60);
  --button-ghost-light-text-hover: var(--color-blue-70);
  --button-ghost-light-text-pressed: var(--color-blue-80);
  --button-ghost-light-border: var(--color-blue-60);
  --button-ghost-light-border-hover: var(--color-blue-70);
  --button-ghost-light-border-pressed: var(--color-blue-80);
  --button-ghost-dark-bg-hover: var(--color-white);
  --button-ghost-dark-bg-pressed: var(--color-grey-10);
  --button-ghost-dark-text: var(--color-white);
  --button-ghost-dark-text-hover: var(--color-blue-70);
  --button-ghost-dark-text-pressed: var(--color-blue-80);
  --button-ghost-dark-border: var(--color-white);
  --button-ghost-dark-border-hover: var(--color-white);
  --button-ghost-dark-border-pressed: var(--color-grey-20);
  --btn-primary-bg: var(--button-blue-bg);
  --btn-primary-bg-hover: var(--button-blue-bg-hover);
  --btn-primary-bg-pressed: var(--button-blue-bg-pressed);
  --btn-primary-text: var(--button-blue-text);
  --btn-primary-text-hover: var(--button-blue-text-hover);
  --btn-primary-text-pressed: var(--button-blue-text-pressed);
  --btn-primary-border: var(--button-blue-border);
  --btn-primary-border-hover: var(--button-blue-border-hover);
  --btn-primary-border-pressed: var(--button-blue-border-pressed);
  --btn-secondary-bg: var(--button-secondary-bg);
  --btn-secondary-bg-hover: var(--button-secondary-bg-hover);
  --btn-secondary-bg-pressed: var(--button-secondary-bg-pressed);
  --btn-secondary-text: var(--button-secondary-text);
  --btn-secondary-text-hover: var(--button-secondary-text-hover);
  --btn-secondary-text-pressed: var(--button-secondary-text-pressed);
  --btn-secondary-border: var(--button-secondary-border);
  --btn-secondary-border-hover: var(--button-secondary-border-hover);
  --btn-secondary-border-pressed: var(--button-secondary-border-pressed);
  --btn-ghost-bg: var(--button-ghost-bg);
  --btn-ghost-bg-hover: var(--button-ghost-light-bg-hover);
  --btn-ghost-bg-pressed: var(--button-ghost-light-bg-pressed);
  --btn-ghost-text: var(--button-ghost-light-text);
  --btn-ghost-text-hover: var(--button-ghost-light-text-hover);
  --btn-ghost-text-pressed: var(--button-ghost-light-text-pressed);
  --btn-ghost-border: var(--button-ghost-light-border);
  --btn-ghost-border-hover: var(--button-ghost-light-border-hover);
  --btn-ghost-border-pressed: var(--button-ghost-light-border-pressed);
  --alert-text-white: var(--color-white);
  --alert-text-blue: var(--color-dark-blue);
  --alert-text-dark-green: var(--color-dark-green);
  --alert-text-dark-orange: var(--color-dark-orange);
  --alert-text-red: var(--color-dark-red);
  --alert-info-bg: var(--color-light-blue);
  --alert-info-accent: var(--color-dark-blue);
  --alert-success-bg: var(--color-light-green);
  --alert-success-accent-bg: var(--color-dark-green);
  --alert-warning-bg: var(--color-light-orange);
  --alert-warning-accent: var(--color-dark-orange);
  --alert-danger-bg: var(--color-light-red);
  --alert-danger-accent: var(--color-dark-red);
  --star-yellow: var(--color-dark-yellow);
  --text-icon-white: var(--color-white);
  --text-grey-60: var(--color-grey-60);
  --text-link-violet: var(--color-violet-60);
  --brand-facebook: var(--color-facebook);
  --brand-twitter: var(--color-twitter);
  --brand-youtube: var(--color-youtube);
  --brand-instagram: var(--color-instagram);
  --brand-linkedin: var(--color-linkedin);
  --brand-pinterest: var(--color-pinterest);
  --brand-tiktok: var(--color-tiktok);
  --field-bg: var(--bg-white);
  --field-border-color: var(--outline-light);
  --field-focus-border-color: var(--button-blue-border);
  --overlay-scrim: rgba(0, 0, 0, 0.25);
  --controls-text: var(--color-violet-70);
  --controls-hover: var(--color-violet-80);
  --controls-outline-light: var(--color-violet-20);
  --controls-outline-dark: var(--color-violet-60);
  --controls-scrollbar-dark: var(--color-grey-40);
  --controls-scrollbar-light: var(--color-grey-20);
  --box-shadow-large: 0 1px 3px 0 var(--color-black-10), 0 1px 2px -1px var(--color-black-10);
}
:root .dark-surface {
  --text-body: var(--text-dark-surface);
  --nav-item-text: var(--text-dark-surface);
  --nav-item-text-hover: var(--blue-primary);
  --nav-item-bg-hover: var(--bg-white);
  --btn-primary-bg: var(--button-secondary-bg);
  --btn-primary-bg-hover: var(--button-secondary-bg-hover);
  --btn-primary-bg-pressed: var(--button-secondary-bg-pressed);
  --btn-primary-text: var(--button-secondary-text);
  --btn-primary-text-hover: var(--button-secondary-text-hover);
  --btn-primary-text-pressed: var(--button-secondary-text-pressed);
  --btn-primary-border: var(--button-secondary-border);
  --btn-primary-border-hover: var(--button-secondary-border-hover);
  --btn-primary-border-pressed: var(--button-secondary-border-pressed);
  --btn-secondary-bg: var(--button-ghost-bg);
  --btn-secondary-border: var(--button-ghost-dark-border);
  --btn-secondary-border-hover: var(--button-ghost-dark-border-hover);
  --btn-secondary-border-pressed: var(--button-ghost-dark-border-hover);
}
:root .light-surface {
  --text-body: var(--text-light-surface);
  --btn-primary-bg: var(--button-blue-bg);
  --btn-primary-bg-hover: var(--button-blue-bg-hover);
  --btn-primary-bg-pressed: var(--button-blue-bg-pressed);
  --btn-primary-text: var(--button-blue-text);
  --btn-primary-text-hover: var(--button-blue-text-hover);
  --btn-primary-text-pressed: var(--button-blue-text-pressed);
  --btn-primary-border: var(--button-blue-border);
  --btn-primary-border-hover: var(--button-blue-border-hover);
  --btn-primary-border-pressed: var(--button-blue-border-pressed);
  --btn-secondary-bg: var(--button-secondary-bg);
  --btn-secondary-bg-hover: var(--button-secondary-bg-hover);
  --btn-secondary-bg-pressed: var(--button-secondary-bg-pressed);
  --btn-secondary-text: var(--button-secondary-text);
  --btn-secondary-text-hover: var(--button-secondary-text-hover);
  --btn-secondary-text-pressed: var(--button-secondary-text-pressed);
  --btn-secondary-border: var(--button-secondary-border);
  --btn-secondary-border-hover: var(--button-secondary-border-hover);
  --btn-secondary-border-pressed: var(--button-secondary-border-pressed);
}
:root .tabs .btn.active {
  --btn-primary-bg: var(--button-secondary-bg);
  --btn-primary-bg-hover: var(--button-secondary-bg-hover);
  --btn-primary-bg-pressed: var(--button-secondary-bg-pressed);
  --btn-primary-text: var(--button-secondary-text);
  --btn-primary-text-hover: var(--button-secondary-text-hover);
  --btn-primary-text-pressed: var(--button-secondary-text-pressed);
  --btn-primary-border: var(--button-secondary-border);
  --btn-primary-border-hover: var(--button-secondary-border-hover);
  --btn-primary-border-pressed: var(--button-secondary-border-pressed);
}
:root .tabs-accordion {
  --bg-accordion-item-hover: var(--color-grey-10);
}
:root .grey-background {
  --bg-container: var(--color-grey-10);
  --bg-accordion-item-hover: var(--color-grey-20);
}
:root .blue-background {
  --bg-container: var(--color-blue-10);
  --bg-accordion-item-hover: var(--color-blue-20);
}
:root .purple-background {
  --bg-container: var(--bg-purple-primary);
}

.image-gallery {
  container-type: inline-size;
  container-name: image-gallery;
  width: 100%;
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
}
.image-gallery__title {
  font-family: var(--text-font-family-headings);
  color: var(--text-h1-h3);
  margin: 0 0 var(--space-8);
}
@container image-gallery (min-width: 1024px) {
  .image-gallery__title {
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
  }
}
.image-gallery__description {
  color: var(--text-body);
  margin: 0 0 var(--space-24);
}
@container image-gallery (min-width: 1024px) {
  .image-gallery__description {
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
  }
}
.image-gallery__frame {
  /*max-width: $content-narrow-alt-max-width;*/
  margin: 0 auto;
  border: var(--stroke-1) solid var(--outline-light);
  border-radius: var(--radius-card, var(--radius-8));
  padding: var(--space-24);
  box-sizing: border-box;
}
@container image-gallery (min-width: 1024px) {
  .image-gallery__frame {
    max-width: 1440px;
  }
}
.image-gallery__splide-wrapper {
  display: flex;
  gap: var(--space-24);
  align-items: flex-start;
}
.image-gallery__main {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
}
.image-gallery__main .splide__track {
  border-radius: var(--radius-card, var(--radius-8));
  overflow: hidden;
  height: 100%;
}
.image-gallery__main .splide__list {
  height: 100%;
}
.image-gallery__main .splide__slide {
  padding: var(--space-0);
}
@container image-gallery (min-width: 1024px) {
  .image-gallery__main .splide__slide {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
}
.image-gallery .splide__arrow {
  background: none;
  border: var(--stroke-1) solid var(--outline-light);
  width: var(--space-40);
  height: var(--space-40);
  opacity: 1;
  transition: background 0.2s ease, box-shadow 0.2s ease;
}
.image-gallery .splide__arrow svg {
  fill: var(--text-controls);
  width: var(--space-16);
  height: var(--space-16);
}
.image-gallery .splide__arrow:hover {
  background: none;
  border: none;
  /*box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);*/
}
.image-gallery .splide__arrow:active svg {
  fill: var(--controls-hover);
}
.image-gallery .splide__arrow:focus-visible {
  outline: var(--stroke-2) solid var(--blue-primary);
  outline-offset: var(--space-2);
}
.image-gallery .splide__arrow:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
@container image-gallery (max-width: 1023px) {
  .image-gallery .splide__arrow {
    width: var(--space-32);
    height: var(--space-32);
  }
}
@container image-gallery (min-width: 1024px) {
  .image-gallery .splide__arrow {
    display: none !important;
  }
}
.image-gallery__slide {
  position: relative;
  aspect-ratio: var(--ratio-square);
  background: var(--color-grey-80);
  border-radius: var(--radius-card, var(--radius-8));
  overflow: hidden;
}
@container image-gallery (min-width: 1024px) {
  .image-gallery__slide {
    aspect-ratio: var(--ratio-photo);
    flex: 0 0 auto;
    min-height: 0;
    height: auto;
  }
}
.image-gallery__slide img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: top;
     object-position: top;
  display: block;
}
.image-gallery__unselected-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--color-white);
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}
.splide__slide:not(.is-active) .image-gallery__unselected-overlay {
  opacity: 0.6;
}
.splide__slide:hover .image-gallery__unselected-overlay {
  opacity: 0;
}
.image-gallery__slide-caption {
  color: var(--text-media-caption);
  padding: var(--space-12) var(--space-4) 0;
  font-size: var(--text-caption-font-size);
}
@container image-gallery (max-width: 1023px) {
  .image-gallery__slide-caption {
    text-align: center;
    padding: var(--space-16) var(--space-8) var(--space-0) var(--space-8);
  }
}
@container image-gallery (min-width: 1024px) {
  .image-gallery__slide-caption--inline {
    display: none;
  }
}
.image-gallery__slide-caption--shared {
  display: none;
}
@container image-gallery (min-width: 1024px) {
  .image-gallery__slide-caption--shared {
    display: block;
  }
}
.image-gallery__slide-count {
  position: absolute;
  top: var(--space-12);
  right: var(--space-12);
  background: rgba(0, 0, 0, 0.6);
  color: var(--text-dark-surface);
  font-size: var(--text-font-size-x-small);
  font-weight: var(--text-font-weight-bold);
  padding: var(--space-4) var(--space-10);
  border-radius: var(--radius-4);
}
.image-gallery__thumbs {
  width: 160px;
  flex-shrink: 0;
  overflow-y: auto;
  scrollbar-width: thin;
}
@container image-gallery (min-width: 1024px) {
  .image-gallery__thumbs {
    overflow-x: hidden;
  }
}
.image-gallery__thumbs .splide__track {
  height: 100%;
}
.image-gallery__thumbs .splide__list {
  display: flex;
  flex-direction: column;
  overflow-y: scroll;
}
.image-gallery__thumbs .splide__list::-webkit-scrollbar {
  width: 18px;
  height: 18px;
}
.image-gallery__thumbs .splide__list::-webkit-scrollbar-corner {
  background: transparent;
}
.image-gallery__thumbs .splide__list::-webkit-scrollbar-thumb {
  border: var(--space-6) solid transparent;
  background-color: var(--outline-light);
  outline: none;
  border-radius: var(--radius-10);
  background-clip: padding-box;
}
.image-gallery__thumbs .splide__slide {
  margin-bottom: var(--space-16);
  padding: var(--space-0) var(--space-8);
}
.image-gallery__thumbs .splide__track--nav > .splide__list > .splide__slide {
  border: 0 !important;
}
.image-gallery .splide__arrow--prev {
  left: -2em !important;
  background: none;
  border: none;
}
.image-gallery .splide__arrow--next {
  right: -2em !important;
  background: none;
  border: none;
}
.image-gallery .splide__arrow svg {
  fill: var(--text-controls) !important;
  height: 3.2em !important;
  width: 1.2em !important;
}
.image-gallery__thumb {
  position: relative;
  border-radius: var(--radius-6);
  overflow: hidden;
  cursor: pointer;
  box-sizing: border-box;
  aspect-ratio: var(--ratio-square);
  width: 80px;
}
@container image-gallery (min-width: 1024px) {
  .image-gallery__thumb {
    width: 120px;
  }
}
.image-gallery__thumb img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
.image-gallery__thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: var(--space-3) solid transparent;
  box-sizing: border-box;
  pointer-events: none;
  transition: border-color 0.2s ease;
}
.image-gallery__thumb:focus-visible {
  outline: var(--stroke-2) solid var(--blue-primary);
  outline-offset: var(--space-2);
}
.image-gallery__thumb-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--color-white);
  opacity: 0.6;
  transition: opacity 0.2s ease;
  pointer-events: none;
}
.image-gallery__thumb:hover .image-gallery__thumb-overlay {
  opacity: 0;
}
.image-gallery .splide__slide.is-active .image-gallery__thumb::after {
  border-color: var(--violet-primary);
}
.image-gallery .splide__slide.is-active .image-gallery__thumb-overlay {
  opacity: 0;
}
.image-gallery--empty {
  border: var(--stroke-2) dashed var(--color-grey-30);
  padding: var(--space-24);
  background: var(--color-grey-10);
  border-radius: var(--radius-card, var(--radius-8));
  color: var(--text-body);
}
@container image-gallery (max-width: 1023px) {
  .image-gallery__frame {
    padding: 0px;
  }
  .image-gallery__splide-wrapper {
    flex-direction: column;
    padding-left: 0;
    gap: 0;
  }
  .image-gallery__main {
    height: auto !important;
    max-height: none !important;
    overflow-y: visible;
    max-width: 100%;
  }
  .image-gallery__main .splide__track,
  .image-gallery__main .splide__list {
    padding-left: 0;
    margin-left: 0;
    height: auto;
  }
  .image-gallery__main .splide__slide {
    height: auto !important;
  }
  .image-gallery__thumbs {
    width: 70%;
    margin: 0 auto;
    max-height: none !important;
    height: auto !important;
    overflow-y: visible;
    padding: var(--space-24) var(--space-0);
  }
  .image-gallery__thumbs .splide__track {
    padding-left: 0 !important;
    width: 100% !important;
    margin: 0 !important;
  }
  .image-gallery__thumbs .splide__list {
    flex-direction: row;
    padding-left: 0;
    margin-left: 0;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .image-gallery__thumbs .splide__list::-webkit-scrollbar {
    display: none;
  }
  .image-gallery__thumbs .splide__slide {
    margin-bottom: 0;
    flex: 0 0 80px;
  }
  .image-gallery__thumb {
    aspect-ratio: var(--ratio-square);
  }
  .image-gallery .splide__slide {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }
  .image-gallery__slide {
    height: auto;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
}
/*# sourceMappingURL=content/northwestern/dist/css/image-gallery.css.map */