@charset "utf-8";

@layer reset, base, vendor, layout, components, utilities;

@import 'https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900';

/* FONT */

/* CSS VARIABLES */

@custom-media --breakpoint-sm-only (width < 40rem);

@custom-media --breakpoint-sm (width >= 40rem);

@custom-media --breakpoint-md (width >= 48rem);

@custom-media --breakpoint-lg (width >= 64rem);

@custom-media --breakpoint-xl (width >= 80rem);

:root {
    /* BREAKPOINTS */
    --p-breakpoints-sm: 40rem; /* 640px */
    --p-breakpoints-md: 48rem; /* 768px */
    --p-breakpoints-lg: 64rem; /* 1024px */
    --p-breakpoints-xl: 80rem; /* 1280px */
}

/*
    ================
    COLOR FOUNDATION
    ================

    SEMANTIC: --p-[class]-color-[purpose]

    CLASS:
        ref: The ref class is used to reference a color token.
        sys: The sys class is used to reference a system color token.
*/

:root {
    --p-color-scheme: light;

    /*
    ##############
    COLORS PALETTE
    ##############
    */
    --p-ref-palette-white: hsl(0 0% 100%);
    --p-ref-palette-black: hsl(0 0% 0%);
    --p-ref-palette-neutral: hsl(264 8% 12%);
    --p-ref-palette-regent-st-blue: hsl(210 92% 19%);
    --p-ref-palette-green-vogue: hsl(208 34% 52%);
    --p-ref-palette-wedgewood: hsl(194 55% 72%);
    --p-ref-palette-tan-hide: hsl(24 100% 67%);
    --p-ref-palette-flesh: hsl(25 100% 83%);
    --p-ref-palette-buttermilk: hsl(51 100% 86%);
    --p-ref-palette-peach: hsl(39 100% 85%);
    --p-ref-palette-water: hsl(211 100% 94%);

    /*
    #############
    COLORS SCHEME
    #############

        primary: For important actions and elements needing the most emphasis, like a FAB to start a new message.
        secondary: For elements that don’t need immediate attention and don’t need emphasis, like the selected state of a navigation icon or a dismissive button.
        tertiary: For smaller elements that need special emphasis but don't require immediate attention, such as a badge or notification.
        surface: A role used for backgrounds and large, low-emphasis areas of the screen.
        container: Roles used as a fill color for foreground elements like buttons. They should not be used for text or icons.
        on: Roles starting with this term indicate a color for text or icons on top of its paired parent color. For example, on primary is used for text and icons against the primary fill color.
        variant: Roles ending with this term offer a lower emphasis alternative to its non-variant pair.
        inverse: Roles starting with this term are applied selectively to components to achieve colors that are the reverse of those in the surrounding UI, creating a contrasting effect.
    */
    --p-sys-color-background: var(--p-ref-palette-white);
    --p-sys-color-on-background: var(--p-ref-palette-black);
    --p-sys-color-error: inherit;
    --p-sys-color-on-error: inherit;
    --p-sys-color-error-container: inherit;
    --p-sys-color-on-error-container: inherit;
    --p-sys-color-inverse-primary: var(--p-ref-palette-white);
    --p-sys-color-inverse-surface: var(--p-ref-palette-black);
    --p-sys-color-on-inverse-surface: var(--p-ref-palette-white);
    --p-sys-color-primary: var(--p-ref-palette-regent-st-blue);
    --p-sys-color-on-primary: var(--p-ref-palette-white);
    --p-sys-color-primary-container: var(--p-ref-palette-regent-st-blue);
    --p-sys-color-on-primary-container: var(--p-ref-palette-white);
    --p-sys-color-secondary: var(--p-ref-palette-green-vogue);
    --p-sys-color-on-secondary: var(--p-ref-palette-white);
    --p-sys-color-secondary-container: var(--p-ref-palette-green-vogue);
    --p-sys-color-on-secondary-container: var(--p-ref-palette-white);
    --p-sys-color-tertiary: inherit;
    --p-sys-color-on-tertiary: inherit;
    --p-sys-color-tertiary-container: inherit;
    --p-sys-color-on-tertiary-container: inherit;
    --p-sys-color-emphasis: var(--p-ref-palette-tan-hide);
    --p-sys-color-on-emphasis: var(--p-ref-palette-black);
    --p-sys-color-emphasis-container: var(--p-ref-palette-tan-hide);
    --p-sys-color-emphasis-container-variant: var(--p-ref-palette-flesh);
    --p-sys-color-on-emphasis-container: var(--p-ref-palette-black);
    --p-sys-color-surface: var(--p-ref-palette-regent-st-blue);
    --p-sys-color-on-surface: var(--p-ref-palette-water);
    --p-sys-color-on-surface-variant: var(--p-ref-palette-neutral);
    --p-sys-color-surface-dim: var(--p-ref-palette-green-vogue);
    --p-sys-color-surface-bright: var(--p-ref-palette-water);
    --p-sys-color-surface-container-lowest: var(--p-ref-palette-water);
    --p-sys-color-surface-container-low: var(--p-ref-palette-green-vogue);
    --p-sys-color-surface-container: var(--p-ref-palette-regent-st-blue);
    --p-sys-color-surface-container-high: inherit;
    --p-sys-color-surface-container-highest: var(--p-ref-palette-tan-hide);
    --p-sys-color-outline: var(--p-ref-palette-regent-st-blue);
    --p-sys-color-outline-variant: var(--p-ref-palette-green-vogue);
    --p-sys-color-scrim: inherit;
    --p-sys-color-shadow: hsl(from var(--p-ref-palette-black) h s l / 0.37);
}

/* SPACE */

:root {
    --p-ref-spacing: 0.25rem;
    --p-sys-space-none: 0px;
    --p-space-025: calc(var(--p-ref-spacing) * 0.25);
    --p-space-050: calc(var(--p-ref-spacing) * 0.5);
    --p-space-100: calc(var(--p-ref-spacing) * 1);
    --p-space-150: calc(var(--p-ref-spacing) * 1.5);
    --p-space-200: calc(var(--p-ref-spacing) * 2);
    --p-space-300: calc(var(--p-ref-spacing) * 3);
    --p-space-400: calc(var(--p-ref-spacing) * 4);
    --p-space-500: calc(var(--p-ref-spacing) * 5);
    --p-space-600: calc(var(--p-ref-spacing) * 6);
    --p-space-700: calc(var(--p-ref-spacing) * 7);
    --p-space-800: calc(var(--p-ref-spacing) * 8);
    --p-space-900: calc(var(--p-ref-spacing) * 9);
    --p-space-1000: calc(var(--p-ref-spacing) * 10);
    --p-space-1200: calc(var(--p-ref-spacing) * 12);
    --p-space-1600: calc(var(--p-ref-spacing) * 16);
    --p-space-2000: calc(var(--p-ref-spacing) * 20);
}

:root {
    /* FONT */

    /* FONT FAMILY */
    --p-ref-typeface-plain: 'Lato';
    --p-ref-typeface-plain-fallback:
        -apple-system, blinkmacsystemfont, 'Avenir Next', avenir,
        'Helvetica Neue', helvetica, ubuntu, roboto, noto, 'Segoe UI', arial,
        sans-serif;

    /* FONT WEIGHT */
    --p-ref-typeface-weight-thin: 100;
    --p-ref-typeface-weight-light: 300;
    --p-ref-typeface-weight-regular: 400;
    --p-ref-typeface-weight-medium: 500;
    --p-ref-typeface-weight-semibold: 600;
    --p-ref-typeface-weight-bold: 700;
    --p-ref-typeface-weight-extrabold: 800;
    --p-ref-typeface-weight-black: 900;

    /* FONT SIZES */
    --p-ref-typeface-size-275: 0.6875rem; /* 11px */
    --p-ref-typeface-size-300: 0.75rem; /* 12px */
    --p-ref-typeface-size-325: 0.8125rem; /* 13px */
    --p-ref-typeface-size-350: 0.875rem; /* 14px */
    --p-ref-typeface-size-400: 1rem; /* 16px */
    --p-ref-typeface-size-450: 1.125rem; /* 18px */
    --p-ref-typeface-size-500: 1.25rem; /* 20px */
    --p-ref-typeface-size-550: 1.375rem; /* 22px */
    --p-ref-typeface-size-600: 1.5rem; /* 24px */
    --p-ref-typeface-size-700: 1.75rem; /* 28px */
    --p-ref-typeface-size-750: 1.875rem; /* 30px */
    --p-ref-typeface-size-800: 2rem; /* 32px */
    --p-ref-typeface-size-900: 2.25rem; /* 36px */
    --p-ref-typeface-size-1000: 2.5rem; /* 40px */
    --p-ref-typeface-size-1100: 2.25rem; /* 44px */
    --p-ref-typeface-size-1200: 3rem; /* 48px */
    --p-ref-typeface-size-1400: 3.5rem; /* 56px */
    --p-ref-typeface-size-1600: 4rem; /* 64px */

    /* FONT TRACKING */
    --p-ref-typeface-tracking-tight: -0.025rem;
    --p-ref-typeface-tracking-normal: 0rem;
    --p-ref-typeface-tracking-wide: 0.025rem;

    /* FONT LEADING */
    --p-ref-typeface-leading-tight: 1.15;
    --p-ref-typeface-leading-normal: 1.2;
    --p-ref-typeface-leading-loose: 1.25;

    /*
    ############
    FONT STYLES
    ############
        display:  As the largest text on the screen, display styles are reserved for short, important text or numerals.
        headline:  Headlines are used for titles, section headings, and other important text.
        title:     Titles are used for the main heading of a page or section.
        label:     Labels are used for short, important text or numerals.
        body:      Body text is used for the main content of a page or section.
    */
    --p-sys-typeface-display-large: var(--p-ref-typeface-weight-regular)
        var(--p-ref-typeface-size-1400) / var(--p-ref-typeface-size-1600);
    --p-sys-typeface-display-medium: inherit;
    --p-sys-typeface-display-small: inherit;
    --p-sys-typeface-headline-large: inherit;
    --p-sys-typeface-headline-medium: inherit;
    --p-sys-typeface-headline-small: inherit;
    --p-sys-typeface-title-large: inherit;
    --p-sys-typeface-title-medium: inherit;
    --p-sys-typeface-title-small: inherit;
    --p-sys-typeface-label-large: inherit;
    --p-sys-typeface-label-medium: inherit;
    --p-sys-typeface-label-small: inherit;
    --p-sys-typeface-body-large: inherit;
    --p-sys-typeface-body-medium: inherit;
    --p-sys-typeface-body-small: inherit;

    /* FONT ClAMP */
    /* 14px -> 16px */
    --p-font-size-text: clamp(0.875rem, 0.6667rem + 0.5208vw, 1rem);

    /* 20px -> 32px */
    --p-font-size-heading-1: clamp(1.25rem, 0rem + 3.125vw, 2rem);

    /* 20px -> 28px */
    --p-font-size-heading-2: clamp(1.25rem, 0.4167rem + 2.0833vw, 1.75rem);

    /* 18px -> 24px */
    --p-font-size-heading-3: clamp(1.125rem, 1.5417rem + -1.0417vw, 1.5rem);

    /* 16px -> 18px */
    --p-font-size-heading-4: clamp(1rem, 1.1389rem + -0.3472vw, 1.125rem);

    /* LINE HEIGHT */
    --p-font-line-height-300: var(--p-space-300);
    --p-font-line-height-400: var(--p-space-400);
    --p-font-line-height-500: var(--p-space-500);
    --p-font-line-height-600: var(--p-space-600);
    --p-font-line-height-700: var(--p-space-700);
    --p-font-line-height-800: var(--p-space-800);
    --p-font-line-height-1000: var(--p-space-1000);
    --p-font-line-height-1200: var(--p-space-1200);
}

:root {
    --p-sys-shape-corner-none: 0;
    --p-sys-shape-corner-extra-small: calc(var(--p-ref-spacing) * 1);
    --p-sys-shape-corner-small: calc(var(--p-ref-spacing) * 2);
    --p-sys-shape-corner: calc(var(--p-ref-spacing) * 3);
    --p-sys-shape-corner-large: calc(var(--p-ref-spacing) * 4);
    --p-sys-shape-corner-large-increased: calc(var(--p-ref-spacing) * 5);
    --p-sys-shape-corner-extra-large: calc(var(--p-ref-spacing) * 7);
    --p-sys-shape-corner-full: 9999px;
}

:root {
    /* Z-INDEX */
    --p-sys-elevation-level0: 0;
    --p-sys-elevation-level1: 100;
    --p-sys-elevation-level2: 300;
    --p-sys-elevation-level3: 600;
    --p-sys-elevation-level4: 800;
    --p-sys-elevation-level5: 1200;

    /* SHADOWS */
    --p-sys-elevation-light-1:
        0 1px 2px 0 hsl(from var(--p-sys-color-shadow) h s l / 0.3),
        0 1px 3px 1px hsl(from var(--p-sys-color-shadow) h s l / 0.15);
    --p-sys-elevation-light-2:
        0 1px 2px 0 hsl(from var(--p-sys-color-shadow) h s l / 0.3),
        0 2px 6px 2px hsl(from var(--p-sys-color-shadow) h s l / 0.15);
    --p-sys-elevation-light-3:
        0 1px 3px 0 hsl(from var(--p-sys-color-shadow) h s l / 0.3),
        0 4px 8px 3px hsl(from var(--p-sys-color-shadow) h s l / 0.15);
    --p-sys-elevation-light-4:
        0 2px 3px 0 hsl(from var(--p-sys-color-shadow) h s l / 0.3),
        0 6px 10px 4px hsl(from var(--p-sys-color-shadow) h s l / 0.15);
    --p-sys-elevation-light-5:
        0 4px 4px 0 hsl(from var(--p-sys-color-shadow) h s l / 0.3),
        0 8px 12px 6px hsl(from var(--p-sys-color-shadow) h s l / 0.15);
    --p-sys-elevation-dark-1:
        0 1px 2px 0 hsl(from var(--p-sys-color-shadow) h s l / 0.3),
        0 1px 3px 1px hsl(from var(--p-sys-color-shadow) h s l / 0.15);
    --p-sys-elevation-dark-2:
        0 1px 2px 0 hsl(from var(--p-sys-color-shadow) h s l / 0.3),
        0 2px 6px 2px hsl(from var(--p-sys-color-shadow) h s l / 0.15);
    --p-sys-elevation-dark-3:
        0 1px 3px 0 hsl(from var(--p-sys-color-shadow) h s l / 0.3),
        0 4px 8px 3px hsl(from var(--p-sys-color-shadow) h s l / 0.15);
    --p-sys-elevation-dark-4:
        0 2px 3px 0 hsl(from var(--p-sys-color-shadow) h s l / 0.3),
        0 6px 10px 4px hsl(from var(--p-sys-color-shadow) h s l / 0.15);
    --p-sys-elevation-dark-5:
        0 4px 4px 0 hsl(from var(--p-sys-color-shadow) h s l / 0.3),
        0 8px 12px 6px hsl(from var(--p-sys-color-shadow) h s l / 0.15);
}

:root {
    /* SPATIAL MOTION CONFIG */
    --p-ref-motion-duration-spatial-slow: 350ms;
    --p-ref-motion-duration-spatial: 500ms;
    --p-ref-motion-duration-spatial-fast: 750ms;
    --p-ref-motion-curves-spatial-slow: cubic-bezier(0.27, 1.06, 0.18, 1);
    --p-ref-motion-curves-spatial: cubic-bezier(0.27, 1.06, 0.18, 1);
    --p-ref-motion-curves-spatial-fast: cubic-bezier(0.27, 1.06, 0.18, 1);

    /* EFFECTS MOTION CONFIG */
    --p-ref-motion-duration-effects-slow: 300ms;
    --p-ref-motion-duration-effects: 200ms;
    --p-ref-motion-duration-effects-fast: 150ms;
    --p-ref-motion-curves-effects-slow: cubic-bezier(0.34, 0.88, 0.34, 1);
    --p-ref-motion-curves-effects: cubic-bezier(0.34, 0.8, 0.34, 1);
    --p-ref-motion-curves-effects-fast: cubic-bezier(0.31, 0.94, 0.34, 1);

    /*  STANDARD MOTIONS  */
    --p-sys-motion-spatial-slow: var(--p-ref-motion-duration-spatial-slow)
        var(--p-ref-motion-curves-spatial-slow);
    --p-sys-motion-spatial: var(--p-ref-motion-duration-spatial)
        var(--p-ref-motion-curves-spatial);
    --p-sys-motion-spatial-fast: var(--p-ref-motion-duration-spatial-fast)
        var(--p-ref-motion-curves-spatial-fast);
    --p-sys-motion-effects-slow: var(--p-ref-motion-duration-effects-slow)
        var(--p-ref-motion-curves-effects-slow);
    --p-sys-motion-effects: var(--p-ref-motion-duration-effects)
        var(--p-ref-motion-curves-effects);
    --p-sys-motion-effects-fast: var(--p-ref-motion-duration-effects-fast)
        var(--p-ref-motion-curves-effects-fast);
}

/* COMMON STYLES */

@layer reset{

/*
  1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
  2. Remove default margins and padding
  3. Reset all borders.
*/

::-ms-backdrop {
    box-sizing: border-box; /* 1 */
    padding: 0; /* 2 */
    margin: 0; /* 2 */
    border: 0 solid; /* 3 */
}

::-webkit-file-upload-button {
    box-sizing: border-box; /* 1 */
    padding: 0; /* 2 */
    margin: 0; /* 2 */
    border: 0 solid; /* 3 */
}

*,
::after,
::before,
::backdrop,
::file-selector-button {
    box-sizing: border-box; /* 1 */
    padding: 0; /* 2 */
    margin: 0; /* 2 */
    border: 0 solid; /* 3 */
}

/*
  1. Use a consistent sensible line-height in all browsers.
  2. Prevent adjustments of font size after orientation changes in iOS.
  3. Use a more readable tab size.
  4. Use the user's configured `sans` font-family by default.
  5. Use the user's configured `sans` font-feature-settings by default.
  6. Use the user's configured `sans` font-variation-settings by default.
  7. Disable tap highlights on iOS.
*/

html,
:host {
    font-family: --theme(
        --default-font-family,
        ui-sans-serif,
        system-ui,
        sans-serif,
        'Apple Color Emoji',
        'Segoe UI Emoji',
        'Segoe UI Symbol',
        'Noto Color Emoji'
    ); /* 4 */

    font-variation-settings: --theme(
        --default-font-variation-settings,
        normal
    ); /* 6 */
    -moz-font-feature-settings: --theme(
        --default-font-feature-settings,
        normal
    );
         font-feature-settings: --theme(
        --default-font-feature-settings,
        normal
    ); /* 5 */
    line-height: 1.5; /* 1 */
    -moz-tab-size: 4;
      -o-tab-size: 4;
         tab-size: 4; /* 3 */
    -webkit-text-size-adjust: 100%;
       -moz-text-size-adjust: 100%;
        -ms-text-size-adjust: 100%;
            text-size-adjust: 100%; /* 2 */
    -webkit-tap-highlight-color: transparent; /* 7 */
}

/*
  1. Add the correct height in Firefox.
  2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
  3. Reset the default border style to a 1px solid border.
*/

hr {
    height: 0; /* 1 */
    color: inherit; /* 2 */
    border-top-width: 1px; /* 3 */
}

/*
  Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
            text-decoration: underline dotted;
    text-decoration: underline dotted;
}

/*
  Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: inherit;
    font-weight: inherit;
}

/*
  Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
    color: inherit;
    text-decoration: inherit;
    text-decoration: inherit;
}

/*
  Add the correct font weight in Edge and Safari.
*/

b,
strong {
    font-weight: bolder;
}

/*
  1. Use the user's configured `mono` font-family by default.
  2. Use the user's configured `mono` font-feature-settings by default.
  3. Use the user's configured `mono` font-variation-settings by default.
  4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
    font-family: --theme(
        --default-mono-font-family,
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        'Liberation Mono',
        'Courier New',
        monospace
    ); /* 1 */

    font-size: 1em; /* 4 */
    font-variation-settings: --theme(
        --default-mono-font-variation-settings,
        normal
    ); /* 3 */
    -moz-font-feature-settings: --theme(
        --default-mono-font-feature-settings,
        normal
    );
         font-feature-settings: --theme(
        --default-mono-font-feature-settings,
        normal
    ); /* 2 */
}

/*
  Add the correct font size in all browsers.
*/

small {
    font-size: 80%;
}

/*
  Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
    position: relative;
    font-size: 75%;
    line-height: 0;
    vertical-align: baseline;
}

sub {
    bottom: -0.25em;
}

sup {
    top: -0.5em;
}

/*
  1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
  2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
  3. Remove gaps between table borders by default.
*/

table {
    text-indent: 0; /* 1 */
    border-collapse: collapse; /* 3 */
    border-color: inherit; /* 2 */
}

/*
  Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
    outline: auto;
}

/*
  Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
    vertical-align: baseline;
}

/*
  Add the correct display in Chrome and Safari.
*/

summary {
    display: list-item;
}

/*
  Make lists unstyled by default.
*/

ol,
ul,
menu {
    list-style: none;
}

/*
  1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
  2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
      This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
    display: block; /* 1 */
    vertical-align: middle; /* 2 */
}

/*
  Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
    max-width: 100%;
    height: auto;
}

/*
  1. Inherit font styles in all browsers.
  2. Remove border radius in all browsers.
  3. Remove background color in all browsers.
  4. Ensure consistent opacity for disabled states in all browsers.
*/

::-webkit-file-upload-button {
    font: inherit; /* 1 */
    font-variation-settings: inherit; /* 1 */
    font-feature-settings: inherit; /* 1 */
    color: inherit; /* 1 */
    letter-spacing: inherit; /* 1 */
    background-color: transparent; /* 3 */
    border-radius: 0; /* 2 */
    opacity: 1; /* 4 */
}

button,
input,
select,
optgroup,
textarea,
::file-selector-button {
    font: inherit; /* 1 */
    font-variation-settings: inherit; /* 1 */
    -moz-font-feature-settings: inherit;
         font-feature-settings: inherit; /* 1 */
    color: inherit; /* 1 */
    letter-spacing: inherit; /* 1 */
    background-color: transparent; /* 3 */
    border-radius: 0; /* 2 */
    opacity: 1; /* 4 */
}

/*
  Restore default font weight.
*/

:where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
}

/*
  Restore indentation.
*/

:where(select:is([multiple], [size])) optgroup option {
    -webkit-padding-start: 20px;
       -moz-padding-start: 20px;
            padding-inline-start: 20px;
}

/*
  Restore space after button.
*/

::-webkit-file-upload-button {
    -webkit-margin-end: 4px;
            margin-inline-end: 4px;
}

::file-selector-button {
    -webkit-margin-end: 4px;
       -moz-margin-end: 4px;
            margin-inline-end: 4px;
}

/*
  Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
*/

::-webkit-input-placeholder {
    opacity: 1;
}

::-moz-placeholder {
    opacity: 1;
}

:-ms-input-placeholder {
    opacity: 1;
}

::-ms-input-placeholder {
    opacity: 1;
}

::placeholder {
    opacity: 1;
}

/*
  Set the default placeholder color to a semi-transparent version of the current text color in browsers that do not
  crash when using `color-mix(…)` with `currentcolor`. (https://github.com/tailwindlabs/tailwindcss/issues/17194)
*/

@supports (not (-webkit-appearance: -apple-pay-button)) /* Not Safari */ or
    (contain-intrinsic-size: 1px) /* Safari 17+ */ {
    ::-webkit-input-placeholder {
        color: color-mix(in oklab, currentcolor 50%, transparent);
    }
    ::-moz-placeholder {
        color: color-mix(in oklab, currentcolor 50%, transparent);
    }
    :-ms-input-placeholder {
        color: color-mix(in oklab, currentcolor 50%, transparent);
    }
    ::-ms-input-placeholder {
        color: color-mix(in oklab, currentcolor 50%, transparent);
    }
    ::placeholder {
        color: color-mix(in oklab, currentcolor 50%, transparent);
    }
}

/*
  Prevent resizing textareas horizontally by default.
*/

textarea {
    resize: vertical;
}

/*
  Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
    -webkit-appearance: none;
            appearance: none;
}

/*
  1. Ensure date/time inputs have the same height when empty in iOS Safari.
  2. Ensure text alignment can be changed on date/time inputs in iOS Safari.
*/

::-webkit-date-and-time-value {
    min-height: 1lh; /* 1 */
    text-align: inherit; /* 2 */
}

/*
  Prevent height from changing on date/time inputs in macOS Safari when the input is set to `display: block`.
*/

::-webkit-datetime-edit {
    display: inline-flex;
}

/*
  Remove excess padding from pseudo-elements in date/time inputs to ensure consistent height across browsers.
*/

::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
}

::-webkit-datetime-edit,
::-webkit-datetime-edit-year-field,
::-webkit-datetime-edit-month-field,
::-webkit-datetime-edit-day-field,
::-webkit-datetime-edit-hour-field,
::-webkit-datetime-edit-minute-field,
::-webkit-datetime-edit-second-field,
::-webkit-datetime-edit-millisecond-field,
::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
}

/*
  Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
    box-shadow: none;
}

/*
  Correct the inability to style the border radius in iOS Safari.
*/

::-webkit-file-upload-button {
    -webkit-appearance: auto;
            appearance: auto;
}

button,
input:where([type='button'], [type='reset'], [type='submit']),
::file-selector-button {
    -webkit-appearance: auto;
       -moz-appearance: auto;
            appearance: auto;
}

/*
  Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
    height: auto;
}

/*
  Make elements with the HTML hidden attribute stay hidden by default.
*/

[hidden]:where(:not([hidden='until-found'])) {
    display: none !important;
}
}

@layer reset{

html {
    container: scroller/scroll-state;
}

body {
    overflow-x: hidden;
    font-family:
        var(--p-ref-typeface-plain), var(--p-ref-typeface-plain-fallback),
        sans-serif;
    font-size: 16px;
    font-synthesis: none;
    line-height: 1;
    color: var(--p-sys-color-on-background);
    background-color: var(--p-sys-color-background);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizelegibility;
}

a {
    color: var(--p-sys-color-on-background);
    text-decoration: none;
    transition: color 0.2s ease;
}

    a:hover {
        color: var(--p-sys-color-emphasis);
    }

    a:is(.active,:active) {
        color: var(--p-sys-color-on-background);
    }

svg {
    width: auto;
    height: 100%;
    fill: currentcolor;
}

:is(img:has(.cover), .cover img) {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: center;
       object-position: center;
}
}

/* LAYOUT STYLES */

@layer layout{

:where(.pxy, .px, .py) {
    --padding: 4px;
}

    [data-padding]:where(.pxy,.px,.py) {
        --padding: calc(
            var(--p-ref-spacing) * attr(data-padding type(< number >), 1)
        );
    }

.pxy {
    padding: var(--padding);
}

.px {
    padding-inline: var(--padding);
}

.py {
    padding-block: var(--padding);
}
}

@layer layout{

:where(.columns) {
    -webkit-columns: var(--columns, 2);
       -moz-columns: var(--columns, 2);
            columns: var(--columns, 2);
    -webkit-column-gap: var(--column-gap, var(--p-space-400));
       -moz-column-gap: var(--column-gap, var(--p-space-400));
            column-gap: var(--column-gap, var(--p-space-400));
}

    [data-columns]:where(.columns) {
        --columns: attr(data-columns type(< number >), 2);
    }

    [data-gap]:where(.columns) {
        --column-gap: calc(
            var(--p-ref-spacing) * attr(data-gap type(< number >), 2)
        );
    }

:where(.grid) {
    display: grid;
    grid-template-rows: repeat(var(--rows, auto-fill), 1fr);
    grid-template-columns: repeat(var(--columns, auto-fill), 1fr);
    gap: var(--gap, var(--p-space-400));
}

    [data-columns]:where(.grid) {
        --columns: attr(data-columns type(< number >), 2);
    }

    [data-rows]:where(.grid) {
        --rows: attr(data-rows type(< number >), 2);
    }

    [data-gap]:where(.grid) {
        --gap: calc(var(--p-ref-spacing) * attr(data-gap type(< number >), 2));
    }
}

@layer layout{

/* Button Component */

:where(.button) {
    --p-button-container-color: var(--p-sys-color-primary);
    --p-button-hover-container-color: var(--p-sys-color-primary);
    --p-button-container-color-opacity: 1;
    --p-button-label-color: var(--p-sys-color-on-primary);
    --p-button-hover-label-color: var(--p-sys-color-on-primary);
    --p-button-label-color-opacity: 1;
    --p-button-label-font-size: var(--p-ref-typeface-size-350);
    --p-button-label-font-weight: var(--p-ref-typeface-weight-medium);
    --p-button-label-line-height: var(--p-ref-typeface-size-500);
    --p-button-label-tracking: 0.1rem;
    --p-button-icon-color: var(--p-sys-color-on-primary);
    --p-button-hover-icon-color: var(--p-sys-color-on-primary);
    --p-button-icon-color-opacity: 1;
    --p-button-icon-size: var(--p-space-400);
    --p-button-shape: var(--p-sys-shape-corner-full);
    --p-button-border-color: transparent;
    --p-button-gap: var(--p-space-200);
    --p-button-focus-ring-color: var(--p-sys-color-secondary);
    --p-button-focus-ring-width: 3px;
    --p-button-focus-ring-offset: 2px;
    --p-button-padding: var(--p-space-200) var(--p-space-400);
    --p-button-shadow-color: var(--p-sys-color-shadow);
    --p-button-shadow: 2px 3px 15px 2px var(--p-button-shadow-color);
    --p-button-elevation: var(--p-sys-elevation-level0);

    z-index: var(--p-button-elevation);
    display: flex;
    gap: var(--p-button-gap);
    place-content: center;
    place-items: center;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    padding: var(--p-button-padding);
    font: inherit;
    font-size: var(--p-button-label-font-size);
    font-weight: var(--p-button-label-font-weight);
    line-height: var(--p-button-label-line-height);
    color: hsl(
        from var(--p-button-label-color) h s l /
            var(--p-button-label-color-opacity)
    );
    letter-spacing: var(--p-button-label-tracking);
    cursor: pointer;
    background: var(--p-button-container-color);
    border: 1px solid var(--p-button-border-color);
    border-radius: var(--p-button-shape);
    transition:
        background var(--p-sys-motion-effects),
        color var(--p-sys-motion-effects-slow),
        box-shadow var(--p-sys-motion-effects-slow);
}

    :where(.button)  > svg {
        width: var(--p-button-icon-size);
        height: var(--p-button-icon-size);
        color: hsl(
            from var(--p-button-icon-color) h s l /
                var(--p-button-icon-color-opacity)
        );
        transition: color var(--p-sys-motion-effects-slow);
    }

    :where(.button):is(a) {
        display: inline-flex;
    }

    /* STATES */

    :where(.button):disabled {
        --p-button-shadow: none;

        color: hsl(from var(--p-sys-color-on-surface-variant) h s l / 0.36);
        pointer-events: none;
        background: hsl(from var(--p-sys-color-on-surface-variant) h s l / 0.1);
    }

        :where(.button):disabled  > svg {
            color: hsl(from var(--p-sys-color-on-surface-variant) h s l / 0.36);
        }

    :where(.button):hover {
        --p-button-container-color: var(--p-button-hover-container-color);
        --p-button-label-color: var(--p-button-hover-label-color);
        --p-button-icon-color: var(--p-button-hover-icon-color);
        --p-button-container-color-opacity: 0.8;

        color: hsl(
            from var(--p-button-hover-label-color) h s l /
                var(--p-button-label-color-opacity)
        );
        background: hsl(
            from var(--p-button-hover-container-color) h s l /
                var(--p-button-container-color-opacity)
        );
    }

        :where(.button):hover  > svg {
            color: hsl(
                from var(--p-button-hover-icon-color) h s l /
                    var(--p-button-icon-color-opacity)
            );
        }

    /* SIZES */

    .button--extra-small:where(.button) {
        --p-button-padding: var(--p-space-150) var(--p-space-300);
        --p-button-label-font-size: var(--p-ref-typeface-size-275);
        --p-button-label-line-height: var(--p-ref-typeface-size-325);
        --p-button-icon-size: var(--p-space-300);
    }

    .button--small:where(.button) {
        --p-button-padding: var(--p-space-150) var(--p-space-300);
        --p-button-label-font-size: var(--p-ref-typeface-size-300);
        --p-button-label-line-height: var(--p-ref-typeface-size-350);
        --p-button-icon-size: var(--p-space-300);
    }

    .button--large:where(.button) {
        --p-button-padding: var(--p-space-300) var(--p-space-500);
        --p-button-label-font-size: var(--p-ref-typeface-size-500);
        --p-button-label-line-height: var(--p-ref-typeface-size-600);
        --p-button-icon-size: var(--p-space-600);
        --p-button-gap: var(--p-space-300);
    }

    .button--extra-large:where(.button) {
        --p-button-padding: var(--p-space-600) var(--p-space-900);
        --p-button-label-font-size: var(--p-ref-typeface-size-700);
        --p-button-label-line-height: var(--p-ref-typeface-size-800);
        --p-button-icon-size: var(--p-space-800);
        --p-button-gap: var(--p-space-400);
    }

    .button--full:where(.button),.button--full-width:where(.button) {
        width: 100%;
    }

    /* COLORS */

    .button--white:where(.button) {
        --p-button-container-color: var(--p-sys-color-inverse-surface);
        --p-button-label-color: var(--p-sys-color-on-inverse-surface);
        --p-button-icon-color: var(--p-sys-color-on-inverse-surface);
        --p-button-hover-container-color: var(--p-sys-color-emphasis);
        --p-button-hover-label-color: var(--p-sys-color-on-emphasis);
        --p-button-hover-icon-color: var(--p-sys-color-on-emphasis);
    }

    .button--secondary:where(.button) {
        --p-button-container-color: var(--p-sys-color-secondary-container);
        --p-button-hover-container-color: var(
            --p-sys-color-secondary-container
        );
    }

    .button--tertiary:where(.button) {
        --p-button-container-color: var(--p-sys-color-tertiary);
        --p-button-hover-container-color: var(--p-sys-color-primary);
    }

    .button--emphasis:where(.button) {
        --p-button-container-color: var(--p-sys-color-emphasis);
        --p-button-hover-container-color: var(--p-sys-color-emphasis);
    }

    .button--outline:where(.button) {
        --p-button-container-color: transparent;
        --p-button-hover-container-color: var(--p-sys-color-primary);
        --p-button-container-color-opacity: 1;
        --p-button-label-color: var(--p-sys-color-on-background);
        --p-button-hover-label-color: var(--p-sys-color-on-primary);
        --p-button-icon-color: var(--p-sys-color-on-background);
        --p-button-hover-icon-color: var(--p-sys-color-on-primary);
        --p-button-border-color: var(--p-sys-color-on-background);
    }

    /* STYLES */

    .button--elevated:where(.button) {
        --p-button-elevation: var(--p-sys-elevation-level1);

        box-shadow: var(--p-sys-elevation-light-3);
    }

    .button--text:where(.button) {
        --p-button-label-color: var(--p-button-container-color);
        --p-button-icon-color: var(--p-button-container-color);

        background: transparent;
    }

    .button--icon:where(.button) {
        --p-button-padding: var(--p-space-100);
    }

    /* SHAPES */

    .button--rectangle:where(.button) {
        --p-button-shape: var(--p-sys-shape-corner-none);
    }

    .button--square:where(.button) {
        --p-button-shape: var(--p-sys-shape-corner);
    }

    .button--circle:where(.button) {
        --p-button-shape: var(--p-sys-shape-corner-full);
    }
}

@layer layout{
.menu {
    --p-menu-background-color: var(--p-sys-color-background);
    --p-menu-corner-shape: var(--p-sys-shape-corner-small);
    --p-menu-elevation: var(--p-sys-elevation-level2);
    --p-menu-item-background-color: var(--p-sys-color-background);
    --p-menu-item-gap: 0;
    --p-menu-item-hover-background-color: var(
        --p-sys-color-emphasis-container-variant
    );
    --p-menu-item-hover-on-background-color: var(--p-sys-color-on-emphasis);
    --p-menu-item-on-background-color: var(--p-sys-color-on-background);
    --p-menu-item-padding: var(--p-space-300) var(--p-space-600);

    z-index: var(--p-menu-elevation);
    display: grid;
    grid-auto-rows: 1fr;
    grid-auto-flow: row;
    gap: var(--p-menu-item-gap);
    overflow: clip;
    background: var(--p-menu-background-color);
    border-radius: var(--p-menu-corner-shape);
    box-shadow: 0 1px 2px 0 hsl(from var(--p-sys-color-shadow) h s l / 0.05);
}

    .menu li :is(a,button) {
        display: block;
        width: 100%;
        padding: var(--p-menu-item-padding);
        color: var(--p-menu-item-on-background-color);
        text-align: center;
        background: var(--p-menu-item-background-color);
        transition: background var(--p-sys-motion-effects-slow) font-weight
            var(--p-sys-motion-effects-slow) allow-discrete;
    }

        :is(.menu li :is(a,button)):hover {
            font-weight: var(--p-ref-typeface-weight-medium);

            --p-menu-item-background-color: var(
                --p-menu-item-hover-background-color
            );
            --p-menu-item-on-background-color: var(
                --p-menu-item-hover-on-background-color
            );
        }

    .menu .menu__item--active {
        --p-menu-item-background-color: hsl(
            from var(--p-menu-item-hover-background-color) h s l / 0.36
        );
    }
}

@layer layout{

input[type='search'],
input[type='email'] {
    inline-size: 100%;
    padding: var(--p-space-300) var(--p-space-1000);
    font-size: var(--p-ref-typeface-size-500);
    font-weight: var(--p-ref-typeface-weight-semibold);
    line-height: 1;
    color: var(--p-sys-color-on-background);
    background: var(--p-ref-palette-water);
    border-radius: var(--p-sys-shape-corner);
    box-shadow: var(--p-sys-elevation-light-4);
}

.form-input {
    inline-size: 100%;
}
}

@layer layout{
:where(dialog[data-dialog-mode='modal'], .dialog) {
    --p-dialog-backdrop-color: hsl(from var(--p-ref-palette-black) h s l / 0.8);

    max-inline-size: min(90vw, calc(var(--p-breakpoints-lg) * 0.875));
    width: 100%;
    padding: var(--p-space-600);
    margin: auto;
    overflow: hidden;
    overflow-y: auto;
    background: var(--p-sys-color-background);
    border: none;
    border-radius: var(--p-sys-shape-corner-large);
    box-shadow: var(--p-sys-elevation-light-4);
    opacity: 0;
    transition: opacity var(--p-sys-motion-effects-slow);
}

    :where(dialog[data-dialog-mode='modal'],.dialog):not([open]) {
        pointer-events: none;
        opacity: 0;
    }

    [open]:where(dialog[data-dialog-mode='modal'],.dialog) {
        opacity: 1;
    }

    :where(dialog[data-dialog-mode='modal'],.dialog)::-ms-backdrop {
        background: var(--p-dialog-backdrop-color);
        -ms-transition: backdrop-filter var(--p-sys-motion-effects-slow);
        transition: backdrop-filter var(--p-sys-motion-effects-slow);
    }

    :where(dialog[data-dialog-mode='modal'],.dialog)::backdrop {
        background: var(--p-dialog-backdrop-color);
        transition: -webkit-backdrop-filter var(--p-sys-motion-effects-slow);
        transition: backdrop-filter var(--p-sys-motion-effects-slow);
        transition: backdrop-filter var(--p-sys-motion-effects-slow), -webkit-backdrop-filter var(--p-sys-motion-effects-slow);
    }

    .dialog--full:where(dialog[data-dialog-mode='modal'],.dialog) {
        max-inline-size: min(90cqi, calc(var(--p-breakpoints-xl) * 0.875));
    }

    :where(dialog[data-dialog-mode='modal'],.dialog) .dialog__header {
        -webkit-padding-after: var(--p-space-600);
                padding-block-end: var(--p-space-600);
    }

        :is(:where(dialog[data-dialog-mode='modal'],.dialog) .dialog__header) h3 {
            font-size: var(--p-ref-typeface-size-800);
            font-weight: var(--p-ref-typeface-weight-bold);
            color: var(--p-sys-color-primary);
            text-align: center;
        }

    :where(dialog[data-dialog-mode='modal'],.dialog) .dialog__close {
        float: right;
        cursor: pointer;
    }

        :is(:where(dialog[data-dialog-mode='modal'],.dialog) .dialog__close) svg {
            width: var(--p-space-1000);
        }
}

@layer layout{
.rating {
    display: inline-flex;
    gap: var(--p-space-025);
    align-items: center;
}

    .rating .rate {
        color: var(--p-sys-color-emphasis);
    }

        :is(.rating .rate):hover {
            color: hsl(from var(--p-sys-color-emphasis) h s calc(l + 5));
        }
        .rating.rating--large svg {
            width: var(--p-space-1000);
            height: var(--p-space-1000);
        }
}

@layer layout{
:where(.media) {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
}

    .media--rounded:where(.media) {
        overflow: clip;
        border-radius: var(--p-sys-shape-corner-large-increased);
    }

    /* ASPECT RATIO */

    .media--square:where(.media),.media--photo:where(.media) {
        height: auto;
    }

        :is(.media--square:where(.media),.media--photo:where(.media)) img {
            -o-object-fit: cover;
               object-fit: cover;
            -o-object-position: center;
               object-position: center;
        }

    .media--square:where(.media) {
        aspect-ratio: 1/1;
    }

    .media--photo:where(.media) {
        aspect-ratio: 3/2;
    }

    .media--video:where(.media),.media--video:where(.media) iframe {
        aspect-ratio: 16/9;
    }

    .media--iframe:where(.media) iframe {
        width: 100%;
        height: auto;
        border: none;
    }

    :where(.media):is(figure) {
        position: relative;
    }

        :where(.media):is(figure) figcaption {
            position: absolute;
            top: var(--p-space-400);
            right: var(--p-space-400);
            z-index: var(--p-sys-elevation-level2);
            padding: var(--p-space-150) var(--p-space-300);
            font-size: var(--p-ref-typeface-size-300);
            text-transform: uppercase;
            background: var(--p-sys-color-surface-bright);
            border-radius: var(--p-sys-shape-corner-extra-large);
            box-shadow: var(--p-sys-elevation-light-3);
        }
        .media--footer-caption:where(.media) figcaption {
            position: relative;
            inset: unset;
            padding-block: var(--p-space-400);
            font-size: var(--p-font-size-text);
            font-weight: var(--p-ref-typeface-weight-semibold);
            text-align: center;
            background: unset;
            box-shadow: unset;
        }
}

@layer layout{
.pagy {
    display: flex;
    flex-wrap: wrap;
    place-content: center;
    place-items: center;
    font-size: var(--p-ref-typeface-size-450);
    font-weight: 600;
    line-height: 1.25rem;
    color: rgb(107 114 128);
}

    .pagy > :not([hidden]) ~ :not([hidden]) {
        --space-reverse: 0;

        margin-right: calc(0.25rem * var(--space-reverse));
        margin-left: calc(0.25rem * calc(1 - var(--space-reverse)));
    }

    .pagy a.gap {
        color: var(--p-sys-color-secondary);
        pointer-events: none;
        cursor: default;
        -webkit-user-select: none;
           -moz-user-select: none;
            -ms-user-select: none;
                user-select: none;
    }

    .pagy a:not(.gap) {
        display: block;
        padding: 0.25rem 0.75rem;
        color: var(--p-sys-color-primary);
        text-decoration: none;
    }

        :is(.pagy a:not(.gap)):hover {
            color: var(--p-sys-color-emphasis);
        }

        :is(.pagy a:not(.gap)):not([href]) {
            /* disabled links */
            color: var(--p-sys-color-secondary);
            cursor: default;
        }

        .current:is(.pagy a:not(.gap)) {
            font-weight: var(--p-ref-typeface-weight-extrabold);
        }

        :is(.pagy a:not(.gap))  > svg {
            width: auto;
            height: 100%;
        }

    .pagy label {
        display: inline-block;
        padding: 0.125rem 0.75rem;
        white-space: nowrap;
        background-color: rgb(229 231 235);
        border-radius: 0.5rem;
    }

        :is(.pagy label) input {
            line-height: 1.5rem;
            background-color: rgb(243 244 246);
            border-style: none;
            border-radius: 0.375rem;
        }
}

@layer layout{
.leaf-card {
    background: url("/assets/leaf_bg-1ba7ec01.png") center center;
    background-size: cover;
}

    .leaf-card.leaf-card--rounded {
        overflow: clip;
        border-radius: var(--p-sys-shape-corner-large-increased);
    }

    .leaf-card.leaf-card--bordered {
        border: 1px solid var(--p-sys-color-secondary);
    }

    .leaf-card .leaf-card__header {
        padding-block: var(--p-space-400);
        font-size: var(--p-ref-typeface-size-500);
        font-weight: var(--p-ref-typeface-weight-semibold);
        vertical-align: middle;
        color: var(--p-sys-color-on-secondary);
        text-align: center;
        background: var(--p-sys-color-secondary);
    }

        @media (width >= 48rem) {

    .leaf-card .leaf-card__header {
            font-size: var(--p-ref-typeface-size-600);
    }
        }

    .leaf-card .leaf-card__content {
        display: flex;
        flex-direction: column;
        gap: var(--p-space-200);
        padding: var(--p-space-300);
        margin: var(--p-space-300);
        font-size: var(--p-ref-typeface-size-300);
        line-height: 1.3;
        text-align: center;
        background: hsl(from var(--p-sys-color-on-inverse-surface) h s l / 0.8);
        border-radius: var(--p-sys-shape-corner-small);
    }

        @media (width >= 48rem) {

    .leaf-card .leaf-card__content {
            font-size: var(--p-ref-typeface-size-350);
    }
        }
}

/* COMPONENT STYLES */

@layer components{

:root {
    /* TOPBAR */
    --p-topbar-padding: var(--p-space-200);
    --p-topbar-background-color: var(--p-sys-color-surface-container);
    --p-topbar-on-background-color: var(--p-sys-color-on-surface);
    --p-topbar-search-surface-color: var(
        --p-sys-color-surface-container-lowest
    );

    /* NAVBAR */
    --p-navbar-block-size: var(--p-space-2000);
    --p-navbar-background-color: var(--p-sys-color-background);
    --p-navbar-on-background-color: var(--p-sys-color-on-background);
    --p-navbar-surface-color: var(--p-sys-color-background);
    --p-navbar-toggle-color: var(--p-sys-color-secondary);
}

/* PAGE HEADER COMPONENTS */
:where(body > header, .page-header) {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    transition: box-shadow var(--p-sys-motion-effects-slow);
}

    @container scroller scroll-state(scrollable: top) {
:where(body > header, .page-header) {
        z-index: var(--p-sys-elevation-level2);
        box-shadow: var(--p-sys-elevation-light-3);
}
    }

    .page-header--sticky:where(body > header,.page-header) {
        z-index: var(--p-sys-elevation-level2);
        box-shadow: var(--p-sys-elevation-light-3);
    }

    :where(body > header,.page-header) .page-header__assistant {
        z-index: var(--p-sys-elevation-level5);
    }

    :where(body > header,.page-header) .page-header__wrapper {
        display: grid;
        grid-template: auto 1fr / 1fr;
        grid-template-areas:
            'topbar'
            'navbar';
        align-items: center;
    }

    :where(body > header,.page-header) .page-header__topbar {
        grid-area: topbar;
        container: topbar / inline-size;
    }

    :where(body > header,.page-header) .page-header__navbar {
        grid-area: navbar;
        container: navbar / inline-size;
    }

.topbar {
    color: var(--p-topbar-on-background-color);
    background: var(--p-topbar-background-color);
}

    .topbar .topbar__container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-block: var(--p-topbar-padding);
    }

    .topbar .topbar__search {
        padding-block: var(--p-space-600);
        padding-inline: var(--p-space-800);
        background: var(--p-topbar-search-surface-color);
    }

        :is(.topbar .topbar__search):not(.topbar__search--active) {
            display: none;
        }

        /* BUTTON CUSTOMIZATION */

        :is(.topbar .topbar__search) .button {
            --p-button-container-color: hsl(
                from var(--p-sys-color-inverse-surface) h s l / 0.6
            );
        }

    .topbar .topbar__search-form {
        display: grid;
        grid-template: 1fr / 1fr 10rem;
        -webkit-column-gap: var(--p-space-400);
           -moz-column-gap: var(--p-space-400);
                column-gap: var(--p-space-400);
        align-items: center;
        justify-content: center;
        width: 100%;
        max-width: 100%;
    }

        @container top-bar (width >= 40rem) {

    .topbar .topbar__search-form {
            padding-inline: var(--p-space-800);
    }
        }

    .topbar .link-list {
        display: flex;
        -webkit-column-gap: var(--p-space-300);
           -moz-column-gap: var(--p-space-300);
                column-gap: var(--p-space-300);
        align-items: center;
    }

        :is(.topbar .link-list) svg {
            inline-size: var(--p-space-400);
            block-size: var(--p-space-400);
        }

    .topbar a,.topbar a:hover {
        color: var(--p-topbar-on-background-color);
    }

/* NAVBAR */

#navbar-active {
    display: none;
}

.navbar {
    position: relative;
    display: grid;
    block-size: var(--p-navbar-block-size);
    color: var(--p-navbar-on-background-color);
    background: var(--p-navbar-background-color);
}

    @container navbar (width >= 64rem) {

.navbar {
        block-size: unset;
}
    }

    .navbar .navbar__container {
        display: grid;
        grid-template: 1fr / 1fr auto 1fr;
        grid-template-areas: 'menu-toggle logo mobile-auxiliary';
        -webkit-column-gap: var(--p-space-400);
           -moz-column-gap: var(--p-space-400);
                column-gap: var(--p-space-400);
        align-items: center;
        justify-content: space-between;
        overflow-x: clip;
    }

        @container navbar (width >= 64rem) {

    .navbar .navbar__container {
            grid-template-areas: 'main-menu logo auxiliary';
            -webkit-column-gap: var(--p-space-1200);
               -moz-column-gap: var(--p-space-1200);
                    column-gap: var(--p-space-1200);
    }
        }

    .navbar .navbar__toggle {
        grid-area: menu-toggle;
        inline-size: var(--p-space-1000);
        block-size: var(--p-space-1000);
        color: var(--p-navbar-toggle-color);
        cursor: pointer;
    }

        @container navbar (width >= 64rem) {

    .navbar .navbar__toggle {
            display: none;
    }
        }

    .navbar .navbar__item {
        --p-navbar-items-gap: var(--p-space-400);

        display: flex;
        flex-flow: row nowrap;
        -webkit-column-gap: var(--p-navbar-items-gap);
           -moz-column-gap: var(--p-navbar-items-gap);
                column-gap: var(--p-navbar-items-gap);
        place-content: center;
        align-items: center;
        justify-content: space-between;
        height: 100%;
        text-wrap: nowrap;
    }

        @container navbar (width >= 64rem) {

    .navbar .navbar__item {
            --p-navbar-items-gap: var(--p-space-1200);
    }
        }

        :is(.navbar .navbar__item)  > li {
            display: flex;
            place-content: center;
            place-items: center;
            height: 100%;
        }

            :is(:is(.navbar .navbar__item) > li)  > button,:is(:is(.navbar .navbar__item) > li) a {
                cursor: pointer;
            }

    .navbar .navbar__main-menu {
        z-index: var(--p-sys-elevation-level2);
        grid-area: main-menu;
        justify-content: flex-start;
    }

        @container navbar (width < 64rem) {

    .navbar .navbar__main-menu {
            display: none;
    }
        }

    .navbar .navbar__logo {
        grid-area: logo;
        block-size: 100%;
        padding-block: var(--p-space-300);
    }

    .navbar .navbar__auxiliary-menu {
        grid-area: auxiliary;
        justify-content: flex-end;
    }

        @container navbar (width < 64rem) {

    .navbar .navbar__auxiliary-menu {
            display: none;
    }
        }

    .navbar .navbar__auxiliary-mobile {
        grid-area: mobile-auxiliary;
        justify-content: flex-end;
    }

        @container navbar (width >= 64rem) {

    .navbar .navbar__auxiliary-mobile {
            display: none;
    }
        }

    .navbar .navbar__menu {
        --p-menu-background-color: var(--p-navbar-background-color);

        position: fixed;
        top: anchor(end);
        left: anchor(center);
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        translate: -50% 0;
    }

.navbar-mobile {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: var(--p-sys-elevation-level4);
    display: flex;
    visibility: hidden;
    flex-direction: column;
    gap: var(--p-space-500);
    inline-size: calc(var(--p-breakpoints-sm) / 2);
    padding: var(--p-space-600);
    background: var(--p-navbar-background-color);
    box-shadow: var(--p-sys-elevation-light-3);
    transform: translateX(-100%);
    transition:
        transform var(--p-sys-motion-spatial-slow),
        visibility var(--p-sys-motion-effects-slow);
}

    #navbar-active:checked ~ .navbar-mobile {
        visibility: visible;
        transform: translateX(0);
    }

    .navbar-mobile .navbar-mobile__close {
        inline-size: var(--p-space-1000);
        block-size: var(--p-space-1000);
        color: var(--p-navbar-toggle-color);
        cursor: pointer;
    }

    .navbar-mobile .navbar-mobile__links {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: var(--p-space-400);
    }

        :is(.navbar-mobile .navbar-mobile__links)  > li {
            position: relative;
            width: 15.625rem;
            border: 1px solid var(--p-sys-color-outline);
            border-radius: var(--p-sys-shape-corner-small);
        }

            :is(:is(.navbar-mobile .navbar-mobile__links) > li):has(:popover-open) {
                box-shadow: var(--p-sys-elevation-light-3);
            }

        :is(.navbar-mobile .navbar-mobile__links)  > li button {
            display: flex;
            flex-flow: row nowrap;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            padding: var(--p-space-300) var(--p-space-600);
            text-align: left;
        }

    .navbar-mobile .navbar-mobile__menu {
        position: fixed;
        top: calc(anchor(top) - 2px);
        left: calc(anchor(left) - 2px);
        width: 15.75rem;
        border: 1px solid var(--p-sys-color-outline);
    }

        :is(.navbar-mobile .navbar-mobile__menu) a {
            text-align: left;
        }

        :is(.navbar-mobile .navbar-mobile__menu) button {
            font-weight: var(--p-ref-typeface-weight-bold);
        }

    .navbar-mobile .navbar-mobile__divider {
        border-color: var(--p-sys-color-outline);
    }

    .navbar-mobile .navbar-mobile__content {
        display: flex;
        flex-direction: column;
        gap: var(--p-space-200);
    }

        :is(.navbar-mobile .navbar-mobile__content) h4 {
            font-weight: var(--p-ref-typeface-weight-bold);
            color: var(--p-sys-color-primary);
        }
}

@layer components{

:where(body > footer, .page-footer) {
    color: var(--p-sys-color-on-surface);
    background: var(--p-sys-color-surface);
}

    :where(body > footer,.page-footer) .page-footer__wrapper {
        display: flex;
        flex-direction: column;
        gap: var(--p-space-1000);
        padding-block: var(--p-space-1200);
    }

    :where(body > footer,.page-footer) h3 {
        font-size: var(--p-ref-typeface-size-500);
        text-align: center;
        text-wrap: balance;
    }

        @media (width >= 48rem) {

    :where(body > footer,.page-footer) h3 {
            font-size: var(--p-ref-typeface-size-600);
    }
        }

    :where(body > footer,.page-footer) form {
        display: grid;
        grid-template-columns: 1fr 30%;
        gap: var(--p-space-800);
        align-items: center;
    }

.footer-support {
    padding-block: var(--p-space-1200);
    color: var(--p-sys-color-on-background);
    background: var(--p-sys-color-background);
    border-top: 1px solid var(--p-sys-color-primary);
}

    .footer-support .footer-support__wrapper {
        display: grid;
        grid-template: repeat(3, auto) / 1fr;
        grid-template-areas:
            'content'
            'badges'
            'cta';
        gap: var(--p-space-700);
        place-items: stretch;
    }

        @media (width >= 48rem) {

    .footer-support .footer-support__wrapper {
            grid-template: 1fr auto / 1fr 1fr;
            grid-template-areas:
                'content badges'
                'cta cta';
    }
        }

    .footer-support .footer-support__content {
        display: flex;
        flex-direction: column;
        grid-area: content;
        gap: 2ch;
        font-size: var(--p-font-size-text);
        text-align: center;
    }

        @media (width >= 48rem) {

    .footer-support .footer-support__content {
            place-content: center;
            text-align: start;
    }
        }

    .footer-support .footer-support__badges {
        display: flex;
        grid-area: badges;
        gap: var(--p-space-1000);
        place-content: center;
    }

        :is(.footer-support .footer-support__badges) img {
            width: 90px;
        }

            @media (width >= 48rem) {

        :is(.footer-support .footer-support__badges) img {
                width: 150px;
        }
            }

    .footer-support .footer-support__cta {
        grid-area: cta;
    }
}

@layer components{
.page-section {
    display: flex;
    flex-direction: column;
    gap: var(--p-space-1000);
}

    .page-section.page-section--background {
        background-position: center center;
        background-size: contain;
    }

    .page-section.page-section--block-padding {
        padding-block: var(--p-space-1000);
    }

    .page-section  > h2,.page-section  > h3,.page-section  > h4 {
        font-weight: var(--p-ref-typeface-weight-bold);
        color: var(--p-sys-color-on-background);
        text-align: center;
    }

    .page-section h2 {
        font-size: var(--p-font-size-heading-2);
    }

    .page-section h3 {
        font-size: var(--p-font-size-heading-3);
    }

    .page-section h4 {
        font-size: var(--p-font-size-heading-4);
    }

    .page-section .page-section__header {
        display: flex;
        place-content: center;
        padding-block: var(--p-space-600);
        background: url("/assets/dark_blue_leaf_bg-cec61565.png") center center;
        background-size: cover;
    }

        :is(.page-section .page-section__header) h3 {
            font-size: var(--p-font-size-heading-1);
            color: var(--p-sys-color-on-inverse-surface);
        }

        .page-section__header--light:is(.page-section .page-section__header) h3 {
            color: var(--p-sys-color-on-background);
        }

        .page-section__header--compact:is(.page-section .page-section__header) {
            padding-block: var(--p-space-400);
        }

        .page-section__header--simple:is(.page-section .page-section__header) {
            padding-block: 0;
            background: none;
        }

            .page-section__header--simple:is(.page-section .page-section__header) h3 {
                font-size: var(--p-font-size-heading-2);
                color: var(--p-sys-color-on-background);
            }

        .page-section__header--left:is(.page-section .page-section__header) {
            place-content: start;
        }

        @media (width >= 48rem) {

    .page-section .page-section__header {
            padding-block: var(--p-space-800);
    }
        }

    .page-section .page-section__content {
        display: flex;
        flex-direction: column;
        gap: var(--p-space-400);
    }

        .page-section__content--centered:is(.page-section .page-section__content) {
            align-items: center;
            justify-content: center;
        }

        .page-section__content--block-padding:is(.page-section .page-section__content) {
            padding-block: var(--p-space-1000);
        }

        .page-section__content--block-padding-end:is(.page-section .page-section__content) {
            -webkit-padding-after: var(--p-space-1000);
                    padding-block-end: var(--p-space-1000);
        }

        .page-section__content--inline-padding:is(.page-section .page-section__content) {
            padding-inline: var(--p-space-1000);
        }
}

@layer components{
    .datepicker .datepicker__wrapper {
        display: flex;
        flex-direction: column;
        gap: var(--p-space-600);
    }

    .datepicker .datepicker__title {
        font-size: var(--p-ref-typeface-size-800);
        font-weight: var(--p-ref-typeface-weight-bold);
        color: var(--p-sys-color-primary);
        text-align: center;
    }

.datepicker-legend {
    display: flex;
    gap: var(--p-space-300);
    justify-content: end;
}

    .datepicker-legend .datepicker-legend__item {
        --legend-color: hsl(
            from var(--p-ref-palette-wedgewood) h s calc(l - 13)
        );

        display: flex;
        gap: var(--p-space-100);
        align-items: center;
        font-size: var(--p-ref-typeface-size-300);
        font-weight: var(--p-ref-typeface-weight-medium);
        color: var(--p-sys-color-primary);
    }

        :is(.datepicker-legend .datepicker-legend__item) span {
            inline-size: var(--p-space-600);
            aspect-ratio: 1/1;
            background-color: var(--legend-color);
            border-radius: var(--p-sys-shape-corner-small);
        }

            .today:is(:is(.datepicker-legend .datepicker-legend__item) span) {
                --legend-color: var(--p-ref-palette-regent-st-blue);
            }

            .unavailable:is(:is(.datepicker-legend .datepicker-legend__item) span) {
                --legend-color: hsl(
                    from var(--p-sys-color-background) h s calc(l - 13)
                );
            }

            .selected:is(:is(.datepicker-legend .datepicker-legend__item) span) {
                --legend-color: var(--p-ref-palette-flesh);
            }

            .holiday:is(:is(.datepicker-legend .datepicker-legend__item) span) {
                --legend-color: var(--p-ref-palette-green-vogue);
            }
}

@layer components{
.building-block {
    display: flex;
    flex-direction: column;
    padding: var(--p-space-900);
}

    .building-block.building-block--background {
        background-position: center center;
        background-size: cover;
    }

    .building-block.building-block--rounded {
        border-radius: var(--p-sys-shape-corner-large-increased);
    }

    .building-block.building-block--elevated {
        box-shadow: var(--p-sys-elevation-light-3);
    }
}

@layer components{
.adv-b {
    --p-adv-b-size: 300px;
    --p-adv-b-content-padding: var(--p-space-1200);

    display: grid;
    grid: 1fr / 1fr;
    grid-template-areas: 'shared';
    block-size: var(--p-adv-b-size);
    isolation: isolate;
}

    .adv-b.adv-b--small {
        --p-adv-b-size: 100px;
        --p-adv-b-content-padding: var(--p-space-400);
    }

    .adv-b.adv-b--medium {
        --p-adv-b-size: 200px;
        --p-adv-b-content-padding: var(--p-space-800);
    }

    .adv-b.adv-b--large {
        --p-adv-b-size: 300px;
        --p-adv-b-content-padding: var(--p-space-1200);
    }

    .adv-b .adv-b__image {
        z-index: var(--p-sys-elevation-level0);
        grid-area: shared;
    }

        :is(.adv-b .adv-b__image) img {
            max-block-size: var(--p-adv-b-size);
        }

    .adv-b .adv-b__content {
        z-index: var(--p-sys-elevation-level1);
        display: flex;
        flex-flow: column nowrap;
        grid-area: shared;
        gap: var(--p-space-600);
        align-items: center;
        justify-content: end;
        padding-block: var(--p-adv-b-content-padding);
        text-align: center;
    }

        @media (width >= 48rem) {

    .adv-b .adv-b__content {
            padding-inline: 15% !important;
    }
        }

        :is(.adv-b .adv-b__content) h2 {
            font-size: var(--p-ref-typeface-size-1000);
            font-weight: var(--p-ref-typeface-weight-bold);
            color: var(--p-sys-color-on-surface);
            letter-spacing: var(--p-ref-typeface-tracking-wide);
            -webkit-filter: drop-shadow(var(--p-sys-elevation-light-5));
                    filter: drop-shadow(var(--p-sys-elevation-light-5));
        }
}

@layer components{
.ugly-nav {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

    @media (width >= 48rem) {
.ugly-nav {
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}
    }

    .ugly-nav .ugly-nav__item {
        display: flex;
        place-content: center;
        place-items: center;
        height: 56px;
        font-size: var(--p-ref-typeface-size-350);
        font-weight: var(--p-ref-typeface-weight-semibold);
        border: 3px solid var(--p-sys-color-outline);
    }

        @media (width >= 48rem) {

    .ugly-nav .ugly-nav__item {
            height: 90px;
            font-size: var(--p-ref-typeface-size-500);
    }
        }
}

@layer components{
.search-bar {
    --color-border-search-bar: var(--p-ref-palette-black);
    --border-radius-search-bar: var(--p-sys-shape-corner-small);
    --color-bg-search-bar: var(--p-ref-palette-white);

    width: 100%;
    max-width: 360px;
    margin: var(--p-space-200);
    container-type: inline-size;
    overflow: clip;
    outline: 1px solid var(--color-border-search-bar);
    border-radius: var(--p-sys-shape-corner-small);
    -webkit-filter: drop-shadow(var(--p-sys-elevation-light-3));
            filter: drop-shadow(var(--p-sys-elevation-light-3));
}

    @media (width >= 48rem) {
.search-bar {
        max-width: 920px;
}
    }

    .search-bar .search-bar__wrapper {
        display: grid;
        grid-template: 'date-range' auto 'filters' auto 'buttons' auto / 1fr;
        background: var(--color-bg-search-bar);
    }

        @container (width >= 48rem) {

    .search-bar .search-bar__wrapper {
            grid-template: 1fr 1fr / 1fr 1fr;
            grid-template-areas:
                'date-range date-range'
                'filters buttons';
    }
        }

    .search-bar .search-bar__component {
        display: flex;
        place-content: center;
        place-items: center;
        inline-size: 100%;
        block-size: 100%;
        min-block-size: var(--p-space-1200);
        font-size: var(--p-ref-typeface-size-350);
    }

        :is(.search-bar .search-bar__component) .button {
            height: 100%;
            border: none;
        }
        @container (width < 48rem) {

    .search-bar .search-bar__component:not(:last-child) {
            border-bottom: 1px solid var(--color-border-search-bar);
    }
        }

        @container (width >= 48rem) {

    .search-bar .search-bar__component:not(:last-child) {
            border-right: 1px solid var(--color-border-search-bar);
    }
        }

    .search-bar .search-bar__block {
        display: flex;
        flex-direction: column;
    }
            @container (width < 48rem) {

        :is(.search-bar .search-bar__block):not(:last-of-type) {
                border-bottom: 1px solid var(--color-border-search-bar);
        }
            }

            @container (width >= 48rem) {

        :is(.search-bar .search-bar__block):not(:last-of-type) {
                border-right: 1px solid var(--color-border-search-bar);
        }
            }

    .search-bar .search-bar__filters {
        grid-area: filters;
    }

        @container (width >= 48rem) {

    .search-bar .search-bar__filters {
            flex-direction: row;
    }
        }

    .search-bar .search-bar__data-range,.search-bar .search-bar__buttons {
        flex-direction: row;
    }

        :is(.search-bar .search-bar__data-range,.search-bar .search-bar__buttons) .search-bar__component {
            border-right: 1px solid var(--color-border-search-bar);
            border-bottom: none;
        }

        @container (width >= 48rem) {

    .search-bar .search-bar__data-range,.search-bar .search-bar__buttons {
            border-right: none !important;
            border-bottom: 1px solid var(--color-border-search-bar);
    }
        }

    .search-bar .search-bar__data-range {
        grid-area: date-range;
    }

    .search-bar .search-bar__buttons {
        grid-area: buttons;
    }
        :is(.search-bar .search-bar__resort) .menu {
            border: 1px solid var(--color-border-search-bar);
            border-top-left-radius: 0;
            border-top-right-radius: 0;
            box-shadow: unset;
        }

        .search-bar:has(:is(.search-bar .search-bar__resort) :popover-open) {
            border-bottom-left-radius: 0;
        }

    .search-bar .search-bar__box {
        display: flex;
        flex-direction: column;
        gap: var(--p-space-400);
        padding: var(--p-space-300) var(--p-space-600);
        background: var(--p-sys-color-background);
        border: 1px solid var(--color-border-search-bar);
        border-bottom-right-radius: var(--p-sys-shape-corner-small);
        border-bottom-left-radius: var(--p-sys-shape-corner-small);
    }

        :is(.search-bar .search-bar__box) input {
            width: 8ch;
            padding: var(--p-space-100);
            text-align: center;
            outline: none;
            border: 1px solid var(--p-sys-color-secondary);
            border-radius: var(--p-sys-shape-corner-small);
        }
}

@layer components{
.property-card {
    display: flex;
    place-content: center;
    container: property-card / inline-size;
}

    .property-card .property-card__container {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: var(--p-space-400);
        width: 23.75rem; /* 380px */
        padding: var(--p-space-400);
        border: 1px solid var(--p-sys-color-outline);
        border-radius: var(--p-sys-shape-corner-large-increased);
    }

    .property-card .property-card__header {
        place-content: center;
        place-items: center;
    }

        :is(.property-card .property-card__header) .property-card__favorite {
            float: right;
        }

        :is(.property-card .property-card__header) .property-card__title {
            font-size: var(--p-ref-typeface-size-500);
            font-weight: var(--p-ref-typeface-weight-bold);
            line-height: 1.5;
        }

        :is(.property-card .property-card__header) .property-card__code {
            font-style: italic;
            font-weight: var(--p-ref-typeface-weight-semibold);
            text-transform: uppercase;
        }

    .property-card .property-card__pictures {
        position: relative;
        display: grid;
        grid-template: 1fr auto / 1fr 1fr 1fr;
        gap: var(--p-space-200);
        max-width: 23.75rem;
    }

        :is(.property-card .property-card__pictures) li {
            position: relative;
            overflow: clip;
            border-radius: var(--p-sys-shape-corner);
        }

            :is(:is(.property-card .property-card__pictures) li) img {
                height: 90px;
            }

            :is(:is(.property-card .property-card__pictures) li):first-child {
                grid-row: 1;
                grid-column: 1 / 4;
            }

                :is(:is(.property-card .property-card__pictures) li):first-child img {
                    height: 180px;
                }

        :is(.property-card .property-card__pictures) .property-card__rating {
            position: absolute;
            top: var(--p-space-200);
            right: var(--p-space-200);
            z-index: var(--p-sys-elevation-level1);
            padding: var(--p-space-050) var(--p-space-200);
            font-size: var(--p-ref-typeface-size-300);
            text-transform: uppercase;
            background: hsl(from var(--p-ref-palette-black) h s l / 0.35);
            border-radius: var(--p-sys-shape-corner-large-increased);
            box-shadow: var(--p-sys-elevation-light-3);
            -webkit-backdrop-filter: blur(2px) opacity(0.75);
                    backdrop-filter: blur(2px) opacity(0.75);
        }

        :is(.property-card .property-card__pictures) .property-card__tag {
            position: absolute;
            top: var(--p-space-200);
            left: var(--p-space-200);
            z-index: var(--p-sys-elevation-level1);
            padding: var(--p-space-150) var(--p-space-200);
            font-size: var(--p-ref-typeface-size-400);
            font-style: italic;
            font-weight: var(--p-ref-typeface-weight-semibold);
            text-transform: uppercase;
            background: var(--p-sys-color-emphasis-container);
            border-radius: var(--p-sys-shape-corner-small);
            box-shadow: var(--p-sys-elevation-light-2);
        }

    .property-card .property-card__amenities {
        display: flex;
        justify-content: space-between;
        padding-inline: var(--p-space-600);
        -webkit-user-select: none;
           -moz-user-select: none;
            -ms-user-select: none;
                user-select: none;
    }

        :is(.property-card .property-card__amenities) .property-card__amenity {
            display: flex;
            gap: var(--p-space-200);
            align-items: center;
            font-weight: var(--p-ref-typeface-weight-semibold);
        }

            :is(:is(.property-card .property-card__amenities) .property-card__amenity) img {
                width: 25px;
                height: 25px;
            }

    .property-card .property-card__content {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: var(--p-space-400);
        text-align: center;
    }

    .property-card .property-card__marks {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--p-space-500);
        justify-content: space-between;
        font-size: var(--p-ref-typeface-size-300);
        font-weight: var(--p-ref-typeface-weight-semibold);
    }

        :is(.property-card .property-card__marks) .property-card__mark {
            padding: var(--p-space-200);
        }

        :is(.property-card .property-card__marks) .property-card__resort {
            margin-left: calc(var(--p-space-400) * -1);
            background: var(--p-sys-color-surface-dim);
            border-top-right-radius: var(--p-sys-shape-corner-small);
            border-bottom-right-radius: var(--p-sys-shape-corner-small);
        }

        :is(.property-card .property-card__marks) .property-card__type {
            margin-right: calc(var(--p-space-400) * -1);
            background: var(--p-sys-color-emphasis-container-variant);
            border-top-left-radius: var(--p-sys-shape-corner-small);
            border-bottom-left-radius: var(--p-sys-shape-corner-small);
        }

    .property-card .property-card__price {
        font-size: var(--p-ref-typeface-size-500);
        font-weight: var(--p-ref-typeface-weight-regular);
    }

    .property-card .property-card__button {
        margin-inline: var(--p-space-500);
    }
}

/* UTILITIES STYLES */

@layer utilities{
.visually-hidden:not(:focus, :focus-within) {
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    border: 0 !important;
    clip: rect(0, 0, 0, 0) !important;

    /* Fix for positioned table caption that could become anonymous cells */
}
    .visually-hidden:not(:focus,:focus-within):not(caption) {
        position: absolute !important;
    }

    /* Fix to prevent overflowing children to become focusable */
    .visually-hidden:not(:focus,:focus-within) * {
        overflow: hidden !important;
    }
}

@layer utilities{
.container {
    --container-max-width: unset;
    --container-padding: var(--p-space-200);

    width: 100%;
    max-width: var(--container-max-width);
    padding-inline: var(--container-padding);
    margin-inline: auto;
}

    @media (width >= 40rem) {
.container {
        --container-max-width: var(--p-breakpoints-sm);
}
    }

    @media (width >= 48rem) {
.container {
        --container-padding: var(--p-space-400);
        --container-max-width: var(--p-breakpoints-md);
}
    }

    @media (width >= 64rem) {
.container {
        --container-padding: var(--p-space-800);
        --container-max-width: var(--p-breakpoints-lg);
}
    }

    @media (width >= 80rem) {
.container {
        --container-max-width: var(--p-breakpoints-xl);
}
    }
}

@layer utilities{
.rotate-180 {
    transform: rotate(180deg);
}
}

@layer utilities{

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

.text-bold {
    font-weight: var(--p-ref-typeface-weight-bold);
}

.italic {
    font-style: italic;
}

.float-right {
    float: right;
}

.display-large {
    font-size: var(--p-ref-typeface-size-1400);
    font-weight: var(--p-ref-typeface-weight-regular);
    line-height: var(--p-ref-typeface-leading-tight);
    letter-spacing: var(--p-ref-typeface-tracking-tight);
}

.display-medium {
    font-size: var(--p-ref-typeface-size-1100);
    font-weight: var(--p-ref-typeface-weight-regular);
    line-height: var(--p-ref-typeface-leading-normal);
    letter-spacing: var(--p-ref-typeface-tracking-normal);
}

.display-small {
    font-size: var(--p-ref-typeface-size-900);
    font-weight: var(--p-ref-typeface-weight-regular);
    line-height: var(--p-ref-typeface-leading-normal);
    letter-spacing: var(--p-ref-typeface-tracking-normal);
}
}

@layer utilities{
:where([popover]) {
    position: fixed;
    top: anchor(bottom);
    left: anchor(center);
    translate: -50% 0;
}

    :where([popover]):not(:popover-open) {
        display: none;
    }
}

@layer utilities{
.prose {
    --p-prose-max-width: 65ch;

    /* Colors */
    --p-prose-color-hr: var(--p-sys-color-outline-variant);
    --p-prose-color-text: var(--p-sys-color-on-background);
    --p-prose-color-text-lead: var(--p-sys-color-on-background);
    --p-prose-color-text-bold: var(--p-sys-color-on-background);
    --p-prose-color-text-heading: var(--p-sys-color-on-background);

    /* Links */
    --p-prose-link-color: var(--p-sys-color-on-background);
    --p-prose-link-color-hover: var(--p-sys-color-emphasis);

    /* Lists */
    --p-prose-list-counters: var(--p-sys-color-on-background);
    --p-prose-list-bullets: var(--p-sys-color-on-background);

    /* Quote */
    --p-prose-color-quote-text: var(--p-sys-color-on-background);
    --p-prose-color-quote-border: var(--p-sys-color-on-background);

    max-width: var(--p-prose-max-width);
    font-size: var(--p-ref-typeface-size-400);
    line-height: 1.2;
    color: var(--p-prose-color-text);
    text-wrap-style: pretty;
}

    .prose.prose--large {
        max-width: 85ch;
    }

    .prose p {
        margin-block: var(--p-space-500);
    }

        :is(.prose p):first-child {
            -webkit-margin-before: 0;
                    margin-block-start: 0;
        }

    .prose [class~='lead'] {
        margin-block: var(--p-space-600);
        font-size: var(--p-ref-typeface-size-500);
        line-height: 2;
        color: var(--p-prose-color-text-lead);
    }

    .prose strong {
        font-weight: var(--p-ref-typeface-weight-semibold);
        color: var(--p-prose-color-text-bold);
    }

        * > :is(.prose strong) {
            color: inherit;
        }

    .prose a:not(.button) {
        font-weight: var(--p-ref-typeface-weight-medium);
        color: var(--p-prose-link-color);
        text-decoration: underline;
    }

        :is(.prose a:not(.button)):hover {
            color: var(--p-prose-link-color-hover);
        }

    .prose ol,.prose ul {
        list-style-position: inside;
    }

    .prose ol {
        list-style-type: decimal;
    }

        [type='A']:is(.prose ol) {
            list-style-type: upper-alpha;
        }

        [type='a']:is(.prose ol) {
            list-style-type: lower-alpha;
        }

        [type='I']:is(.prose ol) {
            list-style-type: upper-roman;
        }

        [type='i']:is(.prose ol) {
            list-style-type: lower-roman;
        }

        :is(.prose ol)  > li::marker {
            font-weight: var(--p-ref-typeface-weight-regular);
            color: var(--p-prose-list-counters);
        }

    .prose ul {
        list-style-type: disc;
    }

        :is(.prose ul)  > li::marker {
            color: var(--p-prose-list-bullets);
        }

    .prose dt {
        color: var(--p-prose-color-text-heading);
    }

    .prose hr {
        border-color: var(--p-prose-color-hr);
        border-top-width: 1px;
    }

    .prose blockquote {
        -webkit-padding-start: var(--p-space-500);
           -moz-padding-start: var(--p-space-500);
                padding-inline-start: var(--p-space-500);
        margin-block: var(--p-space-800);
        font-style: italic;
        font-weight: var(--p-ref-typeface-weight-medium);
        color: var(--p-prose-color-quote-text);
        quotes: '\201C' '\201D' '\2018' '\2019';
        border-inline-start-color: var(--p-prose-color-quote-border);
        border-inline-start-width: var(--p-ref-spacing);
    }

        :is(.prose blockquote) p:first-of-type::before {
            content: open-quote;
        }

        :is(.prose blockquote) p:last-of-type::after {
            content: close-quote;
        }

    .prose h1,.prose h2,.prose h3,.prose h4 {
        color: var(--p-prose-color-text-heading);
    }

        :is(.prose h1,.prose h2,.prose h3,.prose h4) strong {
            color: inherit;
        }

    .prose h1 {
        -webkit-margin-after: var(--p-ref-typeface-size-350);
                margin-block-end: var(--p-ref-typeface-size-350);
        font-size: var(--p-ref-typeface-size-900);
        font-weight: var(--p-ref-typeface-weight-extrabold);
        line-height: 1.15;
    }

        :is(.prose h1) strong {
            font-weight: var(--p-ref-typeface-weight-black);
        }

    .prose h2 {
        margin-block: 2rem 1rem;
        font-size: var(--p-ref-typeface-size-600);
        font-weight: var(--p-ref-typeface-weight-bold);
        line-height: 1.35;
    }

        :is(.prose h2) strong {
            font-weight: var(--p-ref-typeface-weight-extrabold);
        }

    .prose h3 {
        margin-block: 1.6rem 0.6rem;
        font-size: var(--p-ref-typeface-size-500);
        font-weight: var(--p-ref-typeface-weight-semibold);
        line-height: 1.6;
    }

        :is(.prose h3) strong {
            font-weight: var(--p-ref-typeface-weight-bold);
        }

    .prose h4 {
        margin-block: 1.5rem 0.5rem;
        font-weight: var(--p-ref-typeface-weight-extrabold);
        line-height: 1.2;
    }

        :is(.prose h4) strong {
            font-weight: var(--p-ref-typeface-weight-black);
        }
}