Postcss generates invalid css from tailwind @apply #1893

justingolden21 · 2023-10-24T23:41:04Z

I'm getting styles generated that look like this:

     {
      font-size: 6.625rem;
    }

    .lg\:h1 {
      font-size: 4.875rem;
    }

     {
      font-size: 0.875rem;
    }

This is invalid CSS and breaks in websites that use CSS validators such asWordPress for example.

full code

app.postcss

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
@import "base/typography.postcss";

typography.postcss

@layer base {
  /* Font smoothing */
  * {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  /* Font families and weights */

  .h-xl,
  .h-lg,
  .h1,
  .h2,
  .h3,
  .h4,
  .h5,
  .h6,
  .h-sm {
    @apply font-serif font-normal;
  }

  .p-xxl,
  .p-xl,
  .p-lg,
  .p,
  .p-sm,
  .p-xs,
  .p-xxs {
    @apply font-sans font-light;
  }

  .subheading {
    @apply font-sans font-normal;
  }

  /* Mobile */

  /* Type scale */

  .h-xl {
    @apply text-8xl;
  }
  .h-lg {
    @apply text-8xl;
  }
  .h1 {
    @apply text-8xl;
  }
  .h2 {
    /* technically should be 2.625rem not 2.5rem */
    @apply text-7xl;
  }
  .h3 {
    @apply text-6xl;
  }
  .h4 {
    @apply text-5xl;
  }
  .h5 {
    @apply text-3xl;
  }
  .h6 {
    @apply text-xl;
  }
  .h-sm {
    @apply text-md;
  }

  .p-xxl {
    @apply text-2xl tracking-wider;
  }
  .p-xl {
    @apply text-xl tracking-wider;
  }
  .p-lg {
    @apply text-lg tracking-wider;
  }
  .p {
    @apply text-md tracking-widest;
  }
  .p-sm {
    @apply text-xs tracking-widest;
  }
  .p-xs {
    @apply text-xs tracking-widest;
  }
  .p-xxs {
    @apply text-xxs tracking-widest;
  }

  /* Leading */

  .h-xl {
    line-height: 1.1;
  }
  .h-lg {
    line-height: 1.1;
  }
  .h1 {
    line-height: 1.1;
  }
  .h2 {
    line-height: 1.12;
  }
  .h3 {
    line-height: 1.12;
  }
  .h4 {
    line-height: 1.14;
  }
  .h5 {
    line-height: 1.16;
  }
  .h6 {
    line-height: 1.18;
  }
  .h-sm {
    line-height: 1.2;
  }

  .p-xxl {
    line-height: 1.4;
  }
  .p-xl {
    line-height: 1.4;
  }
  .p-lg {
    line-height: 1.4;
  }
  .p {
    line-height: 1.4;
  }
  .p-sm {
    line-height: 1.4;
  }
  .p-xs {
    line-height: 1.4;
  }
  .p-xxs {
    line-height: 1.4;
  }

  /* Tablet */
  @screen md {
    /* Type scale */

	/* Note: tracking would go here but changing letter-spacing prevents
	ligatures from appearing, so we don't use custom tracking.
	This is only relevant for our heading font (Tobias). */

    .h-xl {
      @apply text-10xl;
    }
    .h-lg {
      @apply text-10xl;
    }
    .h1 {
      @apply text-9xl;
    }
    .h2 {
      @apply text-8xl;
    }
    .h3 {
      /* technically should be 2.625rem not 2.5rem */
      @apply text-7xl;
    }
    .h4 {
      @apply text-6xl;
    }
    .h5 {
      @apply text-4xl;
    }
    .h6 {
      @apply text-2xl;
    }
    .h-sm {
      @apply text-lg;
    }

    .p-xxl {
      @apply text-4xl tracking-wide;
    }
    .p-xl {
      @apply text-2xl tracking-wider;
    }
    .p-lg {
      @apply text-xl tracking-wider;
    }
    .p {
      @apply text-lg tracking-wider;
    }
    .p-sm {
      @apply text-md tracking-widest;
    }
    .p-xs {
      @apply text-sm tracking-widest;
    }
    .p-xxs {
      @apply text-xs tracking-widest;
    }

    /* Leading */

    .h-xl {
      line-height: 1.04;
    }
    .h-lg {
      line-height: 1.06;
    }
    .h1 {
      line-height: 1.06;
    }
    .h2 {
      line-height: 1.06;
    }
    .h3 {
      line-height: 1.08;
    }
    .h4 {
      line-height: 1.1;
    }
    .h5 {
      line-height: 1.16;
    }
    .h6 {
      line-height: 1.16;
    }
    .h-sm {
      line-height: 1.16;
    }

    .p-xxl {
      line-height: 1.4;
    }
    .p-xl {
      line-height: 1.5;
    }
    .p-lg {
      line-height: 1.5;
    }
    .p {
      line-height: 1.5;
    }
    .p-sm {
      line-height: 1.5;
    }
    .p-xs {
      line-height: 1.5;
    }
    .p-xxs {
      line-height: 1.5;
    }
  }

  /* Desktop */
  @screen lg {
    /* Type scale */

    .h-xl {
      @apply text-12xl;
    }
    .h-lg {
      @apply text-11xl;
    }
    .h1 {
      @apply text-10xl;
    }
    .h2 {
      @apply text-9xl;
    }
    .h3 {
      @apply text-8xl;
    }
    .h4 {
      @apply text-7xl;
    }
    .h5 {
      @apply text-5xl;
    }
    .h6 {
      @apply text-4xl;
    }
    .h-sm {
      @apply text-2xl;
    }

    .p-xxl {
      @apply text-5xl;
    }
    .p-xl {
      @apply text-2xl;
    }
    .p-lg {
      @apply text-xl;
    }
    .p {
      @apply text-lg;
    }
    .p-sm {
      @apply text-md;
    }
    .p-xs {
      @apply text-sm;
    }
    .p-xxs {
      @apply text-xs;
    }

    /* Desktop leading and tracking inherited from tablet leading */

    /* Fallback max widths */
    .h-xl,
    .h-lg,
    .h1,
    .h2,
    .h3,
    .h4,
    .h5,
    .h6,
    .h-sm,
    .p-xxl,
    .p-xl,
    .p-lg,
    .p,
    .p-sm,
    .p-xs,
    .p-xxs,
    .subheading {
      max-width: 64rem;
    }
  }
}

justingolden21 · 2023-10-24T23:41:28Z

For example,

 {
  font-size: 4.875rem;
}

is output below. Note that the code below is quite large and the markdown formatting is not working.

output

output app.css ```css /* Loads all CSS in the project */

/* ! tailwindcss v3.1.4 | MIT License | https://tailwindcss.com */

/*

Prevent padding and border from affecting element width. (Which technique for setting box-sizing: border-box? jensimmons/cssremedy#4)
Allow adding a border to an element by just adding a border-width. ([0.2] Support cascading border colors and styles tailwindlabs/tailwindcss#116)
*/

,
::before,
::after {
box-sizing: border-box;
/ 1 /
border-width: 0;
/ 2 /
border-style: solid;
/ 2 /
border-color: currentColor;
/ 2 */
}

::before,
::after {
--tw-content: '';
}

/*

Use a consistent sensible line-height in all browsers.
Prevent adjustments of font size after orientation changes in iOS.
Use a more readable tab size.
Use the user's configured sans font-family by default.
*/

html {
line-height: 1.5;
/* 1 /
-webkit-text-size-adjust: 100%;
/ 2 /
-moz-tab-size: 4;
/ 3 /
-o-tab-size: 4;
tab-size: 4;
/ 3 /
font-family: Founders Grotesk, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
/ 4 */
}

/*

Remove the margin in all browsers.
Inherit line-height from html so users can set them as a class directly on the html element.
*/

body {
margin: 0;
/* 1 /
line-height: inherit;
/ 2 */
}

/*

Add the correct height in Firefox.
Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
Ensure horizontal rules are visible by default.
*/

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;
}

/*
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;
}

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

b,
strong {
font-weight: bolder;
}

/*

Use the user's configured mono font family by default.
Correct the odd em font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
/* 1 /
font-size: 1em;
/ 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 {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}

sub {
bottom: -0.25em;
}

sup {
top: -0.5em;
}

/*

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)
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)
Remove gaps between table borders by default.
*/

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

/*

Change the font styles in all browsers.
Remove the margin in Firefox and Safari.
Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
font-family: inherit;
/* 1 /
font-size: 100%;
/ 1 /
font-weight: inherit;
/ 1 /
line-height: inherit;
/ 1 /
color: inherit;
/ 1 /
margin: 0;
/ 2 /
padding: 0;
/ 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
text-transform: none;
}

/*

Correct the inability to style clickable types in iOS and Safari.
Remove default button styles.
*/

button,
[type='button'],
[type='reset'],
[type='submit'] {
-webkit-appearance: button;
/* 1 /
background-color: transparent;
/ 2 /
background-image: none;
/ 2 */
}

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

:-moz-focusring {
outline: auto;
}

/*
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;
}

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

progress {
vertical-align: baseline;
}

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

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

/*

Correct the odd appearance in Chrome and Safari.
Correct the outline style in Safari.
*/

[type='search'] {
-webkit-appearance: textfield;
/* 1 /
outline-offset: -2px;
/ 2 */
}

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

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

/*

Correct the inability to style clickable types in iOS and Safari.
Change font properties to inherit in Safari.
*/

::-webkit-file-upload-button {
-webkit-appearance: button;
/* 1 /
font: inherit;
/ 2 */
}

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

summary {
display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
margin: 0;
}

fieldset {
margin: 0;
padding: 0;
}

legend {
padding: 0;
}

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

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
resize: vertical;
}

/*

Reset the default placeholder opacity in Firefox. (input text placeholder-opacity-100 in Firefox looks lighter tailwindlabs/tailwindcss#3300)
Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
opacity: 1;
/* 1 /
color: #9ca3af;
/ 2 */
}

input::placeholder,
textarea::placeholder {
opacity: 1;
/* 1 /
color: #9ca3af;
/ 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/

:disabled {
cursor: default;
}

/*

Make replaced elements display: block by default. (Fix the tiny gap under replaced elements that shows by default jensimmons/cssremedy#14)
Add vertical-align: middle to align replaced elements more sensibly by default. (Fix the tiny gap under replaced elements that shows by default jensimmons/cssremedy#14 (comment))
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. (jensimmons/cssremedy#14)
*/

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

/* Font smoothing */

{
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

/* Font families and weights */

.h-xl,
.h-lg,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
.h-sm {
font-family: Tobias, ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
font-weight: 400;
}

.p-xxl,
.p-xl,
.p-lg,
.p,
.p-sm,
.p-xs,
.p-xxs {
font-family: Founders Grotesk, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
font-weight: 300;
}

.subheading {
font-family: Founders Grotesk, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
font-weight: 400;
}

/* Mobile */

/* Type scale */

.h-xl {
font-size: 3.125rem;
}

.h-lg {
font-size: 3.125rem;
}

.h1 {
font-size: 3.125rem;
}

.h2 {
/* technically should be 2.625rem not 2.5rem */
font-size: 2.5rem;
}

.h3 {
font-size: 2.25rem;
}

.h4 {
font-size: 2rem;
}

.h5 {
font-size: 1.625rem;
}

.h6 {
font-size: 1.375rem;
}

.h-sm {
font-size: 1.125rem;
}

.p-xxl {
font-size: 1.5rem;
letter-spacing: 0.02em;
}

.p-xl {
font-size: 1.375rem;
letter-spacing: 0.02em;
}

.p-lg {
font-size: 1.25rem;
letter-spacing: 0.02em;
}

.p {
font-size: 1.125rem;
letter-spacing: 0.03em;
}

.p-sm {
font-size: 0.875rem;
letter-spacing: 0.03em;
}

.p-xs {
font-size: 0.875rem;
letter-spacing: 0.03em;
}

.p-xxs {
font-size: 0.75rem;
letter-spacing: 0.03em;
}

/* Leading */

.h-xl {
line-height: 1.1;
}

.h-lg {
line-height: 1.1;
}

.h1 {
line-height: 1.1;
}

.h2 {
line-height: 1.12;
}

.h3 {
line-height: 1.12;
}

.h4 {
line-height: 1.14;
}

.h5 {
line-height: 1.16;
}

.h6 {
line-height: 1.18;
}

.h-sm {
line-height: 1.2;
}

.p-xxl {
line-height: 1.4;
}

.p-xl {
line-height: 1.4;
}

.p-lg {
line-height: 1.4;
}

.p {
line-height: 1.4;
}

.p-sm {
line-height: 1.4;
}

.p-xs {
line-height: 1.4;
}

.p-xxs {
line-height: 1.4;
}

/* Tablet */

@media (min-width: 768px) {
/* Type scale */

/* Note: tracking would go here but changing letter-spacing prevents
ligatures from appearing, so we don't use custom tracking.
This is only relevant for our heading font (Tobias). */

.h-xl {
font-size: 4.875rem;
}

.h-lg {
font-size: 4.875rem;
}

.h1 {
font-size: 3.875rem;
}

.h2 {
font-size: 3.125rem;
}

.h3 {
/* technically should be 2.625rem not 2.5rem */
font-size: 2.5rem;
}

.h4 {
font-size: 2.25rem;
}

.h5 {
font-size: 1.75rem;
}

.h6 {
font-size: 1.5rem;
}

.h-sm {
font-size: 1.25rem;
}

.p-xxl {
font-size: 1.75rem;
letter-spacing: 0.01em;
}

.p-xl {
font-size: 1.5rem;
letter-spacing: 0.02em;
}

.p-lg {
font-size: 1.375rem;
letter-spacing: 0.02em;
}

.p {
font-size: 1.25rem;
letter-spacing: 0.02em;
}

.p-sm {
font-size: 1.125rem;
letter-spacing: 0.03em;
}

.p-xs {
font-size: 1rem;
letter-spacing: 0.03em;
}

.p-xxs {
font-size: 0.875rem;
letter-spacing: 0.03em;
}

/* Leading */

.h-xl {
line-height: 1.04;
}

.h-lg {
line-height: 1.06;
}

.h1 {
line-height: 1.06;
}

.h2 {
line-height: 1.06;
}

.h3 {
line-height: 1.08;
}

.h4 {
line-height: 1.1;
}

.h5 {
line-height: 1.16;
}

.h6 {
line-height: 1.16;
}

.h-sm {
line-height: 1.16;
}

.p-xxl {
line-height: 1.4;
}

.p-xl {
line-height: 1.5;
}

.p-lg {
line-height: 1.5;
}

.p {
line-height: 1.5;
}

.p-sm {
line-height: 1.5;
}

.p-xs {
line-height: 1.5;
}

.p-xxs {
line-height: 1.5;
}
}

/* Desktop */

@media (min-width: 1024px) {
/* Type scale */

.h-xl {
font-size: 7.75rem;
}

.h-lg {
font-size: 6.625rem;
}

.h1 {
font-size: 4.875rem;
}

.h2 {
font-size: 3.875rem;
}

.h3 {
font-size: 3.125rem;
}

.h4 {
font-size: 2.5rem;
}

.h5 {
font-size: 2rem;
}

.h6 {
font-size: 1.75rem;
}

.h-sm {
font-size: 1.5rem;
}

.p-xxl {
font-size: 2rem;
}

.p-xl {
font-size: 1.5rem;
}

.p-lg {
font-size: 1.375rem;
}

.p {
font-size: 1.25rem;
}

.p-sm {
font-size: 1.125rem;
}

.p-xs {
font-size: 1rem;
}

.p-xxs {
font-size: 0.875rem;
}

/* Desktop leading and tracking inherited from tablet leading */

/* Fallback max widths */

.h-xl,
.h-lg,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
.h-sm,
.p-xxl,
.p-xl,
.p-lg,
.p,
.p-sm,
.p-xs,
.p-xxs,
.subheading {
max-width: 64rem;
}
}

*, ::before, ::after {
--tw-border-spacing-x: 0;
--tw-border-spacing-y: 0;
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-pan-x: ;
--tw-pan-y: ;
--tw-pinch-zoom: ;
--tw-scroll-snap-strictness: proximity;
--tw-ordinal: ;
--tw-slashed-zero: ;
--tw-numeric-figure: ;
--tw-numeric-spacing: ;
--tw-numeric-fraction: ;
--tw-ring-inset: ;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: rgb(59 130 246 / 0.5);
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
--tw-blur: ;
--tw-brightness: ;
--tw-contrast: ;
--tw-grayscale: ;
--tw-hue-rotate: ;
--tw-invert: ;
--tw-saturate: ;
--tw-sepia: ;
--tw-drop-shadow: ;
--tw-backdrop-blur: ;
--tw-backdrop-brightness: ;
--tw-backdrop-contrast: ;
--tw-backdrop-grayscale: ;
--tw-backdrop-hue-rotate: ;
--tw-backdrop-invert: ;
--tw-backdrop-opacity: ;
--tw-backdrop-saturate: ;
--tw-backdrop-sepia: ;
}

::backdrop {
--tw-border-spacing-x: 0;
--tw-border-spacing-y: 0;
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-pan-x: ;
--tw-pan-y: ;
--tw-pinch-zoom: ;
--tw-scroll-snap-strictness: proximity;
--tw-ordinal: ;
--tw-slashed-zero: ;
--tw-numeric-figure: ;
--tw-numeric-spacing: ;
--tw-numeric-fraction: ;
--tw-ring-inset: ;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: rgb(59 130 246 / 0.5);
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
--tw-blur: ;
--tw-brightness: ;
--tw-contrast: ;
--tw-grayscale: ;
--tw-hue-rotate: ;
--tw-invert: ;
--tw-saturate: ;
--tw-sepia: ;
--tw-drop-shadow: ;
--tw-backdrop-blur: ;
--tw-backdrop-brightness: ;
--tw-backdrop-contrast: ;
--tw-backdrop-grayscale: ;
--tw-backdrop-hue-rotate: ;
--tw-backdrop-invert: ;
--tw-backdrop-opacity: ;
--tw-backdrop-saturate: ;
--tw-backdrop-sepia: ;
}

.container {
width: 100%;
margin-right: auto;
margin-left: auto;
padding-right: 16px;
padding-left: 16px;
}

@media (min-width: 640px) {
.container {
max-width: 640px;
padding-right: 16px;
padding-left: 16px;
}
}

@media (min-width: 768px) {
.container {
max-width: 768px;
padding-right: 18px;
padding-left: 18px;
}
}

@media (min-width: 1024px) {
.container {
max-width: 1024px;
padding-right: 40px;
padding-left: 40px;
}
}

@media (min-width: 1280px) {
.container {
max-width: 1280px;
padding-right: 48px;
padding-left: 48px;
}
}

@media (min-width: 1440px) {
.container {
max-width: 1440px;
padding-right: 48px;
padding-left: 48px;
}
}

@media (min-width: 1600px) {
.container {
max-width: 1600px;
padding-right: 60px;
padding-left: 60px;
}
}

.pointer-events-none {
pointer-events: none;
}

.visible {
visibility: visible;
}

.invisible {
visibility: hidden;
}

.static {
position: static;
}

.fixed {
position: fixed;
}

.absolute {
position: absolute;
}

.relative {
position: relative;
}

.sticky {
position: sticky;
}

.inset-0 {
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
}

.top-0 {
top: 0px;
}

.bottom-0 {
bottom: 0px;
}

.right-0 {
right: 0px;
}

.top-1/2 {
top: 50%;
}

.left-0 {
left: 0px;
}

.-top-0.5 {
top: -0.125rem;
}

.-top-0 {
top: -0px;
}

.top-2 {
top: 0.5rem;
}

.right-[50%] {
right: 50%;
}

.bottom-12 {
bottom: 3rem;
}

.-top-px {
top: -1px;
}

.top-[10vh] {
top: 10vh;
}

.!top-2 {
top: 0.5rem !important;
}

.z-[15] {
z-index: 15;
}

.-z-10 {
z-index: -10;
}

.z-20 {
z-index: 20;
}

.-z-20 {
z-index: -20;
}

.z-0 {
z-index: 0;
}

.z-10 {
z-index: 10;
}

.-z-[1] {
z-index: -1;
}

.z-30 {
z-index: 30;
}

.order-1 {
order: 1;
}

.order-2 {
order: 2;
}

.col-span-3 {
grid-column: span 3 / span 3;
}

.col-span-4 {
grid-column: span 4 / span 4;
}

.col-span-full {
grid-column: 1 / -1;
}

.col-span-1 {
grid-column: span 1 / span 1;
}

.col-span-2 {
grid-column: span 2 / span 2;
}

.row-span-2 {
grid-row: span 2 / span 2;
}

.float-right {
float: right;
}

.m-auto {
margin: auto;
}

.m-6 {
margin: 1.5rem;
}

.mx-auto {
margin-left: auto;
margin-right: auto;
}

.my-6 {
margin-top: 1.5rem;
margin-bottom: 1.5rem;
}

.my-10 {
margin-top: 2.5rem;
margin-bottom: 2.5rem;
}

.my-8 {
margin-top: 2rem;
margin-bottom: 2rem;
}

.my-auto {
margin-top: auto;
margin-bottom: auto;
}

.my-4 {
margin-top: 1rem;
margin-bottom: 1rem;
}

.my-12 {
margin-top: 3rem;
margin-bottom: 3rem;
}

.my-3 {
margin-top: 0.75rem;
margin-bottom: 0.75rem;
}

.mx-2 {
margin-left: 0.5rem;
margin-right: 0.5rem;
}

.my-16 {
margin-top: 4rem;
margin-bottom: 4rem;
}

.my-40 {
margin-top: 10rem;
margin-bottom: 10rem;
}

.mx-20 {
margin-left: 5rem;
margin-right: 5rem;
}

.my-2 {
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}

.mb-6 {
margin-bottom: 1.5rem;
}

.mb-4 {
margin-bottom: 1rem;
}

.mt-10 {
margin-top: 2.5rem;
}

.-mb-20 {
margin-bottom: -5rem;
}

.mt-6 {
margin-top: 1.5rem;
}

.mb-3 {
margin-bottom: 0.75rem;
}

.mr-2 {
margin-right: 0.5rem;
}

.mb-2 {
margin-bottom: 0.5rem;
}

.mr-4 {
margin-right: 1rem;
}

.mb-10 {
margin-bottom: 2.5rem;
}

.mt-4 {
margin-top: 1rem;
}

.mb-[120px] {
margin-bottom: 120px;
}

.mt-8 {
margin-top: 2rem;
}

.mb-8 {
margin-bottom: 2rem;
}

.mr-16 {
margin-right: 4rem;
}

.mt-20 {
margin-top: 5rem;
}

.mb-16 {
margin-bottom: 4rem;
}

.mr-9 {
margin-right: 2.25rem;
}

.mb-12 {
margin-bottom: 3rem;
}

.ml-9 {
margin-left: 2.25rem;
}

.mb-20 {
margin-bottom: 5rem;
}

.ml-8 {
margin-left: 2rem;
}

.mb-1 {
margin-bottom: 0.25rem;
}

.-mb-32 {
margin-bottom: -8rem;
}

.mr-1 {
margin-right: 0.25rem;
}

.mt-1 {
margin-top: 0.25rem;
}

.mt-12 {
margin-top: 3rem;
}

.mt-[180px] {
margin-top: 180px;
}

.mb-[100px] {
margin-bottom: 100px;
}

.mr-10 {
margin-right: 2.5rem;
}

.mt-[11.25rem] {
margin-top: 11.25rem;
}

.mb-[15rem] {
margin-bottom: 15rem;
}

.mt-5 {
margin-top: 1.25rem;
}

.-mt-14 {
margin-top: -3.5rem;
}

.mt-2 {
margin-top: 0.5rem;
}

.ml-4 {
margin-left: 1rem;
}

.mt-16 {
margin-top: 4rem;
}

.mb-0 {
margin-bottom: 0px;
}

.ml-1 {
margin-left: 0.25rem;
}

.mr-3 {
margin-right: 0.75rem;
}

.mt-0 {
margin-top: 0px;
}

.-mb-[42vmin] {
margin-bottom: -42vmin;
}

.-mr-px {
margin-right: -1px;
}

.mt-0.5 {
margin-top: 0.125rem;
}

.-mb-[10px] {
margin-bottom: -10px;
}

.-mt-[60vmin] {
margin-top: -60vmin;
}

.ml-2 {
margin-left: 0.5rem;
}

.mr-6 {
margin-right: 1.5rem;
}

.ml-16 {
margin-left: 4rem;
}

.mb-1.5 {
margin-bottom: 0.375rem;
}

.mt-px {
margin-top: 1px;
}

.mr-2.5 {
margin-right: 0.625rem;
}

.mb-[60px] {
margin-bottom: 60px;
}

.mr-8 {
margin-right: 2rem;
}

.mt-64 {
margin-top: 16rem;
}

.mb-40 {
margin-bottom: 10rem;
}

.ml-3 {
margin-left: 0.75rem;
}

.ml-5 {
margin-left: 1.25rem;
}

.-mr-4 {
margin-right: -1rem;
}

.ml-auto {
margin-left: auto;
}

.-ml-8 {
margin-left: -2rem;
}

.mb-[160px] {
margin-bottom: 160px;
}

.box-content {
box-sizing: content-box;
}

.block {
display: block;
}

.inline-block {
display: inline-block;
}

.inline {
display: inline;
}

.flex {
display: flex;
}

.inline-flex {
display: inline-flex;
}

.table {
display: table;
}

.grid {
display: grid;
}

.inline-grid {
display: inline-grid;
}

.contents {
display: contents;
}

.hidden {
display: none;
}

.aspect-video {
aspect-ratio: 16 / 9;
}

.aspect-square {
aspect-ratio: 1 / 1;
}

.aspect-[9/16] {
aspect-ratio: 9/16;
}

.aspect-[16/9] {
aspect-ratio: 16/9;
}

.aspect-[140/111] {
aspect-ratio: 140/111;
}

.aspect-[2400/1370] {
aspect-ratio: 2400/1370;
}

.aspect-[137/35] {
aspect-ratio: 137/35;
}

.h-full {
height: 100%;
}

.h-6 {
height: 1.5rem;
}

.h-2.5 {
height: 0.625rem;
}

.h-2 {
height: 0.5rem;
}

.h-4 {
height: 1rem;
}

.h-28 {
height: 7rem;
}

.h-5 {
height: 1.25rem;
}

.h-auto {
height: auto;
}

.h-96 {
height: 24rem;
}

.h-80 {
height: 20rem;
}

.h-8 {
height: 2rem;
}

.h-1.5 {
height: 0.375rem;
}

.h-1 {
height: 0.25rem;
}

.h-[2px] {
height: 2px;
}

.h-[120px] {
height: 120px;
}

.h-[100px] {
height: 100px;
}

.h-[80px] {
height: 80px;
}

.h-[40px] {
height: 40px;
}

.h-[54rem] {
height: 54rem;
}

.h-32 {
height: 8rem;
}

.h-3 {
height: 0.75rem;
}

.h-fit {
height: -moz-fit-content;
height: fit-content;
}

.h-0.5 {
height: 0.125rem;
}

.h-0 {
height: 0px;
}

.h-16 {
height: 4rem;
}

.h-[64rem] {
height: 64rem;
}

.h-10 {
height: 2.5rem;
}

.h-screen {
height: 100vh;
}

.!h-96 {
height: 24rem !important;
}

.h-[69vmin] {
height: 69vmin;
}

.h-24 {
height: 6rem;
}

.h-20 {
height: 5rem;
}

.h-36 {
height: 9rem;
}

.h-[80vh] {
height: 80vh;
}

.h-12 {
height: 3rem;
}

.h-60 {
height: 15rem;
}

.h-[64px] {
height: 64px;
}

.h-px {
height: 1px;
}

.h-[180px] {
height: 180px;
}

.h-7 {
height: 1.75rem;
}

.h-3.5 {
height: 0.875rem;
}

.max-h-full {
max-height: 100%;
}

.max-h-80 {
max-height: 20rem;
}

.max-h-44 {
max-height: 11rem;
}

.max-h-96 {
max-height: 24rem;
}

.min-h-screen {
min-height: 100vh;
}

.min-h-min {
min-height: -moz-min-content;
min-height: min-content;
}

.min-h-full {
min-height: 100%;
}

.w-full {
width: 100%;
}

.w-4 {
width: 1rem;
}

.w-80 {
width: 20rem;
}

.w-96 {
width: 24rem;
}

.w-[30rem] {
width: 30rem;
}

.w-1.5 {
width: 0.375rem;
}

.w-1 {
width: 0.25rem;
}

.w-12 {
width: 3rem;
}

.w-3 {
width: 0.75rem;
}

.w-0.5 {
width: 0.125rem;
}

.w-0 {
width: 0px;
}

.w-[98%] {
width: 98%;
}

.w-[95%] {
width: 95%;
}

.w-5 {
width: 1.25rem;
}

.w-6 {
width: 1.5rem;
}

.w-[355px] {
width: 355px;
}

.w-fit {
width: -moz-fit-content;
width: fit-content;
}

.w-px {
width: 1px;
}

.w-2 {
width: 0.5rem;
}

.w-screen {
width: 100vw;
}

.w-16 {
width: 4rem;
}

.w-[64px] {
width: 64px;
}

.w-56 {
width: 14rem;
}

.w-8 {
width: 2rem;
}

.min-w-full {
min-width: 100%;
}

.min-w-[330px] {
min-width: 330px;
}

.max-w-md {
max-width: 28rem;
}

.max-w-fit {
max-width: -moz-fit-content;
max-width: fit-content;
}

.max-w-[54rem] {
max-width: 54rem;
}

.max-w-xl {
max-width: 36rem;
}

.max-w-sm {
max-width: 24rem;
}

.max-w-[350px] {
max-width: 350px;
}

.max-w-[95rem] {
max-width: 95rem;
}

.max-w-[80vw] {
max-width: 80vw;
}

.max-w-[50rem] {
max-width: 50rem;
}

.max-w-5xl {
max-width: 64rem;
}

.max-w-none {
max-width: none;
}

.flex-1 {
flex: 1 1 0%;
}

.grow {
flex-grow: 1;
}

.origin-left {
transform-origin: left;
}

.origin-[0] {
transform-origin: 0;
}

.origin-center {
transform-origin: center;
}

.-translate-y-1/2 {
--tw-translate-y: -50%;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.-translate-y-6 {
--tw-translate-y: -1.5rem;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-x-1/2 {
--tw-translate-x: 50%;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-x-[1.5rem] {
--tw-translate-x: 1.5rem;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.-translate-y-[105%] {
--tw-translate-y: -105%;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-y-5 {
--tw-translate-y: 1.25rem;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-y-0 {
--tw-translate-y: 0px;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.-translate-y-5 {
--tw-translate-y: -1.25rem;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-y-10 {
--tw-translate-y: 2.5rem;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.rotate-90 {
--tw-rotate: 90deg;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.-rotate-90 {
--tw-rotate: -90deg;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.scale-75 {
--tw-scale-x: .75;
--tw-scale-y: .75;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.transform {
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.cursor-pointer {
cursor: pointer;
}

.touch-none {
touch-action: none;
}

.select-none {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}

.resize {
resize: both;
}

.appearance-none {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}

.grid-flow-col {
grid-auto-flow: column;
}

.grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-cols-7 {
grid-template-columns: repeat(7, minmax(0, 1fr));
}

.grid-cols-1 {
grid-template-columns: repeat(1, minmax(0, 1fr));
}

.grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-rows-3 {
grid-template-rows: repeat(3, minmax(0, 1fr));
}

.flex-row {
flex-direction: row;
}

.flex-row-reverse {
flex-direction: row-reverse;
}

.flex-col {
flex-direction: column;
}

.flex-wrap {
flex-wrap: wrap;
}

.items-start {
align-items: flex-start;
}

.items-end {
align-items: flex-end;
}

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

.justify-start {
justify-content: flex-start;
}

.justify-end {
justify-content: flex-end;
}

.justify-center {
justify-content: center;
}

.justify-between {
justify-content: space-between;
}

.gap-10 {
gap: 2.5rem;
}

.gap-2.5 {
gap: 0.625rem;
}

.gap-2 {
gap: 0.5rem;
}

.gap-8 {
gap: 2rem;
}

.gap-6 {
gap: 1.5rem;
}

.gap-20 {
gap: 5rem;
}

.gap-4 {
gap: 1rem;
}

.gap-3 {
gap: 0.75rem;
}

.gap-x-20 {
-moz-column-gap: 5rem;
column-gap: 5rem;
}

.gap-y-6 {
row-gap: 1.5rem;
}

.gap-x-10 {
-moz-column-gap: 2.5rem;
column-gap: 2.5rem;
}

.gap-y-5 {
row-gap: 1.25rem;
}

.gap-x-4 {
-moz-column-gap: 1rem;
column-gap: 1rem;
}

.gap-y-4 {
row-gap: 1rem;
}

.space-y-6 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}

.space-x-10 > :not([hidden]) ~ :not([hidden]) {
--tw-space-x-reverse: 0;
margin-right: calc(2.5rem * var(--tw-space-x-reverse));
margin-left: calc(2.5rem * calc(1 - var(--tw-space-x-reverse)));
}

.space-y-8 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(2rem * var(--tw-space-y-reverse));
}

.space-y-12 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(3rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(3rem * var(--tw-space-y-reverse));
}

.divide-y > :not([hidden]) ~ :not([hidden]) {
--tw-divide-y-reverse: 0;
border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
}

.divide-gray-700 > :not([hidden]) ~ :not([hidden]) {
--tw-divide-opacity: 1;
border-color: rgb(128 128 128 / var(--tw-divide-opacity));
}

.divide-green-900 > :not([hidden]) ~ :not([hidden]) {
--tw-divide-opacity: 1;
border-color: rgb(23 45 45 / var(--tw-divide-opacity));
}

.divide-gray-500 > :not([hidden]) ~ :not([hidden]) {
--tw-divide-opacity: 1;
border-color: rgb(191 191 191 / var(--tw-divide-opacity));
}

.place-self-center {
place-self: center;
}

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

.overflow-auto {
overflow: auto;
}

.overflow-hidden {
overflow: hidden;
}

.overflow-x-auto {
overflow-x: auto;
}

.overflow-y-auto {
overflow-y: auto;
}

.overflow-x-hidden {
overflow-x: hidden;
}

.scroll-smooth {
scroll-behavior: smooth;
}

.truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

.whitespace-normal {
white-space: normal;
}

.whitespace-nowrap {
white-space: nowrap;
}

.break-words {
overflow-wrap: break-word;
}

.rounded-full {
border-radius: 9999px;
}

.rounded {
border-radius: 0.25rem;
}

.rounded-[1rem] {
border-radius: 1rem;
}

.rounded-none {
border-radius: 0px;
}

.border {
border-width: 1px;
}

.border-0 {
border-width: 0px;
}

.!border-2 {
border-width: 2px !important;
}

.border-2 {
border-width: 2px;
}

.border-y {
border-top-width: 1px;
border-bottom-width: 1px;
}

.border-y-8 {
border-top-width: 8px;
border-bottom-width: 8px;
}

.border-x-8 {
border-left-width: 8px;
border-right-width: 8px;
}

.border-t {
border-top-width: 1px;
}

.border-b {
border-bottom-width: 1px;
}

.border-b-2 {
border-bottom-width: 2px;
}

.border-r-8 {
border-right-width: 8px;
}

.border-t-8 {
border-top-width: 8px;
}

.border-l {
border-left-width: 1px;
}

.border-solid {
border-style: solid;
}

.border-green-900 {
--tw-border-opacity: 1;
border-color: rgb(23 45 45 / var(--tw-border-opacity));
}

.border-green-500 {
--tw-border-opacity: 1;
border-color: rgb(164 220 180 / var(--tw-border-opacity));
}

.border-brown-300 {
--tw-border-opacity: 1;
border-color: rgb(212 208 200 / var(--tw-border-opacity));
}

.border-transparent {
border-color: transparent;
}

.border-gray-700 {
--tw-border-opacity: 1;
border-color: rgb(128 128 128 / var(--tw-border-opacity));
}

.border-green-300 {
--tw-border-opacity: 1;
border-color: rgb(199 235 209 / var(--tw-border-opacity));
}

.border-gray-300 {
--tw-border-opacity: 1;
border-color: rgb(229 229 229 / var(--tw-border-opacity));
}

.!border-red-500 {
--tw-border-opacity: 1 !important;
border-color: rgb(195 80 86 / var(--tw-border-opacity)) !important;
}

.border-blue-500 {
--tw-border-opacity: 1;
border-color: rgb(170 220 230 / var(--tw-border-opacity));
}

.border-red-500 {
--tw-border-opacity: 1;
border-color: rgb(195 80 86 / var(--tw-border-opacity));
}

.border-white {
--tw-border-opacity: 1;
border-color: rgb(255 255 255 / var(--tw-border-opacity));
}

.border-green-700 {
--tw-border-opacity: 1;
border-color: rgb(0 76 69 / var(--tw-border-opacity));
}

.border-gray-100 {
--tw-border-opacity: 1;
border-color: rgb(242 242 242 / var(--tw-border-opacity));
}

.border-gray-900 {
--tw-border-opacity: 1;
border-color: rgb(64 64 64 / var(--tw-border-opacity));
}

.border-y-transparent {
border-top-color: transparent;
border-bottom-color: transparent;
}

.border-x-transparent {
border-left-color: transparent;
border-right-color: transparent;
}

.border-b-white {
--tw-border-opacity: 1;
border-bottom-color: rgb(255 255 255 / var(--tw-border-opacity));
}

.border-r-white {
--tw-border-opacity: 1;
border-right-color: rgb(255 255 255 / var(--tw-border-opacity));
}

.border-t-white {
--tw-border-opacity: 1;
border-top-color: rgb(255 255 255 / var(--tw-border-opacity));
}

.bg-green-700 {
--tw-bg-opacity: 1;
background-color: rgb(0 76 69 / var(--tw-bg-opacity));
}

.bg-green-500 {
--tw-bg-opacity: 1;
background-color: rgb(164 220 180 / var(--tw-bg-opacity));
}

.bg-black/50 {
background-color: rgb(0 0 0 / 0.5);
}

.bg-green-900 {
--tw-bg-opacity: 1;
background-color: rgb(23 45 45 / var(--tw-bg-opacity));
}

.bg-brown-100 {
--tw-bg-opacity: 1;
background-color: rgb(245 245 240 / var(--tw-bg-opacity));
}

.bg-white {
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}

.!bg-green-500 {
--tw-bg-opacity: 1 !important;
background-color: rgb(164 220 180 / var(--tw-bg-opacity)) !important;
}

.bg-red-500 {
--tw-bg-opacity: 1;
background-color: rgb(195 80 86 / var(--tw-bg-opacity));
}

.bg-transparent {
background-color: transparent;
}

.bg-blue-500 {
--tw-bg-opacity: 1;
background-color: rgb(170 220 230 / var(--tw-bg-opacity));
}

.bg-green-900/75 {
background-color: rgb(23 45 45 / 0.75);
}

.bg-red-300 {
--tw-bg-opacity: 1;
background-color: rgb(209 86 92 / var(--tw-bg-opacity));
}

.bg-white/10 {
background-color: rgb(255 255 255 / 0.1);
}

.bg-black/0 {
background-color: rgb(0 0 0 / 0);
}

.bg-brown-300 {
--tw-bg-opacity: 1;
background-color: rgb(212 208 200 / var(--tw-bg-opacity));
}

.bg-blue-100 {
--tw-bg-opacity: 1;
background-color: rgb(234 246 249 / var(--tw-bg-opacity));
}

.bg-black {
--tw-bg-opacity: 1;
background-color: rgb(0 0 0 / var(--tw-bg-opacity));
}

.bg-cover {
background-size: cover;
}

.bg-clip-content {
background-clip: content-box;
}

.bg-center {
background-position: center;
}

.fill-green-500 {
fill: #A4DCB4;
}

.fill-green-900 {
fill: #172D2D;
}

.stroke-green-700 {
stroke: #004C45;
}

.stroke-green-500 {
stroke: #A4DCB4;
}

.object-contain {
-o-object-fit: contain;
object-fit: contain;
}

.object-cover {
-o-object-fit: cover;
object-fit: cover;
}

.object-top {
-o-object-position: top;
object-position: top;
}

.object-center {
-o-object-position: center;
object-position: center;
}

.p-10 {
padding: 2.5rem;
}

.p-4 {
padding: 1rem;
}

.p-6 {
padding: 1.5rem;
}

.p-2 {
padding: 0.5rem;
}

.p-1 {
padding: 0.25rem;
}

.p-8 {
padding: 2rem;
}

.p-0 {
padding: 0px;
}

.p-5 {
padding: 1.25rem;
}

.py-20 {
padding-top: 5rem;
padding-bottom: 5rem;
}

.py-10 {
padding-top: 2.5rem;
padding-bottom: 2.5rem;
}

.px-4 {
padding-left: 1rem;
padding-right: 1rem;
}

.py-8 {
padding-top: 2rem;
padding-bottom: 2rem;
}

.py-[40px] {
padding-top: 40px;
padding-bottom: 40px;
}

.py-4 {
padding-top: 1rem;
padding-bottom: 1rem;
}

.px-3 {
padding-left: 0.75rem;
padding-right: 0.75rem;
}

.py-0 {
padding-top: 0px;
padding-bottom: 0px;
}

.py-16 {
padding-top: 4rem;
padding-bottom: 4rem;
}

.px-6 {
padding-left: 1.5rem;
padding-right: 1.5rem;
}

.py-2 {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}

.py-6 {
padding-top: 1.5rem;
padding-bottom: 1.5rem;
}

.px-0 {
padding-left: 0px;
padding-right: 0px;
}

.px-7 {
padding-left: 1.75rem;
padding-right: 1.75rem;
}

.py-12 {
padding-top: 3rem;
padding-bottom: 3rem;
}

.py-3 {
padding-top: 0.75rem;
padding-bottom: 0.75rem;
}

.px-2 {
padding-left: 0.5rem;
padding-right: 0.5rem;
}

.py-1.5 {
padding-top: 0.375rem;
padding-bottom: 0.375rem;
}

.py-1 {
padding-top: 0.25rem;
padding-bottom: 0.25rem;
}

.px-16 {
padding-left: 4rem;
padding-right: 4rem;
}

.pt-2 {
padding-top: 0.5rem;
}

.pt-5 {
padding-top: 1.25rem;
}

.pb-4 {
padding-bottom: 1rem;
}

.pt-12 {
padding-top: 3rem;
}

.pb-8 {
padding-bottom: 2rem;
}

.pt-24 {
padding-top: 6rem;
}

.pb-24 {
padding-bottom: 6rem;
}

.pt-4 {
padding-top: 1rem;
}

.pt-6 {
padding-top: 1.5rem;
}

.pt-10 {
padding-top: 2.5rem;
}

.pb-5 {
padding-bottom: 1.25rem;
}

.pb-28 {
padding-bottom: 7rem;
}

.pb-16 {
padding-bottom: 4rem;
}

.pl-1 {
padding-left: 0.25rem;
}

.pl-2 {
padding-left: 0.5rem;
}

.pt-[100px] {
padding-top: 100px;
}

.pb-1 {
padding-bottom: 0.25rem;
}

.pr-10 {
padding-right: 2.5rem;
}

.pt-8 {
padding-top: 2rem;
}

.pb-20 {
padding-bottom: 5rem;
}

.pl-4 {
padding-left: 1rem;
}

.pl-5 {
padding-left: 1.25rem;
}

.pb-[120px] {
padding-bottom: 120px;
}

.pb-12 {
padding-bottom: 3rem;
}

.pb-6 {
padding-bottom: 1.5rem;
}

.pl-6 {
padding-left: 1.5rem;
}

.pr-4 {
padding-right: 1rem;
}

.pl-12 {
padding-left: 3rem;
}

.pt-0 {
padding-top: 0px;
}

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

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

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

.font-numerals {
font-family: Numerals, Tobias, ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
}

.text-[10rem] {
font-size: 10rem;
}

.text-[12rem] {
font-size: 12rem;
}

.text-[7rem] {
font-size: 7rem;
}

.text-2xl {
font-size: 1.5rem;
}

.text-md {
font-size: 1.125rem;
}

.text-xs {
font-size: 0.875rem;
}

.text-lg {
font-size: 1.25rem;
}

.text-3xl {
font-size: 1.625rem;
}

.text-4xl {
font-size: 1.75rem;
}

.text-6xl {
font-size: 2.25rem;
}

.text-[0.45rem] {
font-size: 0.45rem;
}

.font-bold {
font-weight: 700;
}

.font-extrabold {
font-weight: 800;
}

.font-normal {
font-weight: 400;
}

.font-light {
font-weight: 300;
}

.uppercase {
text-transform: uppercase;
}

.lowercase {
text-transform: lowercase;
}

.capitalize {
text-transform: capitalize;
}

.ordinal {
--tw-ordinal: ordinal;
font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}

.leading-[1.3] {
line-height: 1.3;
}

.leading-none {
line-height: 1;
}

.text-green-500 {
--tw-text-opacity: 1;
color: rgb(164 220 180 / var(--tw-text-opacity));
}

.text-green-900 {
--tw-text-opacity: 1;
color: rgb(23 45 45 / var(--tw-text-opacity));
}

.text-white {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
}

.text-brown-100 {
--tw-text-opacity: 1;
color: rgb(245 245 240 / var(--tw-text-opacity));
}

.text-red-500 {
--tw-text-opacity: 1;
color: rgb(195 80 86 / var(--tw-text-opacity));
}

.text-green-700 {
--tw-text-opacity: 1;
color: rgb(0 76 69 / var(--tw-text-opacity));
}

.text-brown-300 {
--tw-text-opacity: 1;
color: rgb(212 208 200 / var(--tw-text-opacity));
}

.text-brown-500 {
--tw-text-opacity: 1;
color: rgb(155 154 149 / var(--tw-text-opacity));
}

.text-gray-700 {
--tw-text-opacity: 1;
color: rgb(128 128 128 / var(--tw-text-opacity));
}

.text-black {
--tw-text-opacity: 1;
color: rgb(0 0 0 / var(--tw-text-opacity));
}

.!text-green-900 {
--tw-text-opacity: 1 !important;
color: rgb(23 45 45 / var(--tw-text-opacity)) !important;
}

.text-gray-900 {
--tw-text-opacity: 1;
color: rgb(64 64 64 / var(--tw-text-opacity));
}

.underline {
text-decoration-line: underline;
}

.placeholder-green-900::-moz-placeholder {
--tw-placeholder-opacity: 1;
color: rgb(23 45 45 / var(--tw-placeholder-opacity));
}

.placeholder-green-900::placeholder {
--tw-placeholder-opacity: 1;
color: rgb(23 45 45 / var(--tw-placeholder-opacity));
}

.opacity-0 {
opacity: 0;
}

.opacity-100 {
opacity: 1;
}

.opacity-60 {
opacity: 0.6;
}

.!opacity-100 {
opacity: 1 !important;
}

.opacity-70 {
opacity: 0.7;
}

.bg-blend-overlay {
background-blend-mode: overlay;
}

.shadow-2xl {
--tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
--tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow {
--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.outline-none {
outline: 2px solid transparent;
outline-offset: 2px;
}

.outline {
outline-style: solid;
}

.outline-0 {
outline-width: 0px;
}

.ring {
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.ring-0 {
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.ring-offset-0 {
--tw-ring-offset-width: 0px;
}

.blur {
--tw-blur: blur(8px);
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.filter {
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.transition {
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}

.transition-transform {
transition-property: transform;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}

.transition-all {
transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}

.transition-[margin-top] {
transition-property: margin-top;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}

.transition-[height] {
transition-property: height;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}

.transition-opacity {
transition-property: opacity;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}

.transition-colors {
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}

.delay-200 {
transition-delay: 200ms;
}

.duration-500 {
transition-duration: 500ms;
}

.duration-200 {
transition-duration: 200ms;
}

.duration-300 {
transition-duration: 300ms;
}

.ease-in-out {
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.alignnone {
margin-left: 0px;
margin-right: 0px;
height: auto;
max-width: 100%;
}

.aligncenter {
margin: 0.5rem auto;
display: block;
}

@media (min-width: 640px) {
.alignleft:not(.wp-block-button) {
margin-right: 0.5rem;
float: left;
}

.alignright:not(.wp-block-button) {
margin-left: 0.5rem;
float: right;
}

.wp-block-button.alignleft a {
float: left;
margin-right: 1rem;
}

.wp-block-button.alignright a {
float: right;
margin-left: 1rem;
}
}

.[hostname:port] {
hostname: port;
}

/* @import "base/base.postcss";
@import "base/fonts.postcss";
@import "base/optinmonster.postcss";
@import "base/scrollbar.postcss";
@import "base/section.postcss"; */

/*

We could only serve block specific css on the pages that use these blocks,
but since the files are so small,
it's better to save the network request on the pages that need it
and add the extra code on the pages that don't
*/

/* @import "blocks/carousel.postcss";
@import "blocks/slider-and-case-study.postcss";

@import "components/button.postcss";
@import "components/checkbox.postcss";
@import "components/modal.postcss";
@import "components/pagination.postcss";
@import "components/legal-accordion.postcss";
@import "components/archive-filters-small-checkboxes.postcss";

@import "layout/breadcrumbs.postcss";
@import "layout/footer.postcss";
@import "layout/header.postcss";

@import "parts/post.postcss"; */

.selection:bg-green-900/50 *::-moz-selection {
background-color: rgb(23 45 45 / 0.5);
}

.selection:bg-green-900/50 *::selection {
background-color: rgb(23 45 45 / 0.5);
}

.selection:bg-green-900/50::-moz-selection {
background-color: rgb(23 45 45 / 0.5);
}

.selection:bg-green-900/50::selection {
background-color: rgb(23 45 45 / 0.5);
}

.placeholder:font-normal::-moz-placeholder {
font-weight: 400;
}

.placeholder:font-normal::placeholder {
font-weight: 400;
}

.placeholder:text-green-900::-moz-placeholder {
--tw-text-opacity: 1;
color: rgb(23 45 45 / var(--tw-text-opacity));
}

.placeholder:text-green-900::placeholder {
--tw-text-opacity: 1;
color: rgb(23 45 45 / var(--tw-text-opacity));
}

.placeholder:text-brown-300::-moz-placeholder {
--tw-text-opacity: 1;
color: rgb(212 208 200 / var(--tw-text-opacity));
}

.placeholder:text-brown-300::placeholder {
--tw-text-opacity: 1;
color: rgb(212 208 200 / var(--tw-text-opacity));
}

.after:align-super::after {
content: var(--tw-content);
vertical-align: super;
}

.after:text-lg::after {
content: var(--tw-content);
font-size: 1.25rem;
}

.after:content-['%']::after {
--tw-content: '%';
content: var(--tw-content);
}

.after:content-['%*']::after {
--tw-content: '%*';
content: var(--tw-content);
}

.first:mt-0:first-child {
margin-top: 0px;
}

.first:pt-3:first-child {
padding-top: 0.75rem;
}

.first:pt-0:first-child {
padding-top: 0px;
}

.last:mr-0:last-child {
margin-right: 0px;
}

.last:border-b:last-child {
border-bottom-width: 1px;
}

.last:pb-3:last-child {
padding-bottom: 0.75rem;
}

.last:pb-0:last-child {
padding-bottom: 0px;
}

.invalid:border-red-300:invalid {
--tw-border-opacity: 1;
border-color: rgb(209 86 92 / var(--tw-border-opacity));
}

.invalid:border-red-100:invalid {
--tw-border-opacity: 1;
border-color: rgb(228 115 121 / var(--tw-border-opacity));
}

.focus-within:col-span-full:focus-within {
grid-column: 1 / -1;
}

.hover:border-green-300:hover {
--tw-border-opacity: 1;
border-color: rgb(199 235 209 / var(--tw-border-opacity));
}

.hover:border-white:hover {
--tw-border-opacity: 1;
border-color: rgb(255 255 255 / var(--tw-border-opacity));
}

.hover:border-green-700:hover {
--tw-border-opacity: 1;
border-color: rgb(0 76 69 / var(--tw-border-opacity));
}

.hover:border-red-500:hover {
--tw-border-opacity: 1;
border-color: rgb(195 80 86 / var(--tw-border-opacity));
}

.hover:border-brown-100:hover {
--tw-border-opacity: 1;
border-color: rgb(245 245 240 / var(--tw-border-opacity));
}

.hover:border-blue-300:hover {
--tw-border-opacity: 1;
border-color: rgb(212 237 242 / var(--tw-border-opacity));
}

.hover:border-red-700:hover {
--tw-border-opacity: 1;
border-color: rgb(178 71 80 / var(--tw-border-opacity));
}

.hover:bg-green-300:hover {
--tw-bg-opacity: 1;
background-color: rgb(199 235 209 / var(--tw-bg-opacity));
}

.hover:bg-green-900:hover {
--tw-bg-opacity: 1;
background-color: rgb(23 45 45 / var(--tw-bg-opacity));
}

.hover:bg-green-500:hover {
--tw-bg-opacity: 1;
background-color: rgb(164 220 180 / var(--tw-bg-opacity));
}

.hover:bg-brown-300:hover {
--tw-bg-opacity: 1;
background-color: rgb(212 208 200 / var(--tw-bg-opacity));
}

.hover:bg-green-700:hover {
--tw-bg-opacity: 1;
background-color: rgb(0 76 69 / var(--tw-bg-opacity));
}

.hover:bg-transparent:hover {
background-color: transparent;
}

.hover:bg-brown-100:hover {
--tw-bg-opacity: 1;
background-color: rgb(245 245 240 / var(--tw-bg-opacity));
}

.hover:bg-blue-300:hover {
--tw-bg-opacity: 1;
background-color: rgb(212 237 242 / var(--tw-bg-opacity));
}

.hover:bg-red-700:hover {
--tw-bg-opacity: 1;
background-color: rgb(178 71 80 / var(--tw-bg-opacity));
}

.hover:bg-red-500:hover {
--tw-bg-opacity: 1;
background-color: rgb(195 80 86 / var(--tw-bg-opacity));
}

.hover:bg-white:hover {
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}

.hover:bg-gray-900:hover {
--tw-bg-opacity: 1;
background-color: rgb(64 64 64 / var(--tw-bg-opacity));
}

.hover:text-green-500:hover {
--tw-text-opacity: 1;
color: rgb(164 220 180 / var(--tw-text-opacity));
}

.hover:text-green-700:hover {
--tw-text-opacity: 1;
color: rgb(0 76 69 / var(--tw-text-opacity));
}

.hover:text-white:hover {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
}

.hover:text-green-900:hover {
--tw-text-opacity: 1;
color: rgb(23 45 45 / var(--tw-text-opacity));
}

.hover:text-red-500:hover {
--tw-text-opacity: 1;
color: rgb(195 80 86 / var(--tw-text-opacity));
}

.hover:underline:hover {
text-decoration-line: underline;
}

.hover:no-underline:hover {
text-decoration-line: none;
}

.hover:ring-2:hover {
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.hover:ring-green-900:hover {
--tw-ring-opacity: 1;
--tw-ring-color: rgb(23 45 45 / var(--tw-ring-opacity));
}

.hover:ring-offset-2:hover {
--tw-ring-offset-width: 2px;
}

.focus:border-green-900:focus {
--tw-border-opacity: 1;
border-color: rgb(23 45 45 / var(--tw-border-opacity));
}

.focus:border-brown-300:focus {
--tw-border-opacity: 1;
border-color: rgb(212 208 200 / var(--tw-border-opacity));
}

.focus-visible:text-white:focus-visible {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
}

.focus-visible:underline:focus-visible {
text-decoration-line: underline;
}

.focus-visible:ring-0:focus-visible {
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus-visible:ring-offset-0:focus-visible {
--tw-ring-offset-width: 0px;
}

.group:focus-within .group-focus-within:h-1/2 {
height: 50%;
}

.group:focus-within .group-focus-within:-translate-y-full {
--tw-translate-y: -100%;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.group:focus-within .group-focus-within:pl-0 {
padding-left: 0px;
}

.group:focus-within .group-focus-within:text-xs {
font-size: 0.875rem;
}

.group:hover .group-hover:scale-105 {
--tw-scale-x: 1.05;
--tw-scale-y: 1.05;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.group:hover .group-hover:bg-black/20 {
background-color: rgb(0 0 0 / 0.2);
}

.group:hover .group-hover:underline {
text-decoration-line: underline;
}

.peer:-moz-placeholder-shown ~ .peer-placeholder-shown:translate-y-0 {
--tw-translate-y: 0px;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.peer:placeholder-shown ~ .peer-placeholder-shown:translate-y-0 {
--tw-translate-y: 0px;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.peer:-moz-placeholder-shown ~ .peer-placeholder-shown:scale-100 {
--tw-scale-x: 1;
--tw-scale-y: 1;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.peer:placeholder-shown ~ .peer-placeholder-shown:scale-100 {
--tw-scale-x: 1;
--tw-scale-y: 1;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.peer:invalid ~ .peer-invalid:visible {
visibility: visible;
}

.peer:invalid ~ .peer-invalid:h-1/2 {
height: 50%;
}

.peer:invalid ~ .peer-invalid:-translate-y-full {
--tw-translate-y: -100%;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.peer:invalid ~ .peer-invalid:pl-0 {
padding-left: 0px;
}

.peer:invalid ~ .peer-invalid:text-xs {
font-size: 0.875rem;
}

.peer:focus-within ~ .peer-focus-within:hidden {
display: none;
}

.peer:focus ~ .peer-focus:invisible {
visibility: hidden;
}

.peer:focus ~ .peer-focus:left-0 {
left: 0px;
}

.peer:focus ~ .peer-focus:-translate-y-6 {
--tw-translate-y: -1.5rem;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.peer:focus ~ .peer-focus:scale-75 {
--tw-scale-x: .75;
--tw-scale-y: .75;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.peer:focus ~ .peer-focus:text-xs {
font-size: 0.875rem;
}

.peer:focus ~ .peer-focus:text-green-900 {
--tw-text-opacity: 1;
color: rgb(23 45 45 / var(--tw-text-opacity));
}

.peer:focus ~ .peer-focus:text-brown-300 {
--tw-text-opacity: 1;
color: rgb(212 208 200 / var(--tw-text-opacity));
}

@media (min-width: 480px) {
.xs:-mb-[30vmin] {
margin-bottom: -30vmin;
}

.xs:mr-6 {
margin-right: 1.5rem;
}

.xs:aspect-video {
aspect-ratio: 16 / 9;
}

.xs:w-10 {
width: 2.5rem;
}

.xs:w-max {
width: -moz-max-content;
width: max-content;
}

.xs:gap-10 {
gap: 2.5rem;
}

.xs:text-[10rem] {
font-size: 10rem;
}
}

@media (min-width: 640px) {
.sm:top-8 {
top: 2rem;
}

.sm:right-8 {
right: 2rem;
}

.sm:col-span-2 {
grid-column: span 2 / span 2;
}

.sm:col-span-5 {
grid-column: span 5 / span 5;
}

.sm:-mb-[2px] {
margin-bottom: -2px;
}

.sm:mr-10 {
margin-right: 2.5rem;
}

.sm:mt-8 {
margin-top: 2rem;
}

.sm:mr-4 {
margin-right: 1rem;
}

.sm:mr-6 {
margin-right: 1.5rem;
}

.sm:block {
display: block;
}

.sm:inline-block {
display: inline-block;
}

.sm:hidden {
display: none;
}

.sm:h-24 {
height: 6rem;
}

.sm:h-[72px] {
height: 72px;
}

.sm:w-[72px] {
width: 72px;
}

.sm:grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sm:grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}

.sm:justify-end {
justify-content: flex-end;
}

.sm:gap-4 {
gap: 1rem;
}

.sm:border-b-2 {
border-bottom-width: 2px;
}

.sm:border-green-900 {
--tw-border-opacity: 1;
border-color: rgb(23 45 45 / var(--tw-border-opacity));
}

.sm:border-green-700 {
--tw-border-opacity: 1;
border-color: rgb(0 76 69 / var(--tw-border-opacity));
}
}

@media (min-width: 768px) {
.md:h2 {
font-family: Tobias, ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
font-weight: 400;
}

.md:h6 {
font-family: Tobias, ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
font-weight: 400;
}

.md:p-sm {
font-family: Founders Grotesk, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
font-weight: 300;
}

.md:p-xs {
font-family: Founders Grotesk, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
font-weight: 300;
}

.md:p-xxs {
font-family: Founders Grotesk, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
font-weight: 300;
}

.md:subheading {
font-family: Founders Grotesk, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
font-weight: 400;
}

.md:h2 {
/* technically should be 2.625rem not 2.5rem */
font-size: 2.5rem;
}

.md:h6 {
font-size: 1.375rem;
}

.md:p-sm {
font-size: 0.875rem;
letter-spacing: 0.03em;
}

.md:p-xs {
font-size: 0.875rem;
letter-spacing: 0.03em;
}

.md:p-xxs {
font-size: 0.75rem;
letter-spacing: 0.03em;
}

.md:h2 {
line-height: 1.12;
}

.md:h6 {
line-height: 1.18;
}

.md:p-sm {
line-height: 1.4;
}

.md:p-xs {
line-height: 1.4;
}

.md:p-xxs {
line-height: 1.4;
}

@media (min-width: 768px) {
/* Type scale */

/* Note: tracking would go here but changing letter-spacing prevents
ligatures from appearing, so we don't use custom tracking.
This is only relevant for our heading font (Tobias). */

 {
  font-size: 3.875rem;
}

.md\:h2 {
  font-size: 3.125rem;
}

 {
  /* technically should be 2.625rem not 2.5rem */
  font-size: 0.875rem;
  letter-spacing: 0.03em;
}

/* Leading */

 {
  line-height: 1.06;
}

.md\:h2 {
  line-height: 1.06;
}

 {
  line-height: 1.5;
}

/* Type scale */

/* Note: tracking would go here but changing letter-spacing prevents
ligatures from appearing, so we don't use custom tracking.
This is only relevant for our heading font (Tobias). */

 {
  /* technically should be 2.625rem not 2.5rem */
  font-size: 1.75rem;
}

.md\:h6 {
  font-size: 1.5rem;
}

 {
  font-size: 0.875rem;
  letter-spacing: 0.03em;
}

/* Leading */

 {
  line-height: 1.16;
}

.md\:h6 {
  line-height: 1.16;
}

 {
  line-height: 1.5;
}

/* Type scale */

/* Note: tracking would go here but changing letter-spacing prevents
ligatures from appearing, so we don't use custom tracking.
This is only relevant for our heading font (Tobias). */

 {
  /* technically should be 2.625rem not 2.5rem */
  font-size: 1.25rem;
  letter-spacing: 0.02em;
}

.md\:p-sm {
  font-size: 1.125rem;
  letter-spacing: 0.03em;
}

 {
  font-size: 0.875rem;
  letter-spacing: 0.03em;
}

/* Leading */

 {
  line-height: 1.5;
}

.md\:p-sm {
  line-height: 1.5;
}

 {
  line-height: 1.5;
}

/* Type scale */

/* Note: tracking would go here but changing letter-spacing prevents
ligatures from appearing, so we don't use custom tracking.
This is only relevant for our heading font (Tobias). */

 {
  /* technically should be 2.625rem not 2.5rem */
  font-size: 1.125rem;
  letter-spacing: 0.03em;
}

.md\:p-xs {
  font-size: 1rem;
  letter-spacing: 0.03em;
}

 {
  font-size: 0.875rem;
  letter-spacing: 0.03em;
}

/* Leading */

 {
  line-height: 1.5;
}

.md\:p-xs {
  line-height: 1.5;
}

 {
  line-height: 1.5;
}

/* Type scale */

/* Note: tracking would go here but changing letter-spacing prevents
ligatures from appearing, so we don't use custom tracking.
This is only relevant for our heading font (Tobias). */

 {
  /* technically should be 2.625rem not 2.5rem */
  font-size: 1rem;
  letter-spacing: 0.03em;
}

.md\:p-xxs {
  font-size: 0.875rem;
  letter-spacing: 0.03em;
}

/* Leading */

 {
  line-height: 1.5;
}

.md\:p-xxs {
  line-height: 1.5;
}

/* Type scale */

/* Note: tracking would go here but changing letter-spacing prevents
ligatures from appearing, so we don't use custom tracking.
This is only relevant for our heading font (Tobias). */

 {
  font-size: 3.875rem;
}

.md\:h2 {
  font-size: 3.125rem;
}

 {
  /* technically should be 2.625rem not 2.5rem */
  font-size: 0.875rem;
  letter-spacing: 0.03em;
}

/* Leading */

 {
  line-height: 1.06;
}

.md\:h2 {
  line-height: 1.06;
}

 {
  line-height: 1.5;
}

/* Type scale */

/* Note: tracking would go here but changing letter-spacing prevents
ligatures from appearing, so we don't use custom tracking.
This is only relevant for our heading font (Tobias). */

 {
  /* technically should be 2.625rem not 2.5rem */
  font-size: 1.75rem;
}

.md\:h6 {
  font-size: 1.5rem;
}

 {
  font-size: 0.875rem;
  letter-spacing: 0.03em;
}

/* Leading */

 {
  line-height: 1.16;
}

.md\:h6 {
  line-height: 1.16;
}

 {
  line-height: 1.5;
}

/* Type scale */

/* Note: tracking would go here but changing letter-spacing prevents
ligatures from appearing, so we don't use custom tracking.
This is only relevant for our heading font (Tobias). */

 {
  /* technically should be 2.625rem not 2.5rem */
  font-size: 1.25rem;
  letter-spacing: 0.02em;
}

.md\:p-sm {
  font-size: 1.125rem;
  letter-spacing: 0.03em;
}

 {
  font-size: 0.875rem;
  letter-spacing: 0.03em;
}

/* Leading */

 {
  line-height: 1.5;
}

.md\:p-sm {
  line-height: 1.5;
}

 {
  line-height: 1.5;
}

/* Type scale */

/* Note: tracking would go here but changing letter-spacing prevents
ligatures from appearing, so we don't use custom tracking.
This is only relevant for our heading font (Tobias). */

 {
  /* technically should be 2.625rem not 2.5rem */
  font-size: 1.125rem;
  letter-spacing: 0.03em;
}

.md\:p-xs {
  font-size: 1rem;
  letter-spacing: 0.03em;
}

 {
  font-size: 0.875rem;
  letter-spacing: 0.03em;
}

/* Leading */

 {
  line-height: 1.5;
}

.md\:p-xs {
  line-height: 1.5;
}

 {
  line-height: 1.5;
}

/* Type scale */

/* Note: tracking would go here but changing letter-spacing prevents
ligatures from appearing, so we don't use custom tracking.
This is only relevant for our heading font (Tobias). */

 {
  /* technically should be 2.625rem not 2.5rem */
  font-size: 1rem;
  letter-spacing: 0.03em;
}

.md\:p-xxs {
  font-size: 0.875rem;
  letter-spacing: 0.03em;
}

/* Leading */

 {
  line-height: 1.5;
}

.md\:p-xxs {
  line-height: 1.5;
}

}

@media (min-width: 1024px) {
/* Type scale */

 {
  font-size: 4.875rem;
}

.md\:h2 {
  font-size: 3.875rem;
}

 {
  font-size: 0.875rem;
}

/* Desktop leading and tracking inherited from tablet leading */

/* Fallback max widths */

.md\:h2 {
  max-width: 64rem;
}

/* Type scale */

 {
  font-size: 2rem;
}

.md\:h6 {
  font-size: 1.75rem;
}

 {
  font-size: 0.875rem;
}

/* Desktop leading and tracking inherited from tablet leading */

/* Fallback max widths */

.md\:h6 {
  max-width: 64rem;
}

/* Type scale */

 {
  font-size: 1.25rem;
}

.md\:p-sm {
  font-size: 1.125rem;
}

 {
  font-size: 0.875rem;
}

/* Desktop leading and tracking inherited from tablet leading */

/* Fallback max widths */

.md\:p-sm {
  max-width: 64rem;
}

/* Type scale */

 {
  font-size: 1.125rem;
}

.md\:p-xs {
  font-size: 1rem;
}

 {
  font-size: 0.875rem;
}

/* Desktop leading and tracking inherited from tablet leading */

/* Fallback max widths */

.md\:p-xs {
  max-width: 64rem;
}

/* Type scale */

 {
  font-size: 1rem;
}

.md\:p-xxs {
  font-size: 0.875rem;
}

/* Desktop leading and tracking inherited from tablet leading */

/* Fallback max widths */

.md\:p-xxs {
  max-width: 64rem;
}

/* Type scale */

 {
  font-size: 4.875rem;
}

.md\:h2 {
  font-size: 3.875rem;
}

 {
  font-size: 0.875rem;
}

/* Desktop leading and tracking inherited from tablet leading */

/* Fallback max widths */

.md\:h2 {
  max-width: 64rem;
}

/* Type scale */

 {
  font-size: 2rem;
}

.md\:h6 {
  font-size: 1.75rem;
}

 {
  font-size: 0.875rem;
}

/* Desktop leading and tracking inherited from tablet leading */

/* Fallback max widths */

.md\:h6 {
  max-width: 64rem;
}

/* Type scale */

 {
  font-size: 1.25rem;
}

.md\:p-sm {
  font-size: 1.125rem;
}

 {
  font-size: 0.875rem;
}

/* Desktop leading and tracking inherited from tablet leading */

/* Fallback max widths */

.md\:p-sm {
  max-width: 64rem;
}

/* Type scale */

 {
  font-size: 1.125rem;
}

.md\:p-xs {
  font-size: 1rem;
}

 {
  font-size: 0.875rem;
}

/* Desktop leading and tracking inherited from tablet leading */

/* Fallback max widths */

.md\:p-xs {
  max-width: 64rem;
}

/* Type scale */

 {
  font-size: 1rem;
}

.md\:p-xxs {
  font-size: 0.875rem;
}

/* Desktop leading and tracking inherited from tablet leading */

/* Fallback max widths */

.md\:p-xxs {
  max-width: 64rem;
}

/* Type scale */

 {
  font-size: 0.875rem;
}

/* Desktop leading and tracking inherited from tablet leading */

/* Fallback max widths */

.md\:subheading {
  max-width: 64rem;
}

}

.md:absolute {
position: absolute;
}

.md:relative {
position: relative;
}

.md:top-0 {
top: 0px;
}

.md:-left-64 {
left: -16rem;
}

.md:m-16 {
margin: 4rem;
}

.md:m-0 {
margin: 0px;
}

.md:-mb-12 {
margin-bottom: -3rem;
}

.md:mr-6 {
margin-right: 1.5rem;
}

.md:mt-16 {
margin-top: 4rem;
}

.md:mt-6 {
margin-top: 1.5rem;
}

.md:mb-0 {
margin-bottom: 0px;
}

.md:mr-10 {
margin-right: 2.5rem;
}

.md:-mb-16 {
margin-bottom: -4rem;
}

.md:mt-0 {
margin-top: 0px;
}

.md:ml-0 {
margin-left: 0px;
}

.md:mb-[180px] {
margin-bottom: 180px;
}

.md:mb-16 {
margin-bottom: 4rem;
}

.md:mb-24 {
margin-bottom: 6rem;
}

.md:mb-12 {
margin-bottom: 3rem;
}

.md:inline-block {
display: inline-block;
}

.md:flex {
display: flex;
}

.md:h-fit {
height: -moz-fit-content;
height: fit-content;
}

.md:h-full {
height: 100%;
}

.md:h-[776px] {
height: 776px;
}

.md:h-4 {
height: 1rem;
}

.md:h-3 {
height: 0.75rem;
}

.md:h-[100px] {
height: 100px;
}

.md:h-8 {
height: 2rem;
}

.md:min-h-[585px] {
min-height: 585px;
}

.md:w-[36rem] {
width: 36rem;
}

.md:w-auto {
width: auto;
}

.md:w-64 {
width: 16rem;
}

.md:w-full {
width: 100%;
}

.md:w-[415px] {
width: 415px;
}

.md:w-4 {
width: 1rem;
}

.md:w-[100px] {
width: 100px;
}

.md:flex-shrink-0 {
flex-shrink: 0;
}

.md:grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}

.md:grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}

.md:flex-row {
flex-direction: row;
}

.md:items-center {
align-items: center;
}

.md:justify-center {
justify-content: center;
}

.md:self-stretch {
align-self: stretch;
}

.md:p-20 {
padding: 5rem;
}

.md:p-0 {
padding: 0px;
}

.md:p-24 {
padding: 6rem;
}

.md:py-10 {
padding-top: 2.5rem;
padding-bottom: 2.5rem;
}

.md:px-4 {
padding-left: 1rem;
padding-right: 1rem;
}

.md:px-8 {
padding-left: 2rem;
padding-right: 2rem;
}

.md:pt-[180px] {
padding-top: 180px;
}

.md:pl-[100px] {
padding-left: 100px;
}

.md:pr-[60px] {
padding-right: 60px;
}

.md:pt-10 {
padding-top: 2.5rem;
}

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

.md:text-xl {
font-size: 1.375rem;
}
}

@media (min-width: 1024px) {
.lg:h1 {
font-family: Tobias, ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
font-weight: 400;
}

.lg:h2 {
font-family: Tobias, ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
font-weight: 400;
}

.lg:h3 {
font-family: Tobias, ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
font-weight: 400;
}

.lg:h5 {
font-family: Tobias, ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
font-weight: 400;
}

.lg:h-sm {
font-family: Tobias, ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
font-weight: 400;
}

.lg:p-xxl {
font-family: Founders Grotesk, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
font-weight: 300;
}

.lg:p {
font-family: Founders Grotesk, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
font-weight: 300;
}

.lg:p-sm {
font-family: Founders Grotesk, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
font-weight: 300;
}

.lg:p-xs {
font-family: Founders Grotesk, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
font-weight: 300;
}

.lg:p-xxs {
font-family: Founders Grotesk, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
font-weight: 300;
}

.lg:subheading {
font-family: Founders Grotesk, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
font-weight: 400;
}

.lg:h1 {
font-size: 3.125rem;
}

.lg:h2 {
/* technically should be 2.625rem not 2.5rem */
font-size: 2.5rem;
}

.lg:h3 {
font-size: 2.25rem;
}

.lg:h5 {
font-size: 1.625rem;
}

.lg:h-sm {
font-size: 1.125rem;
}

.lg:p-xxl {
font-size: 1.5rem;
letter-spacing: 0.02em;
}

.lg:p {
font-size: 1.125rem;
letter-spacing: 0.03em;
}

.lg:p-sm {
font-size: 0.875rem;
letter-spacing: 0.03em;
}

.lg:p-xs {
font-size: 0.875rem;
letter-spacing: 0.03em;
}

.lg:p-xxs {
font-size: 0.75rem;
letter-spacing: 0.03em;
}

.lg:h1 {
line-height: 1.1;
}

.lg:h2 {
line-height: 1.12;
}

.lg:h3 {
line-height: 1.12;
}

.lg:h5 {
line-height: 1.16;
}

.lg:h-sm {
line-height: 1.2;
}

.lg:p-xxl {
line-height: 1.4;
}

.lg:p {
line-height: 1.4;
}

.lg:p-sm {
line-height: 1.4;
}

.lg:p-xs {
line-height: 1.4;
}

.lg:p-xxs {
line-height: 1.4;
}

@media (min-width: 768px) {
/* Type scale */

/* Note: tracking would go here but changing letter-spacing prevents
ligatures from appearing, so we don't use custom tracking.
This is only relevant for our heading font (Tobias). */

 {
  font-size: 4.875rem;
}

.lg\:h1 {
  font-size: 3.875rem;
}

 {
  /* technically should be 2.625rem not 2.5rem */
  font-size: 0.875rem;
  letter-spacing: 0.03em;
}

/* Leading */

 {
  line-height: 1.06;
}

.lg\:h1 {
  line-height: 1.06;
}

 {
  line-height: 1.5;
}

/* Type scale */

/* Note: tracking would go here but changing letter-spacing prevents
ligatures from appearing, so we don't use custom tracking.
This is only relevant for our heading font (Tobias). */

 {
  font-size: 3.875rem;
}

.lg\:h2 {
  font-size: 3.125rem;
}

 {
  /* technically should be 2.625rem not 2.5rem */
  font-size: 0.875rem;
  letter-spacing: 0.03em;
}

/* Leading */

 {
  line-height: 1.06;
}

.lg\:h2 {
  line-height: 1.06;
}

 {
  line-height: 1.5;
}

/* Type scale */

/* Note: tracking would go here but changing letter-spacing prevents
ligatures from appearing, so we don't use custom tracking.
This is only relevant for our heading font (Tobias). */

 {
  font-size: 3.125rem;
}

.lg\:h3 {
  /* technically should be 2.625rem not 2.5rem */
  font-size: 2.5rem;
}

 {
  font-size: 0.875rem;
  letter-spacing: 0.03em;
}

/* Leading */

 {
  line-height: 1.06;
}

.lg\:h3 {
  line-height: 1.08;
}

 {
  line-height: 1.5;
}

/* Type scale */

/* Note: tracking would go here but changing letter-spacing prevents
ligatures from appearing, so we don't use custom tracking.
This is only relevant for our heading font (Tobias). */

 {
  font-size: 3.125rem;
}

.lg\:h3 {
  /* technically should be 2.625rem not 2.5rem */
  font-size: 2.5rem;
}

 {
  font-size: 0.875rem;
  letter-spacing: 0.03em;
}

/* Leading */

 {
  line-height: 1.06;
}

.lg\:h3 {
  line-height: 1.08;
}

 {
  line-height: 1.5;
}

/* Type scale */

/* Note: tracking would go here but changing letter-spacing prevents
ligatures from appearing, so we don't use custom tracking.
This is only relevant for our heading font (Tobias). */

 {
  /* technically should be 2.625rem not 2.5rem */
  font-size: 2.25rem;
}

.lg\:h5 {
  font-size: 1.75rem;
}

 {
  font-size: 0.875rem;
  letter-spacing: 0.03em;
}

/* Leading */

 {
  line-height: 1.1;
}

.lg\:h5 {
  line-height: 1.16;
}

 {
  line-height: 1.5;
}

/* Type scale */

/* Note: tracking would go here but changing letter-spacing prevents
ligatures from appearing, so we don't use custom tracking.
This is only relevant for our heading font (Tobias). */

 {
  /* technically should be 2.625rem not 2.5rem */
  font-size: 1.5rem;
}

.lg\:h-sm {
  font-size: 1.25rem;
}

 {
  font-size: 0.875rem;
  letter-spacing: 0.03em;
}

/* Leading */

 {
  line-height: 1.16;
}

.lg\:h-sm {
  line-height: 1.16;
}

 {
  line-height: 1.5;
}

/* Type scale */

/* Note: tracking would go here but changing letter-spacing prevents
ligatures from appearing, so we don't use custom tracking.
This is only relevant for our heading font (Tobias). */

 {
  /* technically should be 2.625rem not 2.5rem */
  font-size: 1.25rem;
}

.lg\:p-xxl {
  font-size: 1.75rem;
  letter-spacing: 0.01em;
}

 {
  font-size: 0.875rem;
  letter-spacing: 0.03em;
}

/* Leading */

 {
  line-height: 1.16;
}

.lg\:p-xxl {
  line-height: 1.4;
}

 {
  line-height: 1.5;
}

/* Type scale */

/* Note: tracking would go here but changing letter-spacing prevents
ligatures from appearing, so we don't use custom tracking.
This is only relevant for our heading font (Tobias). */

 {
  /* technically should be 2.625rem not 2.5rem */
  font-size: 1.375rem;
  letter-spacing: 0.02em;
}

.lg\:p {
  font-size: 1.25rem;
  letter-spacing: 0.02em;
}

 {
  font-size: 0.875rem;
  letter-spacing: 0.03em;
}

/* Leading */

 {
  line-height: 1.5;
}

.lg\:p {
  line-height: 1.5;
}

 {
  line-height: 1.5;
}

/* Type scale */

/* Note: tracking would go here but changing letter-spacing prevents
ligatures from appearing, so we don't use custom tracking.
This is only relevant for our heading font (Tobias). */

 {
  /* technically should be 2.625rem not 2.5rem */
  font-size: 1.25rem;
  letter-spacing: 0.02em;
}

.lg\:p-sm {
  font-size: 1.125rem;
  letter-spacing: 0.03em;
}

 {
  font-size: 0.875rem;
  letter-spacing: 0.03em;
}

/* Leading */

 {
  line-height: 1.5;
}

.lg\:p-sm {
  line-height: 1.5;
}

 {
  line-height: 1.5;
}

/* Type scale */

/* Note: tracking would go here but changing letter-spacing prevents
ligatures from appearing, so we don't use custom tracking.
This is only relevant for our heading font (Tobias). */

 {
  /* technically should be 2.625rem not 2.5rem */
  font-size: 1.125rem;
  letter-spacing: 0.03em;
}

.lg\:p-xs {
  font-size: 1rem;
  letter-spacing: 0.03em;
}

 {
  font-size: 0.875rem;
  letter-spacing: 0.03em;
}

/* Leading */

 {
  line-height: 1.5;
}

.lg\:p-xs {
  line-height: 1.5;
}

 {
  line-height: 1.5;
}

/* Type scale */

/* Note: tracking would go here but changing letter-spacing prevents
ligatures from appearing, so we don't use custom tracking.
This is only relevant for our heading font (Tobias). */

 {
  /* technically should be 2.625rem not 2.5rem */
  font-size: 1rem;
  letter-spacing: 0.03em;
}

.lg\:p-xxs {
  font-size: 0.875rem;
  letter-spacing: 0.03em;
}

/* Leading */

 {
  line-height: 1.5;
}

.lg\:p-xxs {
  line-height: 1.5;
}

/* Type scale */

/* Note: tracking would go here but changing letter-spacing prevents
ligatures from appearing, so we don't use custom tracking.
This is only relevant for our heading font (Tobias). */

 {
  font-size: 4.875rem;
}

.lg\:h1 {
  font-size: 3.875rem;
}

 {
  /* technically should be 2.625rem not 2.5rem */
  font-size: 0.875rem;
  letter-spacing: 0.03em;
}

/* Leading */

 {
  line-height: 1.06;
}

.lg\:h1 {
  line-height: 1.06;
}

 {
  line-height: 1.5;
}

/* Type scale */

/* Note: tracking would go here but changing letter-spacing prevents
ligatures from appearing, so we don't use custom tracking.
This is only relevant for our heading font (Tobias). */

 {
  font-size: 3.875rem;
}

.lg\:h2 {
  font-size: 3.125rem;
}

 {
  /* technically should be 2.625rem not 2.5rem */
  font-size: 0.875rem;
  letter-spacing: 0.03em;
}

/* Leading */

 {
  line-height: 1.06;
}

.lg\:h2 {
  line-height: 1.06;
}

 {
  line-height: 1.5;
}

/* Type scale */

/* Note: tracking would go here but changing letter-spacing prevents
ligatures from appearing, so we don't use custom tracking.
This is only relevant for our heading font (Tobias). */

 {
  font-size: 3.125rem;
}

.lg\:h3 {
  /* technically should be 2.625rem not 2.5rem */
  font-size: 2.5rem;
}

 {
  font-size: 0.875rem;
  letter-spacing: 0.03em;
}

/* Leading */

 {
  line-height: 1.06;
}

.lg\:h3 {
  line-height: 1.08;
}

 {
  line-height: 1.5;
}

/* Type scale */

/* Note: tracking would go here but changing letter-spacing prevents
ligatures from appearing, so we don't use custom tracking.
This is only relevant for our heading font (Tobias). */

 {
  /* technically should be 2.625rem not 2.5rem */
  font-size: 2.25rem;
}

.lg\:h5 {
  font-size: 1.75rem;
}

 {
  font-size: 0.875rem;
  letter-spacing: 0.03em;
}

/* Leading */

 {
  line-height: 1.1;
}

.lg\:h5 {
  line-height: 1.16;
}

 {
  line-height: 1.5;
}

/* Type scale */

/* Note: tracking would go here but changing letter-spacing prevents
ligatures from appearing, so we don't use custom tracking.
This is only relevant for our heading font (Tobias). */

 {
  /* technically should be 2.625rem not 2.5rem */
  font-size: 1.5rem;
}

.lg\:h-sm {
  font-size: 1.25rem;
}

 {
  font-size: 0.875rem;
  letter-spacing: 0.03em;
}

/* Leading */

 {
  line-height: 1.16;
}

.lg\:h-sm {
  line-height: 1.16;
}

 {
  line-height: 1.5;
}

/* Type scale */

/* Note: tracking would go here but changing letter-spacing prevents
ligatures from appearing, so we don't use custom tracking.
This is only relevant for our heading font (Tobias). */

 {
  /* technically should be 2.625rem not 2.5rem */
  font-size: 1.25rem;
}

.lg\:p-xxl {
  font-size: 1.75rem;
  letter-spacing: 0.01em;
}

 {
  font-size: 0.875rem;
  letter-spacing: 0.03em;
}

/* Leading */

 {
  line-height: 1.16;
}

.lg\:p-xxl {
  line-height: 1.4;
}

 {
  line-height: 1.5;
}

/* Type scale */

/* Note: tracking would go here but changing letter-spacing prevents
ligatures from appearing, so we don't use custom tracking.
This is only relevant for our heading font (Tobias). */

 {
  /* technically should be 2.625rem not 2.5rem */
  font-size: 1.375rem;
  letter-spacing: 0.02em;
}

.lg\:p {
  font-size: 1.25rem;
  letter-spacing: 0.02em;
}

 {
  font-size: 0.875rem;
  letter-spacing: 0.03em;
}

/* Leading */

 {
  line-height: 1.5;
}

.lg\:p {
  line-height: 1.5;
}

 {
  line-height: 1.5;
}

/* Type scale */

/* Note: tracking would go here but changing letter-spacing prevents
ligatures from appearing, so we don't use custom tracking.
This is only relevant for our heading font (Tobias). */

 {
  /* technically should be 2.625rem not 2.5rem */
  font-size: 1.25rem;
  letter-spacing: 0.02em;
}

.lg\:p-sm {
  font-size: 1.125rem;
  letter-spacing: 0.03em;
}

 {
  font-size: 0.875rem;
  letter-spacing: 0.03em;
}

/* Leading */

 {
  line-height: 1.5;
}

.lg\:p-sm {
  line-height: 1.5;
}

 {
  line-height: 1.5;
}

/* Type scale */

/* Note: tracking would go here but changing letter-spacing prevents
ligatures from appearing, so we don't use custom tracking.
This is only relevant for our heading font (Tobias). */

 {
  /* technically should be 2.625rem not 2.5rem */
  font-size: 1.125rem;
  letter-spacing: 0.03em;
}

.lg\:p-xs {
  font-size: 1rem;
  letter-spacing: 0.03em;
}

 {
  font-size: 0.875rem;
  letter-spacing: 0.03em;
}

/* Leading */

 {
  line-height: 1.5;
}

.lg\:p-xs {
  line-height: 1.5;
}

 {
  line-height: 1.5;
}

/* Type scale */

/* Note: tracking would go here but changing letter-spacing prevents
ligatures from appearing, so we don't use custom tracking.
This is only relevant for our heading font (Tobias). */

 {
  /* technically should be 2.625rem not 2.5rem */
  font-size: 1rem;
  letter-spacing: 0.03em;
}

.lg\:p-xxs {
  font-size: 0.875rem;
  letter-spacing: 0.03em;
}

/* Leading */

 {
  line-height: 1.5;
}

.lg\:p-xxs {
  line-height: 1.5;
}

}

@media (min-width: 1024px) {
/* Type scale */

 {
  font-size: 6.625rem;
}

.lg\:h1 {
  font-size: 4.875rem;
}

 {
  font-size: 0.875rem;
}

/* Desktop leading and tracking inherited from tablet leading */

/* Fallback max widths */

.lg\:h1 {
  max-width: 64rem;
}

/* Type scale */

 {
  font-size: 4.875rem;
}

.lg\:h2 {
  font-size: 3.875rem;
}

 {
  font-size: 0.875rem;
}

/* Desktop leading and tracking inherited from tablet leading */

/* Fallback max widths */

.lg\:h2 {
  max-width: 64rem;
}

/* Type scale */

 {
  font-size: 3.875rem;
}

.lg\:h3 {
  font-size: 3.125rem;
}

 {
  font-size: 0.875rem;
}

/* Desktop leading and tracking inherited from tablet leading */

/* Fallback max widths */

.lg\:h3 {
  max-width: 64rem;
}

/* Type scale */

 {
  font-size: 2.5rem;
}

.lg\:h5 {
  font-size: 2rem;
}

 {
  font-size: 0.875rem;
}

/* Desktop leading and tracking inherited from tablet leading */

/* Fallback max widths */

.lg\:h5 {
  max-width: 64rem;
}

/* Type scale */

 {
  font-size: 1.75rem;
}

.lg\:h-sm {
  font-size: 1.5rem;
}

 {
  font-size: 0.875rem;
}

/* Desktop leading and tracking inherited from tablet leading */

/* Fallback max widths */

.lg\:h-sm {
  max-width: 64rem;
}

/* Type scale */

 {
  font-size: 1.5rem;
}

.lg\:p-xxl {
  font-size: 2rem;
}

 {
  font-size: 0.875rem;
}

/* Desktop leading and tracking inherited from tablet leading */

/* Fallback max widths */

.lg\:p-xxl {
  max-width: 64rem;
}

/* Type scale */

 {
  font-size: 1.375rem;
}

.lg\:p {
  font-size: 1.25rem;
}

 {
  font-size: 0.875rem;
}

/* Desktop leading and tracking inherited from tablet leading */

/* Fallback max widths */

.lg\:p {
  max-width: 64rem;
}

/* Type scale */

 {
  font-size: 1.25rem;
}

.lg\:p-sm {
  font-size: 1.125rem;
}

 {
  font-size: 0.875rem;
}

/* Desktop leading and tracking inherited from tablet leading */

/* Fallback max widths */

.lg\:p-sm {
  max-width: 64rem;
}

/* Type scale */

 {
  font-size: 1.125rem;
}

.lg\:p-xs {
  font-size: 1rem;
}

 {
  font-size: 0.875rem;
}

/* Desktop leading and tracking inherited from tablet leading */

/* Fallback max widths */

.lg\:p-xs {
  max-width: 64rem;
}

/* Type scale */

 {
  font-size: 1rem;
}

.lg\:p-xxs {
  font-size: 0.875rem;
}

/* Desktop leading and tracking inherited from tablet leading */

/* Fallback max widths */

.lg\:p-xxs {
  max-width: 64rem;
}

/* Type scale */

 {
  font-size: 6.625rem;
}

.lg\:h1 {
  font-size: 4.875rem;
}

 {
  font-size: 0.875rem;
}

/* Desktop leading and tracking inherited from tablet leading */

/* Fallback max widths */

.lg\:h1 {
  max-width: 64rem;
}

/* Type scale */

 {
  font-size: 4.875rem;
}

.lg\:h2 {
  font-size: 3.875rem;
}

 {
  font-size: 0.875rem;
}

/* Desktop leading and tracking inherited from tablet leading */

/* Fallback max widths */

.lg\:h2 {
  max-width: 64rem;
}

/* Type scale */

 {
  font-size: 3.875rem;
}

.lg\:h3 {
  font-size: 3.125rem;
}

 {
  font-size: 0.875rem;
}

/* Desktop leading and tracking inherited from tablet leading */

/* Fallback max widths */

.lg\:h3 {
  max-width: 64rem;
}

/* Type scale */

 {
  font-size: 2.5rem;
}

.lg\:h5 {
  font-size: 2rem;
}

 {
  font-size: 0.875rem;
}

/* Desktop leading and tracking inherited from tablet leading */

/* Fallback max widths */

.lg\:h5 {
  max-width: 64rem;
}

/* Type scale */

 {
  font-size: 1.75rem;
}

.lg\:h-sm {
  font-size: 1.5rem;
}

 {
  font-size: 0.875rem;
}

/* Desktop leading and tracking inherited from tablet leading */

/* Fallback max widths */

.lg\:h-sm {
  max-width: 64rem;
}

/* Type scale */

 {
  font-size: 1.5rem;
}

.lg\:p-xxl {
  font-size: 2rem;
}

 {
  font-size: 0.875rem;
}

/* Desktop leading and tracking inherited from tablet leading */

/* Fallback max widths */

.lg\:p-xxl {
  max-width: 64rem;
}

/* Type scale */

 {
  font-size: 1.375rem;
}

.lg\:p {
  font-size: 1.25rem;
}

 {
  font-size: 0.875rem;
}

/* Desktop leading and tracking inherited from tablet leading */

/* Fallback max widths */

.lg\:p {
  max-width: 64rem;
}

/* Type scale */

 {
  font-size: 1.25rem;
}

.lg\:p-sm {
  font-size: 1.125rem;
}

 {
  font-size: 0.875rem;
}

/* Desktop leading and tracking inherited from tablet leading */

/* Fallback max widths */

.lg\:p-sm {
  max-width: 64rem;
}

/* Type scale */

 {
  font-size: 1.125rem;
}

.lg\:p-xs {
  font-size: 1rem;
}

 {
  font-size: 0.875rem;
}

/* Desktop leading and tracking inherited from tablet leading */

/* Fallback max widths */

.lg\:p-xs {
  max-width: 64rem;
}

/* Type scale */

 {
  font-size: 1rem;
}

.lg\:p-xxs {
  font-size: 0.875rem;
}

/* Desktop leading and tracking inherited from tablet leading */

/* Fallback max widths */

.lg\:p-xxs {
  max-width: 64rem;
}

/* Type scale */

 {
  font-size: 0.875rem;
}

/* Desktop leading and tracking inherited from tablet leading */

/* Fallback max widths */

.lg\:subheading {
  max-width: 64rem;
}

}

.lg:absolute {
position: absolute;
}

.lg:relative {
position: relative;
}

.lg:sticky {
position: sticky;
}

.lg:top-0 {
top: 0px;
}

.lg:left-0 {
left: 0px;
}

.lg:left-8 {
left: 2rem;
}

.lg:-bottom-16 {
bottom: -4rem;
}

.lg:bottom-0 {
bottom: 0px;
}

.lg:right-0 {
right: 0px;
}

.lg:top-24 {
top: 6rem;
}

.lg:order-2 {
order: 2;
}

.lg:order-1 {
order: 1;
}

.lg:col-span-2 {
grid-column: span 2 / span 2;
}

.lg:col-span-6 {
grid-column: span 6 / span 6;
}

.lg:col-span-5 {
grid-column: span 5 / span 5;
}

.lg:col-span-7 {
grid-column: span 7 / span 7;
}

.lg:col-span-3 {
grid-column: span 3 / span 3;
}

.lg:col-span-4 {
grid-column: span 4 / span 4;
}

.lg:col-span-full {
grid-column: 1 / -1;
}

.lg:m-16 {
margin: 4rem;
}

.lg:m-0 {
margin: 0px;
}

.lg:my-auto {
margin-top: auto;
margin-bottom: auto;
}

.lg:my-0 {
margin-top: 0px;
margin-bottom: 0px;
}

.lg:my-16 {
margin-top: 4rem;
margin-bottom: 4rem;
}

.lg:mx-auto {
margin-left: auto;
margin-right: auto;
}

.lg:mx-0 {
margin-left: 0px;
margin-right: 0px;
}

.lg:mb-10 {
margin-bottom: 2.5rem;
}

.lg:mt-0 {
margin-top: 0px;
}

.lg:mb-4 {
margin-bottom: 1rem;
}

.lg:mb-16 {
margin-bottom: 4rem;
}

.lg:mb-6 {
margin-bottom: 1.5rem;
}

.lg:mt-5 {
margin-top: 1.25rem;
}

.lg:mb-[240px] {
margin-bottom: 240px;
}

.lg:mb-20 {
margin-bottom: 5rem;
}

.lg:mt-[180px] {
margin-top: 180px;
}

.lg:mb-[180px] {
margin-bottom: 180px;
}

.lg:mb-12 {
margin-bottom: 3rem;
}

.lg:mb-0 {
margin-bottom: 0px;
}

.lg:mb-3 {
margin-bottom: 0.75rem;
}

.lg:mb-8 {
margin-bottom: 2rem;
}

.lg:mt-6 {
margin-top: 1.5rem;
}

.lg:mt-2 {
margin-top: 0.5rem;
}

.lg:mt-32 {
margin-top: 8rem;
}

.lg:mt-1 {
margin-top: 0.25rem;
}

.lg:mt-12 {
margin-top: 3rem;
}

.lg:mt-16 {
margin-top: 4rem;
}

.lg:mt-20 {
margin-top: 5rem;
}

.lg:mt-28 {
margin-top: 7rem;
}

.lg:mt-36 {
margin-top: 9rem;
}

.lg:mt-24 {
margin-top: 6rem;
}

.lg:mb-60 {
margin-bottom: 15rem;
}

.lg:ml-auto {
margin-left: auto;
}

.lg:mr-0 {
margin-right: 0px;
}

.lg:mr-12 {
margin-right: 3rem;
}

.lg:mb-1 {
margin-bottom: 0.25rem;
}

.lg:ml-8 {
margin-left: 2rem;
}

.lg:mb-[120px] {
margin-bottom: 120px;
}

.lg:mt-8 {
margin-top: 2rem;
}

.lg:mr-9 {
margin-right: 2.25rem;
}

.lg:mr-10 {
margin-right: 2.5rem;
}

.lg:ml-10 {
margin-left: 2.5rem;
}

.lg:ml-4 {
margin-left: 1rem;
}

.lg:ml-3 {
margin-left: 0.75rem;
}

.lg:block {
display: block;
}

.lg:inline-block {
display: inline-block;
}

.lg:flex {
display: flex;
}

.lg:grid {
display: grid;
}

.lg:hidden {
display: none;
}

.lg:h-full {
height: 100%;
}

.lg:h-36 {
height: 9rem;
}

.lg:h-6 {
height: 1.5rem;
}

.lg:h-[240px] {
height: 240px;
}

.lg:h-[180px] {
height: 180px;
}

.lg:h-[160px] {
height: 160px;
}

.lg:h-[120px] {
height: 120px;
}

.lg:h-[80px] {
height: 80px;
}

.lg:h-20 {
height: 5rem;
}

.lg:h-56 {
height: 14rem;
}

.lg:h-40 {
height: 10rem;
}

.lg:h-min {
height: -moz-min-content;
height: min-content;
}

.lg:h-14 {
height: 3.5rem;
}

.lg:h-fit {
height: -moz-fit-content;
height: fit-content;
}

.lg:h-9 {
height: 2.25rem;
}

.lg:h-8 {
height: 2rem;
}

.lg:max-h-[70vh] {
max-height: 70vh;
}

.lg:max-h-[50vh] {
max-height: 50vh;
}

.lg:min-h-[46rem] {
min-height: 46rem;
}

.lg:w-48 {
width: 12rem;
}

.lg:w-[24rem] {
width: 24rem;
}

.lg:w-[48rem] {
width: 48rem;
}

.lg:w-auto {
width: auto;
}

.lg:w-[36rem] {
width: 36rem;
}

.lg:w-fit {
width: -moz-fit-content;
width: fit-content;
}

.lg:w-1/2 {
width: 50%;
}

.lg:w-64 {
width: 16rem;
}

.lg:max-w-lg {
max-width: 32rem;
}

.lg:grow {
flex-grow: 1;
}

.lg:grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}

.lg:grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}

.lg:grid-cols-4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}

.lg:grid-cols-12 {
grid-template-columns: repeat(12, minmax(0, 1fr));
}

.lg:grid-cols-[50fr_70fr] {
grid-template-columns: 50fr 70fr;
}

.lg:grid-rows-1 {
grid-template-rows: repeat(1, minmax(0, 1fr));
}

.lg:flex-row {
flex-direction: row;
}

.lg:flex-col {
flex-direction: column;
}

.lg:items-start {
align-items: flex-start;
}

.lg:items-end {
align-items: flex-end;
}

.lg:items-center {
align-items: center;
}

.lg:justify-end {
justify-content: flex-end;
}

.lg:justify-center {
justify-content: center;
}

.lg:justify-between {
justify-content: space-between;
}

.lg:gap-10 {
gap: 2.5rem;
}

.lg:gap-24 {
gap: 6rem;
}

.lg:gap-12 {
gap: 3rem;
}

.lg:gap-6 {
gap: 1.5rem;
}

.lg:gap-x-12 {
-moz-column-gap: 3rem;
column-gap: 3rem;
}

.lg:gap-y-20 {
row-gap: 5rem;
}

.lg:space-y-0 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0px * var(--tw-space-y-reverse));
}

.lg:space-y-10 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(2.5rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(2.5rem * var(--tw-space-y-reverse));
}

.lg:divide-x > :not([hidden]) ~ :not([hidden]) {
--tw-divide-x-reverse: 0;
border-right-width: calc(1px * var(--tw-divide-x-reverse));
border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
}

.lg:divide-y-0 > :not([hidden]) ~ :not([hidden]) {
--tw-divide-y-reverse: 0;
border-top-width: calc(0px * calc(1 - var(--tw-divide-y-reverse)));
border-bottom-width: calc(0px * var(--tw-divide-y-reverse));
}

.lg:divide-y > :not([hidden]) ~ :not([hidden]) {
--tw-divide-y-reverse: 0;
border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
}

.lg:overflow-auto {
overflow: auto;
}

.lg:border-0 {
border-width: 0px;
}

.lg:border-t {
border-top-width: 1px;
}

.lg:border-l {
border-left-width: 1px;
}

.lg:border-b {
border-bottom-width: 1px;
}

.lg:border-green-900 {
--tw-border-opacity: 1;
border-color: rgb(23 45 45 / var(--tw-border-opacity));
}

.lg:border-brown-300 {
--tw-border-opacity: 1;
border-color: rgb(212 208 200 / var(--tw-border-opacity));
}

.lg:bg-white {
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}

.lg:bg-green-900 {
--tw-bg-opacity: 1;
background-color: rgb(23 45 45 / var(--tw-bg-opacity));
}

.lg:bg-gradient-to-b {
background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
}

.lg:from-[#004C45_50%] {
--tw-gradient-from: #004C45 50%;
--tw-gradient-to: rgb(255 255 255 / 0);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.lg:from-[#F5F5F0_50%] {
--tw-gradient-from: #F5F5F0 50%;
--tw-gradient-to: rgb(255 255 255 / 0);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.lg:to-[#fff_50%] {
--tw-gradient-to: #fff 50%;
}

.lg:p-32 {
padding: 8rem;
}

.lg:p-0 {
padding: 0px;
}

.lg:p-16 {
padding: 4rem;
}

.lg:p-6 {
padding: 1.5rem;
}

.lg:p-7 {
padding: 1.75rem;
}

.lg:py-[80px] {
padding-top: 80px;
padding-bottom: 80px;
}

.lg:px-12 {
padding-left: 3rem;
padding-right: 3rem;
}

.lg:py-10 {
padding-top: 2.5rem;
padding-bottom: 2.5rem;
}

.lg:px-10 {
padding-left: 2.5rem;
padding-right: 2.5rem;
}

.lg:px-16 {
padding-left: 4rem;
padding-right: 4rem;
}

.lg:px-4 {
padding-left: 1rem;
padding-right: 1rem;
}

.lg:px-8 {
padding-left: 2rem;
padding-right: 2rem;
}

.lg:py-8 {
padding-top: 2rem;
padding-bottom: 2rem;
}

.lg:py-28 {
padding-top: 7rem;
padding-bottom: 7rem;
}

.lg:px-6 {
padding-left: 1.5rem;
padding-right: 1.5rem;
}

.lg:px-0 {
padding-left: 0px;
padding-right: 0px;
}

.lg:py-0 {
padding-top: 0px;
padding-bottom: 0px;
}

.lg:py-2 {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}

.lg:px-2 {
padding-left: 0.5rem;
padding-right: 0.5rem;
}

.lg:pb-0 {
padding-bottom: 0px;
}

.lg:pt-40 {
padding-top: 10rem;
}

.lg:pt-8 {
padding-top: 2rem;
}

.lg:pt-28 {
padding-top: 7rem;
}

.lg:pb-32 {
padding-bottom: 8rem;
}

.lg:pt-6 {
padding-top: 1.5rem;
}

.lg:pt-16 {
padding-top: 4rem;
}

.lg:pr-16 {
padding-right: 4rem;
}

.lg:pl-16 {
padding-left: 4rem;
}

.lg:pt-4 {
padding-top: 1rem;
}

.lg:pb-12 {
padding-bottom: 3rem;
}

.lg:pt-20 {
padding-top: 5rem;
}

.lg:pr-8 {
padding-right: 2rem;
}

.lg:pl-[inherit] {
padding-left: inherit;
}

.lg:pt-60 {
padding-top: 15rem;
}

.lg:pt-32 {
padding-top: 8rem;
}

.lg:pl-12 {
padding-left: 3rem;
}

.lg:pr-6 {
padding-right: 1.5rem;
}

.lg:pl-8 {
padding-left: 2rem;
}

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

.lg:text-right {
text-align: right;
}

.lg:text-[16rem] {
font-size: 16rem;
}

.lg:text-[10rem] {
font-size: 10rem;
}

.lg:text-white {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
}

.lg:text-brown-300 {
--tw-text-opacity: 1;
color: rgb(212 208 200 / var(--tw-text-opacity));
}

.lg:text-black {
--tw-text-opacity: 1;
color: rgb(0 0 0 / var(--tw-text-opacity));
}

.lg:text-green-500 {
--tw-text-opacity: 1;
color: rgb(164 220 180 / var(--tw-text-opacity));
}

.lg:no-underline {
text-decoration-line: none;
}

.lg:placeholder:text-brown-300::-moz-placeholder {
--tw-text-opacity: 1;
color: rgb(212 208 200 / var(--tw-text-opacity));
}

.lg:placeholder:text-brown-300::placeholder {
--tw-text-opacity: 1;
color: rgb(212 208 200 / var(--tw-text-opacity));
}

.lg:hover:bg-green-700:hover {
--tw-bg-opacity: 1;
background-color: rgb(0 76 69 / var(--tw-bg-opacity));
}

.lg:hover:underline:hover {
text-decoration-line: underline;
}
}

@media (min-width: 1280px) {
.xl:left-16 {
left: 4rem;
}

.xl:-bottom-10 {
bottom: -2.5rem;
}

.xl:col-span-2 {
grid-column: span 2 / span 2;
}

.xl:col-span-3 {
grid-column: span 3 / span 3;
}

.xl:col-start-3 {
grid-column-start: 3;
}

.xl:m-40 {
margin: 10rem;
}

.xl:my-10 {
margin-top: 2.5rem;
margin-bottom: 2.5rem;
}

.xl:mx-auto {
margin-left: auto;
margin-right: auto;
}

.xl:mb-8 {
margin-bottom: 2rem;
}

.xl:mt-16 {
margin-top: 4rem;
}

.xl:mt-20 {
margin-top: 5rem;
}

.xl:mt-28 {
margin-top: 7rem;
}

.xl:mt-56 {
margin-top: 14rem;
}

.xl:ml-4 {
margin-left: 1rem;
}

.xl:w-[39rem] {
width: 39rem;
}

.xl:max-w-[1200px] {
max-width: 1200px;
}

.xl:grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}

.xl:grid-cols-5 {
grid-template-columns: repeat(5, minmax(0, 1fr));
}

.xl:gap-32 {
gap: 8rem;
}

.xl:gap-16 {
gap: 4rem;
}

.xl:p-52 {
padding: 13rem;
}

.xl:px-16 {
padding-left: 4rem;
padding-right: 4rem;
}

.xl:px-10 {
padding-left: 2.5rem;
padding-right: 2.5rem;
}

.xl:pr-24 {
padding-right: 6rem;
}

.xl:pl-24 {
padding-left: 6rem;
}

.xl:pt-16 {
padding-top: 4rem;
}

.xl:pb-20 {
padding-bottom: 5rem;
}

.xl:pt-20 {
padding-top: 5rem;
}

.xl:pt-40 {
padding-top: 10rem;
}
}

@media (min-width: 1440px) {
.\32xl:block {
display: block;
}

.\32xl:hidden {
display: none;
}

.\32xl:w-96 {
width: 24rem;
}
}

</details>

ai · 2023-10-25T06:38:28Z

Please open an issue in Tailwind CSS.

Open issue here only if you have exact small JS code which lead to an issue. If a plugin works wrong, we need to fix the plugin.

justingolden21 · 2023-10-25T18:25:19Z

It ended up being resolved by updating tailwind to 3.3.5

tailwindlabs/tailwindcss#12113

ai closed this as completed Oct 25, 2023

justingolden21 mentioned this issue Oct 25, 2023

Tailwind Generates Invalid Styles tailwindlabs/tailwindcss#12288

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Postcss generates invalid css from tailwind @apply #1893

Postcss generates invalid css from tailwind @apply #1893

justingolden21 commented Oct 24, 2023

justingolden21 commented Oct 24, 2023 •

edited

Loading

ai commented Oct 25, 2023

justingolden21 commented Oct 25, 2023

Postcss generates invalid css from tailwind @apply #1893

Postcss generates invalid css from tailwind @apply #1893

Comments

justingolden21 commented Oct 24, 2023

justingolden21 commented Oct 24, 2023 • edited Loading

ai commented Oct 25, 2023

justingolden21 commented Oct 25, 2023

justingolden21 commented Oct 24, 2023 •

edited

Loading