/* -------------------------------- 

File#: _1_sliding-panels
Title: Sliding Panels
Descr: A group of sections that expand to reveal additional content, or hide to show the navigation
Usage: codyhouse.co/license

-------------------------------- */
/* reset */
*, *::after, *::before {
    box-sizing: border-box;
  }
  
  * {
    font: inherit;
    margin: 0;
    padding: 0;
    border: 0;
  }
  
  body {
    background-color: hsl(0, 0%, 100%);
    font-family: system-ui, sans-serif;
    color: hsl(230, 7%, 23%);
    font-size: 1rem;
  }
  
  h1, h2, h3, h4 {
    line-height: 1.2;
    color: hsl(230, 13%, 9%);
    font-weight: 700;
  }
  
  h1 {
    font-size: 2.0736rem;
  }
  
  h2 {
    font-size: 1.728rem;
  }
  
  h3 {
    font-size: 1.25rem;
  }
  
  h4 {
    font-size: 1.2rem;
  }
  
  ol, ul, menu {
    list-style: none;
  }
  
  button, input, textarea, select {
    background-color: transparent;
    border-radius: 0;
    color: inherit;
    line-height: inherit;
    appearance: none;
  }
  
  textarea {
    resize: vertical;
    overflow: auto;
    vertical-align: top;
  }
  
  a {
    color: hsl(250, 84%, 54%);
  }
  
  table {
    border-collapse: collapse;
    border-spacing: 0;
  }
  
  img, video, svg {
    display: block;
    max-width: 100%;
  }
  
  @media (min-width: 64rem) {
    body {
      font-size: 1.25rem;
    }
  
    h1 {
      font-size: 3.051rem;
    }
  
      h2 {
      font-size: 2.44rem;
    }
  
      h3 {
      font-size: 1.75rem;
    }
  
      h4 {
      font-size: 1.5625rem;
    }
  }
  
  /* variables */
  :root {
    /* colors */
    --sn3-color-primary-hsl: 250, 84%, 54%;
    --sn3-color-bg-hsl: 0, 0%, 100%;
    --sn3-color-contrast-high-hsl: 230, 7%, 23%;
    --sn3-color-contrast-higher-hsl: 230, 13%, 9%;
    --sn3-color-contrast-medium-hsl: 225, 4%, 47%;
    --sn3-color-black-hsl: 230, 13%, 9%;
    --sn3-color-white-hsl: 0, 0%, 100%;
    --sn3-color-accent-hsl: 342, 89%, 48%;
    --sn3-color-contrast-lower-hsl: 240, 4%, 85%;
  
    /* spacing */
    --sn3-space-4xs: 0.125rem;
    --sn3-space-xs: 0.5rem;
    --sn3-space-sm: 0.75rem;
    --sn3-space-md: 1.25rem;
    --sn3-space-lg: 2rem;
    --sn3-space-xl: 3.25rem;
    --sn3-space-3xl: 8.5rem;
  
    /* typography */
    --sn3-text-3xl: 2.488rem;
    --sn3-text-2xl: 2.0736rem;
    --sn3-text-sm: 0.833rem;
    --sn3-text-sm: 0.833rem;
  }
  
  @media(min-width: 64rem){
    :root {
      /* spacing */
      --sn3-space-4xs: 0.1875rem;
      --sn3-space-xs: 0.75rem;
      --sn3-space-sm: 1.125rem;
      --sn3-space-md: 2rem;
      --sn3-space-lg: 3.125rem;
      --sn3-space-xl: 5.125rem;
      --sn3-space-3xl: 13.25rem;
  
      /* typography */
      --sn3-text-3xl: 3.815rem;
      --sn3-text-2xl: 3.051rem;
      --sn3-text-sm: 1rem;
      --sn3-text-sm: 1rem;
    }
  }
  
  /* icons */
  .sn3-icon {
    height: var(--sn3-size, 1em);
    width: var(--sn3-size, 1em);
    display: inline-block;
    color: inherit;
    fill: currentColor;
    line-height: 1;
    flex-shrink: 0;
    max-width: initial;
  }
  
  .sn3-icon--sm {
    --sn3-size: 24px;
  }
  
  /* component */
  .s-panels__nav-control {
    position: fixed;
    z-index: 10;
    top: var(--sn3-space-md);
    right: var(--sn3-space-md);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid hsla(var(--sn3-color-white-hsl), 0.1);
    background-color: hsla(var(--sn3-color-black-hsl), 0.95);
    display: flex;
    justify-content: center;
    align-items: center;
    color: hsl(var(--sn3-color-white-hsl));
    transition: -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  }
  .s-panels__nav-control:active {
    -webkit-transform: translateY(2px);
            transform: translateY(2px);
  }
  .s-panels__nav-control .icon__group * {
    transition: stroke-dashoffset 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), stroke-dashoffset 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), stroke-dashoffset 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    stroke-dasharray: 24;
  }
  .s-panels__nav-control .icon__group *:nth-child(1) {
    -webkit-transform-origin: 2px 6px;
            transform-origin: 2px 6px;
  }
  .s-panels__nav-control .icon__group *:nth-child(2) {
    -webkit-transform-origin: 2px 12px;
            transform-origin: 2px 12px;
  }
  .s-panels__nav-control .icon__group *:nth-child(3) {
    -webkit-transform-origin: 2px 18px;
            transform-origin: 2px 18px;
  }
  @media (orientation: portrait) {
    .s-panels__nav-control.s-panels__nav-control--arrow-down {
      -webkit-transform: rotate(-180deg);
              transform: rotate(-180deg);
    }
    .s-panels__nav-control.s-panels__nav-control--arrow-down:active {
      -webkit-transform: translateY(2px) rotate(-180deg);
              transform: translateY(2px) rotate(-180deg);
    }
  }
  @media (orientation: landscape) {
    .s-panels__nav-control.s-panels__nav-control--arrow-down {
      -webkit-transform: rotate(-90deg);
              transform: rotate(-90deg);
    }
    .s-panels__nav-control.s-panels__nav-control--arrow-down:active {
      -webkit-transform: translateY(2px) rotate(-90deg);
              transform: translateY(2px) rotate(-90deg);
    }
  }
  .s-panels__nav-control.s-panels__nav-control--arrow-down .icon__group *:nth-child(1),
  .s-panels__nav-control.s-panels__nav-control--arrow-down .icon__group *:nth-child(3) {
    stroke-dashoffset: 14;
  }
  .s-panels__nav-control.s-panels__nav-control--arrow-down .icon__group *:nth-child(1) {
    -webkit-transform: translateY(6px) rotate(-45deg);
            transform: translateY(6px) rotate(-45deg);
  }
  .s-panels__nav-control.s-panels__nav-control--arrow-down .icon__group *:nth-child(3) {
    -webkit-transform: translateY(-6px) rotate(45deg);
            transform: translateY(-6px) rotate(45deg);
  }
  .s-panels__nav-control.s-panels__nav-control--close:active {
    -webkit-transform: translateY(2px);
            transform: translateY(2px);
  }
  .s-panels__nav-control.s-panels__nav-control--close .icon__group *:nth-child(1) {
    -webkit-transform: translateX(2.93px) translateY(-1.07px) rotate(45deg);
            transform: translateX(2.93px) translateY(-1.07px) rotate(45deg);
  }
  .s-panels__nav-control.s-panels__nav-control--close .icon__group *:nth-child(2) {
    stroke-dashoffset: 24;
  }
  .s-panels__nav-control.s-panels__nav-control--close .icon__group *:nth-child(3) {
    -webkit-transform: translateX(2.93px) translateY(1.07px) rotate(-45deg);
            transform: translateX(2.93px) translateY(1.07px) rotate(-45deg);
  }
  
  .s-panels__projects-list {
    position: relative;
    z-index: 2;
    height: 100vh;
    overflow: hidden;
    pointer-events: none;
  }
  
  .s-panels__project-preview {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    transition: -webkit-transform 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: transform 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: transform 0.4s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
  }
  
  @media (orientation: landscape) {
    .s-panels__project-preview:nth-child(2) .s-panels__project-figure {
      -webkit-transform: translateX(25%) scaleX(0.25);
              transform: translateX(25%) scaleX(0.25);
    }
    .s-panels__project-preview:nth-child(2) .s-panels__project-intro {
      -webkit-transform: translateX(100%);
              transform: translateX(100%);
    }
  
    .s-panels__project-preview:nth-child(3) .s-panels__project-figure {
      -webkit-transform: translateX(50%) scaleX(0.25);
              transform: translateX(50%) scaleX(0.25);
    }
    .s-panels__project-preview:nth-child(3) .s-panels__project-intro {
      -webkit-transform: translateX(200%);
              transform: translateX(200%);
    }
  
    .s-panels__project-preview:nth-child(4) .s-panels__project-figure {
      -webkit-transform: translateX(75%) scaleX(0.25);
              transform: translateX(75%) scaleX(0.25);
    }
    .s-panels__project-preview:nth-child(4) .s-panels__project-intro {
      -webkit-transform: translateX(300%);
              transform: translateX(300%);
    }
  
    .s-panels__project-preview--hide {
      -webkit-transform: translateY(-100%);
              transform: translateY(-100%);
    }
  }
  @media (orientation: portrait) {
    .s-panels__project-preview:nth-child(2) .s-panels__project-figure {
      -webkit-transform: translateY(25%) scaleY(0.25);
              transform: translateY(25%) scaleY(0.25);
    }
    .s-panels__project-preview:nth-child(2) .s-panels__project-intro {
      -webkit-transform: translateY(100%);
              transform: translateY(100%);
    }
  
    .s-panels__project-preview:nth-child(3) .s-panels__project-figure {
      -webkit-transform: translateY(50%) scaleY(0.25);
              transform: translateY(50%) scaleY(0.25);
    }
    .s-panels__project-preview:nth-child(3) .s-panels__project-intro {
      -webkit-transform: translateY(200%);
              transform: translateY(200%);
    }
  
    .s-panels__project-preview:nth-child(4) .s-panels__project-figure {
      -webkit-transform: translateY(75%) scaleY(0.25);
              transform: translateY(75%) scaleY(0.25);
    }
    .s-panels__project-preview:nth-child(4) .s-panels__project-intro {
      -webkit-transform: translateY(300%);
              transform: translateY(300%);
    }
  
    .s-panels__project-preview--hide {
      -webkit-transform: translateX(-100%);
              transform: translateX(-100%);
    }
  }
  .s-panels__project-preview--selected {
    z-index: 1;
    pointer-events: auto;
  }
  .s-panels__project-preview--selected .s-panels__project-figure {
    overflow: visible;
  }
  .s-panels__project-preview--selected .s-panels__project-img {
    opacity: 0.9 !important;
    -webkit-filter: none !important;
            filter: none !important;
  }
  .s-panels__project-preview--selected .s-panels__project-intro {
    opacity: 0;
  }
  .s-panels__project-preview--selected .s-panels__project-control {
    pointer-events: none;
  }
  .s-panels__project-preview--selected .s-panels__text-component::before,
  .s-panels__project-preview--selected .s-panels__text-component::after {
    display: none;
  }
  .s-panels__project-preview--selected .s-panels__project-title-wrapper {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.4s 0.2s;
  }
  .s-panels__project-preview--selected .s-panels__project-title {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    transition-delay: 0.2s;
  }
  
  @media (orientation: landscape) {
    .s-panels__project-preview--selected .s-panels__project-figure {
      -webkit-transform: translateX(calc(50% - 50%/4)) scaleX(0.25) !important;
              transform: translateX(calc(50% - 50%/4)) scaleX(0.25) !important;
    }
  }
  @media (orientation: portrait) {
    .s-panels__project-preview--selected .s-panels__project-figure {
      -webkit-transform: translateY(calc(50% - 50%/4)) scaleY(0.25) !important;
              transform: translateY(calc(50% - 50%/4)) scaleY(0.25) !important;
    }
  }
  .s-panels__project-preview--no-transition {
    transition: none !important;
  }
  .s-panels__project-preview--no-transition > * {
    transition: none !important;
  }
  
  .s-panels__project-figure,
  .s-panels__project-img,
  .s-panels__project-intro,
  .s-panels__project-control {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  
  .s-panels__project-figure {
    overflow: hidden;
    transition: -webkit-transform 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: transform 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: transform 0.4s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
  }
  
  @media (orientation: landscape) {
    .s-panels__project-figure {
      -webkit-transform-origin: left center;
              transform-origin: left center;
      -webkit-transform: scaleX(0.25);
              transform: scaleX(0.25);
    }
  }
  @media (orientation: portrait) {
    .s-panels__project-figure {
      -webkit-transform-origin: center top;
              transform-origin: center top;
      -webkit-transform: scaleY(0.25);
              transform: scaleY(0.25);
    }
  }
  .s-panels__project-img {
    display: block;
    -o-object-fit: cover;
       object-fit: cover;
    opacity: 0.25;
    -webkit-filter: grayscale(100%);
            filter: grayscale(100%);
    transition: opacity 0.4s, -webkit-filter 0.4s, -webkit-transform 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: opacity 0.4s, filter 0.4s, transform 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: opacity 0.4s, filter 0.4s, transform 0.4s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-filter 0.4s, -webkit-transform 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
  }
  @media (min-width: 64rem) {
    .s-panels__project-img {
      opacity: 0.15;
    }
  }
  
  .s-panels__project-intro {
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: auto;
    transition: opacity 0.3s;
  }
  .s-panels__project-intro:hover + .s-panels__project-figure .s-panels__project-img, .s-panels__project-intro:focus-within + .s-panels__project-figure .s-panels__project-img {
    opacity: 0.5;
    -webkit-filter: grayscale(50%);
            filter: grayscale(50%);
  }
  .s-panels__project-intro:hover .s-panels__text-component::before, .s-panels__project-intro:focus-within .s-panels__text-component::before {
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
  }
  .s-panels__project-intro:hover .s-panels__text-component::after, .s-panels__project-intro:focus-within .s-panels__text-component::after {
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
  }
  
  @media (orientation: landscape) {
    .s-panels__project-img {
      -webkit-transform: scaleX(4);
              transform: scaleX(4);
    }
  
    .s-panels__project-intro {
      width: 25%;
    }
  }
  @media (orientation: portrait) {
    .s-panels__project-img {
      -webkit-transform: scaleY(4);
              transform: scaleY(4);
    }
  
    .s-panels__project-intro {
      height: 25%;
    }
  }
  .s-panels__text-component {
    --icon-size: 20px;
    --icon-stroke-width: 1px;
    --icon-margin-top: 12px;
    position: relative;
  }
  .s-panels__text-component::before, .s-panels__text-component::after {
    content: "";
    position: absolute;
    background-color: hsl(var(--sn3-color-white-hsl));
    transition: -webkit-transform 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: transform 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: transform 0.2s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  }
  .s-panels__text-component::before {
    width: var(--icon-stroke-width);
    height: var(--icon-size);
    bottom: calc(-1 * var(--icon-size) - var(--icon-margin-top));
    left: calc(50% - var(--icon-stroke-width) / 2);
    -webkit-transform: scaleY(0);
            transform: scaleY(0);
  }
  .s-panels__text-component::after {
    width: var(--icon-size);
    height: var(--icon-stroke-width);
    bottom: calc(-0.5 * (var(--icon-size) + var(--icon-stroke-width)) - var(--icon-margin-top));
    left: calc(50% - var(--icon-size) / 2);
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
  }
  @media (min-width: 64rem) {
    .s-panels__text-component {
      --icon-size: 24px;
      --icon-margin-top: 16px;
    }
  }
  
  .s-panels__project-control {
    color: transparent;
  }
  .s-panels__project-control:focus {
    outline: none;
  }
  
  .s-panels__project-title-wrapper {
    position: absolute;
    bottom: 0;
    width: 100%;
    left: 0;
    background: linear-gradient(hsla(var(--sn3-color-black-hsl), 0), hsla(var(--sn3-color-black-hsl), 0.7));
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s, visibility 0s 0.4s;
  }
  
  .s-panels__project-title {
    -webkit-transform: translateY(50px);
            transform: translateY(50px);
    transition: -webkit-transform 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
    transition: transform 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
    transition: transform 0.4s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  
  .s-panels__nav-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
  }
  
  .s-panels__nav-link {
    color: hsl(var(--sn3-color-bg-hsl));
    text-decoration: none;
    position: relative;
    display: inline-block;
    padding: var(--sn3-space-4xs) 0;
    line-height: 1;
  }
  .s-panels__nav-link::before, .s-panels__nav-link::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    height: 1px;
    width: 100%;
    background-color: currentColor;
  }
  .s-panels__nav-link::before {
    opacity: 0.15;
  }
  .s-panels__nav-link::after {
    -webkit-transform-origin: right center;
            transform-origin: right center;
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
    transition: -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  }
  .s-panels__nav-link:hover::after {
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
    -webkit-transform-origin: left center;
            transform-origin: left center;
  }
  
  .s-panels__social-link {
    color: hsl(var(--sn3-color-bg-hsl));
    text-decoration: none;
    opacity: 1;
    transition: 0.2s;
  }
  .s-panels__social-link:hover {
    opacity: 0.65;
  }
  
  .s-panels__project-content {
    position: relative;
    z-index: 2;
  }
  
  .s-panels__overlay-layer {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    opacity: 0;
    z-index: 2;
    visibility: hidden;
    transition: 0.5s;
  }
  
  .s-panels__overlay-layer--visible {
    opacity: 1;
    visibility: visible;
    z-index: 3;
  }
  
  /* utility classes */
  .sn3-bg-black {
    --sn3-bg-o: 1;
    background-color: hsla(var(--sn3-color-black-hsl), var(--sn3-bg-o, 1));
  }
  
  .sn3-color-contrast-medium {
    --sn3-color-o: 1;
    color: hsla(var(--sn3-color-contrast-medium-hsl), var(--sn3-color-o, 1));
  }
  
  .sn3-max-width-sm {
    max-width: 48rem;
  }
  
  .sn3-container {
    width: calc(100% - 2*var(--sn3-space-md));
    margin-left: auto;
    margin-right: auto;
  }
  
  .sn3-text-component :where(h1, h2, h3, h4) {
    line-height: var(--sn3-heading-line-height, 1.2);
    margin-top: calc(var(--sn3-space-md) * var(--sn3-space-multiplier, 1));
    margin-bottom: calc(var(--sn3-space-sm) * var(--sn3-space-multiplier, 1));
  }
  
  .sn3-text-component :where(p, blockquote, ul li, ol li) {
    line-height: var(--sn3-body-line-height, 1.4);
  }
  
  .sn3-text-component :where(ul, ol, p, blockquote, .sn3-text-component__block) {
    margin-bottom: calc(var(--sn3-space-sm) * var(--sn3-space-multiplier, 1));
  }
  
  .sn3-text-component :where(ul, ol) {
    padding-left: 1.25em;
  }
  
  .sn3-text-component ul :where(ul, ol), .sn3-text-component ol :where(ul, ol) {
    padding-left: 1em;
    margin-bottom: 0;
  }
  
  .sn3-text-component ul {
    list-style-type: disc;
  }
  
  .sn3-text-component ol {
    list-style-type: decimal;
  }
  
  .sn3-text-component img {
    display: block;
    margin: 0 auto;
  }
  
  .sn3-text-component figcaption {
    margin-top: calc(var(--sn3-space-xs) * var(--sn3-space-multiplier, 1));
    font-size: var(--sn3-text-sm);
    text-align: center;}
  
  .sn3-text-component em {
    font-style: italic;
  }
  
  .sn3-text-component strong {
    font-weight: bold;
  }
  
  .sn3-text-component s {
    text-decoration: line-through;
  }
  
  .sn3-text-component u {
    text-decoration: underline;
  }
  
  .sn3-text-component mark {
    background-color: hsla(var(--sn3-color-accent-hsl), 0.2);
    color: inherit;
  }
  
  .sn3-text-component blockquote {
    padding-left: 1em;
    border-left: 4px solid hsl(var(--sn3-color-contrast-lower-hsl));
    font-style: italic;
  }
  
  .sn3-text-component hr {
    margin: calc(var(--sn3-space-md) * var(--sn3-space-multiplier, 1)) auto;
    background: hsl(var(--sn3-color-contrast-lower-hsl));
    height: 1px;
  }
  
  .sn3-text-component > *:first-child {
    margin-top: 0;
  }
  
  .sn3-text-component > *:last-child {
    margin-bottom: 0;
  }
  
  .sn3-text-component.sn3-line-height-xs {
    --sn3-heading-line-height: 1;
    --sn3-body-line-height: 1.1;
  }
  
  .sn3-text-component.sn3-line-height-sm {
    --sn3-heading-line-height: 1.1;
    --sn3-body-line-height: 1.2;
  }
  
  .sn3-text-component.sn3-line-height-md {
    --sn3-heading-line-height: 1.15;
    --sn3-body-line-height: 1.4;
  }
  
  .sn3-text-component.sn3-line-height-lg {
    --sn3-heading-line-height: 1.22;
    --sn3-body-line-height: 1.58;
  }
  
  .sn3-text-component.sn3-line-height-xl {
    --sn3-heading-line-height: 1.3;
    --sn3-body-line-height: 1.72;
  }
  
  .sn3-article {
    margin-bottom: 2em;
    --sn3-heading-line-height: 1.22;
    --sn3-body-line-height: 1.66;
    --sn3-space-multiplier: 1.2;
  }
  
  .sn3-hide {
    display: none !important;
  }
  
  .sn3-padding-y-lg {
    padding-top: var(--sn3-space-lg);
    padding-bottom: var(--sn3-space-lg);
  }
  
  .sn3-bg {
    --sn3-bg-o: 1;
    background-color: hsla(var(--sn3-color-bg-hsl), var(--sn3-bg-o, 1));
  }
  
  .sn3-gap-xs {
    gap: var(--sn3-space-xs);
  }
  
  .sn3-flex-column {
    flex-direction: column;
  }
  
  .sn3-flex {
    display: flex;
  }
  
  .sn3-margin-top-auto {
    margin-top: auto;
  }
  
  .sn3-text-2xl {
    font-size: var(--sn3-text-2xl);
  }
  
  .sn3-gap-sm {
    gap: var(--sn3-space-sm);
  }
  
  .sn3-margin-bottom-md {
    margin-bottom: var(--sn3-space-md);
  }
  
  .sn3-height-100\% {
    height: 100%;
  }
  
  .sn3-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
  }
  
  .sn3-grid > * {
    min-width: 0;
    grid-column-end: span 12;
  }
  
  .sn3-padding-bottom-md {
    padding-bottom: var(--sn3-space-md);
  }
  
  .sn3-padding-top-3xl {
    padding-top: var(--sn3-space-3xl);
  }
  
  .sn3-font-smooth {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  
  .sn3-bg-contrast-higher {
    --sn3-bg-o: 1;
    background-color: hsla(var(--sn3-color-contrast-higher-hsl), var(--sn3-bg-o, 1));
  }
  
  .sn3-text-shadow-md {
    text-shadow: 0 1px 2px rgba(#000, 0.1), 0 2px 4px rgba(#000, 0.2);
  }
  
  .sn3-color-white {
    --sn3-color-o: 1;
    color: hsla(var(--sn3-color-white-hsl), var(--sn3-color-o, 1));
  }
  
  .sn3-text-3xl {
    font-size: var(--sn3-text-3xl);
  }
  
  .sn3-text-center {
    text-align: center;
  }
  
  .sn3-max-width-md {
    max-width: 64rem;
  }
  
  .sn3-padding-top-xl {
    padding-top: var(--sn3-space-xl);
  }
  
  .sn3-padding-bottom-lg {
    padding-bottom: var(--sn3-space-lg);
  }
  
  .sn3-opacity-60\% {
    opacity: 0.6;
  }
  
  .sn3-color-inherit {
    color: inherit;
  }
  
  .sn3-text-shadow-lg {
    text-shadow: 0 1px 4px rgba(#000, 0.1), 0 2px 8px rgba(#000, 0.15), 0 4px 16px rgba(#000, 0.2);
  }
  
  .sn3-padding-x-md {
    padding-left: var(--sn3-space-md);
    padding-right: var(--sn3-space-md);
  }
  
  .sn3-bg-opacity-0 {
    --sn3-bg-o: 0;
  }
  
  @media(min-width: 48rem){
    .sn3-text-sm\@sm {
      font-size: var(--sn3-text-sm);
    }
  
    .sn3-justify-end\@sm {
      justify-content: flex-end;
    }
  
    .sn3-flex-row\@sm {
      flex-direction: row;
    }
  
    .sn3-text-3xl\@sm {
      font-size: var(--sn3-text-3xl);
    }
  
    .sn3-margin-top-auto\@sm {
      margin-top: auto;
    }
  
    .sn3-flex\@sm {
      display: flex;
    }
  
    .sn3-margin-bottom-0\@sm {
      margin-bottom: 0;
    }
  
    .sn3-padding-y-md\@sm {
      padding-top: var(--sn3-space-md);
      padding-bottom: var(--sn3-space-md);
    }
  
    .sn3-col-6\@sm {
      grid-column-end: span 6;
    }
  }
  

  .s-panels__nav-control--close {
    display: flex; /* Ensures content is centered */
    justify-content: center;
    align-items: center;
    position: fixed; /* Stays in place even on scroll */
    top: 20px; /* Adjust based on your layout */
    right: 20px; /* Adjust based on your layout */
    z-index: 101; /* Higher than project carousels */
    cursor: pointer;
    /* Add more styles if needed */
  }
  
  /* Optional: Adjust for when a project carousel is open */
  .s-panels__project-preview--selected + .s-panels__nav-control--close {
    display: block; /* Show the button */
  }