Tailwind Generates Invalid Styles #12288

justingolden21 · 2023-10-25T16:56:38Z

What version of Tailwind CSS are you using?

3.3.3

What build tool (or framework if it abstracts the build tool) are you using?

postcss 8.4.4

What version of Node.js are you using?

18.14.4

What browser are you using?

N/A

What operating system are you using?

Windows

Reproduction URL

https://play.tailwindcss.com/LOOZi6FfKB

This URL has the same styles as our project, but in tailwind play, it generates correct styles. In our project, tailwind generates invalid styles that have css rulesets without selectors. See below.

Describe your issue

Tailwind generates styles that are invalid, such as

 {
  font-size: 4.875rem;
}

which doesn't have a selector.

See full code in comment below.

I had believed this to be an issue with postcss originally and opened a ticket, but it was closed and I was told it's a problem with tailwind. postcss/postcss#1893

The text was updated successfully, but these errors were encountered:

justingolden21 · 2023-10-25T16:56:44Z

Note that the code below is quite large.

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 #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 #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>

Also, I have the **exact** same code on my machine, but it's generating invalid styles. There is no difference aside from the name of the fonts we use.

justingolden21 · 2023-10-25T16:59:25Z

It's also worth noting that when using --minify, the styles generated are all valid. I believe this is because the invalid rulesets are purged.

In our package.json:

"production:css-app": "tailwindcss -i ./resources/css/app.postcss -o ./css/app.css --postcss",

Doesn't work, but adding --minify makes it work.

thecrypticace · 2023-10-25T17:26:36Z

Can you upgrade to v3.3.5 and check again? Pretty sure this is the same as #12113 which is fixed.

justingolden21 · 2023-10-25T18:23:10Z

Sure, I'll try that! Thanks for the quick response.

After some time, I got it down to the following code that generates invalid styles:

tailwind.config.js

/** @type {import('tailwindcss').Config} */

module.exports = {
  content: ["./**/*.html"],
  theme: {
    fontSize: {
      "9xl": "3.875rem",
      "10xl": "4.875rem"
    },
    
    screens: {
      md: "768px",
      lg: "1024px"
    },
    
  },
  plugins: [],
};

app.postcss

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

@layer base {
  @screen md {
    /* helloworld */

    .h-lg {
      @apply text-10xl;
    }
    .h1 {
      @apply text-9xl;
    }
  }
}

helloworld.html

<div class="lg:h1"></div>

Output, lines 527-533:

@media (min-width: 1024px) {
  @media (min-width: 768px) {
    /* helloworld */

     {
      font-size: 4.875rem;
    }

justingolden21 · 2023-10-25T18:24:39Z

Updating WORKED!

Thank you so much, been on this for a LONG time (days lol)

Closing this ticket. Appreciate the help 😄

justingolden21 · 2023-10-25T18:45:03Z

Also I wanted to mention that this problem doesn't occur if the rule h1 is before the h-lg rule. The problem doesn't occur if we remove @layer base and the problem doesn't occur unless we have screen sizes in both the way we define the @apply and the way we use it (and it's not affected by if the screens are the same or different sizes).

justingolden21 closed this as completed Oct 25, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Tailwind Generates Invalid Styles #12288

Tailwind Generates Invalid Styles #12288

justingolden21 commented Oct 25, 2023

justingolden21 commented Oct 25, 2023 •

edited

Loading

justingolden21 commented Oct 25, 2023

thecrypticace commented Oct 25, 2023

justingolden21 commented Oct 25, 2023

justingolden21 commented Oct 25, 2023

justingolden21 commented Oct 25, 2023

Tailwind Generates Invalid Styles #12288

Tailwind Generates Invalid Styles #12288

Comments

justingolden21 commented Oct 25, 2023

justingolden21 commented Oct 25, 2023 • edited Loading

justingolden21 commented Oct 25, 2023

thecrypticace commented Oct 25, 2023

justingolden21 commented Oct 25, 2023

justingolden21 commented Oct 25, 2023

justingolden21 commented Oct 25, 2023

justingolden21 commented Oct 25, 2023 •

edited

Loading