:root {
  --bg-light: #ffffff;
  --bg-dark: #2E3192;
  --bg-light-tr: #2E3192;
  --bg-dark-tr: #2E3192;
  --text-clr-light: #ffffff;
  --text-clr-dark: #ffffff;
  --bg: var(--bg-light);
  --bg-tr: var(--bg-light-tr);
  --text-clr: var(--text-clr-light);
  --text-width: min(640px, calc(100% - 2 * 24px));
  --text-size-md: 21px;
  --text-height-md: 31px;
  --text-size-lg: 24px;
  --text-height-lg: 36px;

  --header-height: 56px;
  --scroll-stop: var(--header-height);
}

@media (max-width: 600px) {
  :root {
    --text-size-md: 19px;
    --text-height-md: 29px;
    --text-size-lg: 21px;
    --text-height-lg: 31px;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: var(--bg-dark);
    --bg-tr: var(--bg-dark-tr);
    --text-clr: var(--text-clr-dark);
  }
}

lfp-scrollmeter {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4px;

  .meter {
    width: 100%;
    height: 100%;
    background-color: var(--text-clr);
    scale: 0 1;
    transform-origin: left;
  }
}

lfp-gallery {
  box-sizing: border-box;
  display: block;
  position: relative;
  padding-block-end: 100dvh;
  margin-block-end: -100dvh;
  pointer-events: none;
  isolation: isolate;

  .image-container {
    position: sticky;
    top: var(--scroll-stop);
    width: 100%;
    height: calc(100dvh - var(--scroll-stop));
    background-color: black;

    .image {
      position: absolute;
      inset: 0;
      overflow: hidden;
      transition: filter 250ms ease-in-out;

      &:not(:nth-of-type(1)) {
        filter: opacity(0);
      }

      img {
        position: absolute;
        top: 50%;
        left: 50%;
        min-width: 100%;
        min-height: 100%;
        object-fit: cover;
        translate: -50% -50%;
      }
    }
  }

  .description {
    box-sizing: border-box;
    max-width: max(var(--text-width), 24px);
    margin: 0 auto calc(100dvh - var(--scroll-stop));
    transform: translateZ(1px);
    pointer-events: initial;
    z-index: 1;
    padding: 1.5em;
    background: #ffffff !important;
    color: #000000;
    border-radius: 12px; 
    backdrop-filter: blur(12px) saturate(150%);
    background: rgba(255, 255, 255, 0.15); 
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); 
    transition: transform 0.3s ease, box-shadow 0.3s ease; 
    text-align: center; /* Center align all content */
  }

  .Gall-heading {
    font-size: 2rem; /* Adjust the font size */
    font-weight: 700; /* Bold font weight */
    margin: 0 0 1em; /* Margin below the heading */
  }

  .icon-right {
    width: 40px; 
    height: 40px;
    margin: 1em auto; /* Center the icon and add margin */
    display: block; /* Ensure the icon is treated as a block element */
  }

  /* Responsive Padding */
  @media (min-width: 768px) {
    .description {
      padding: 2em;
    }
  }

  p {
    color: inherit;
    font-size: 1rem;
    line-height: 1.6;
    letter-spacing: 0.5px;
  }

  /* Style for non-title descriptions */
  &:not(.title) {
    background: var(--bg-tr);
    border: 1px solid rgba(255, 255, 255, 0.25); /* Light border for separation */
  }

  /* Hover Effect */


  /* Style for title sections */
  &.title {
    margin-block-start: -50dvh;
    color: var(--text-clr-dark);
    font-family: 'Segoe UI', Roboto, system-ui, sans-serif;
    font-size: 3rem; /* Increased font size for the title */
    font-weight: 900;
    letter-spacing: 1.5px; /* Increased letter spacing */
    line-height: 1.2;
    word-wrap: break-word;
    text-align: center; /* Center align text */
    transform: translate(0, -50%);
    text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.4); /* Subtle text shadow for better contrast */
    width: 100%; /* Ensure title takes full width */
    display: flex; /* Enable flexbox for centering */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
  }

  /* Smooth transition for title text */
  &.title:hover {
    color: var(--highlight-color); /* Dynamic color change on hover */
  }
}

.icon-right {
  width: 40px; /* Adjust icon size */
  height: 40px;
  margin-left: 10px;
}