/*
Theme Name: Webror
Theme URI: https://webror.com
Author: Webror
Author URI: https://webror.com
Description: Ultra-lightweight custom WordPress theme for Webror. Clean, semantic markup optimized for performance.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.4
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: webror
Tags: custom, lightweight, performance, seo-optimized
*/

*,: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-gradient-from-position: ;
--tw-gradient-via-position: ;
--tw-gradient-to-position: ;
--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 / .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: ;
--tw-contain-size: ;
--tw-contain-layout: ;
--tw-contain-paint: ;
--tw-contain-style:
}

::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-gradient-from-position: ;
--tw-gradient-via-position: ;
--tw-gradient-to-position: ;
--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 / .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: ;
--tw-contain-size: ;
--tw-contain-layout: ;
--tw-contain-paint: ;
--tw-contain-style:
}

*,:before,:after {
box-sizing: border-box;
border-width: 0;
border-style: solid;
border-color: #e5e7eb
}

:before,:after {
--tw-content: ""
}

html,:host {
line-height: 1.5;
-webkit-text-size-adjust: 100%;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
font-family: Inter,system-ui,sans-serif;
font-feature-settings: normal;
font-variation-settings: normal;
-webkit-tap-highlight-color: transparent
}

body {
margin: 0;
line-height: inherit
}
section.section {
    margin: 50px 0;
}

hr {
height: 0;
color: inherit;
border-top-width: 1px
}

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

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

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

b,strong {
font-weight: bolder
}

code,kbd,samp,pre {
font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;
font-feature-settings: normal;
font-variation-settings: normal;
font-size: 1em
}

small {
font-size: 80%
}

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

sub {
bottom: -.25em
}

sup {
top: -.5em
}

table {
text-indent: 0;
border-color: inherit;
border-collapse: collapse
}

button,input,optgroup,select,textarea {
font-family: inherit;
font-feature-settings: inherit;
font-variation-settings: inherit;
font-size: 100%;
font-weight: inherit;
line-height: inherit;
letter-spacing: inherit;
color: inherit;
margin: 0;
padding: 0
}

button,select {
text-transform: none
}

button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]) {
-webkit-appearance: button;
background-color: transparent;
background-image: none
}

:-moz-focusring {
outline: auto
}

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

progress {
vertical-align: baseline
}

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

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

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

::-webkit-file-upload-button {
-webkit-appearance: button;
font: inherit
}

summary {
display: list-item
}

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
}

dialog {
padding: 0
}

textarea {
resize: vertical
}

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

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

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

:disabled {
cursor: default
}

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

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

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

:root {
--background: 210 20% 98%;
--foreground: 222 47% 11%;
--card: 0 0% 100%;
--card-foreground: 222 47% 11%;
--popover: 0 0% 100%;
--popover-foreground: 222 47% 11%;
--primary: 222 47% 11%;
--primary-foreground: 210 40% 98%;
--secondary: 210 20% 96%;
--secondary-foreground: 222 47% 11%;
--muted: 210 20% 94%;
--muted-foreground: 215 16% 47%;
--accent: 187 92% 41%;
--accent-foreground: 210 40% 98%;
--cta: 38 92% 50%;
--cta-foreground: 222 47% 11%;
--success: 152 69% 40%;
--success-foreground: 210 40% 98%;
--destructive: 0 84% 60%;
--destructive-foreground: 210 40% 98%;
--border: 214 32% 91%;
--input: 214 32% 91%;
--ring: 187 92% 41%;
--radius: .75rem;
--gradient-hero: linear-gradient(135deg, hsl(222 47% 11%) 0%, hsl(215 28% 17%) 100%);
--gradient-accent: linear-gradient(135deg, hsl(187 92% 41%) 0%, hsl(192 91% 36%) 100%);
--gradient-cta: linear-gradient(135deg, hsl(38 92% 50%) 0%, hsl(32 95% 44%) 100%);
--gradient-subtle: linear-gradient(180deg, hsl(210 20% 98%) 0%, hsl(210 20% 96%) 100%);
--shadow-sm: 0 1px 2px 0 hsl(222 47% 11% / .05);
--shadow-md: 0 4px 6px -1px hsl(222 47% 11% / .1), 0 2px 4px -2px hsl(222 47% 11% / .1);
--shadow-lg: 0 10px 15px -3px hsl(222 47% 11% / .1), 0 4px 6px -4px hsl(222 47% 11% / .1);
--shadow-xl: 0 20px 25px -5px hsl(222 47% 11% / .1), 0 8px 10px -6px hsl(222 47% 11% / .1);
--shadow-glow: 0 0 40px hsl(187 92% 41% / .3);
--shadow-cta: 0 4px 14px 0 hsl(38 92% 50% / .4);
--sidebar-background: 0 0% 98%;
--sidebar-foreground: 240 5.3% 26.1%;
--sidebar-primary: 240 5.9% 10%;
--sidebar-primary-foreground: 0 0% 98%;
--sidebar-accent: 240 4.8% 95.9%;
--sidebar-accent-foreground: 240 5.9% 10%;
--sidebar-border: 220 13% 91%;
--sidebar-ring: 217.2 91.2% 59.8%
}

.dark {
--background: 222 47% 11%;
--foreground: 210 40% 98%;
--card: 215 28% 14%;
--card-foreground: 210 40% 98%;
--popover: 215 28% 14%;
--popover-foreground: 210 40% 98%;
--primary: 210 40% 98%;
--primary-foreground: 222 47% 11%;
--secondary: 215 28% 17%;
--secondary-foreground: 210 40% 98%;
--muted: 215 28% 17%;
--muted-foreground: 215 20% 65%;
--accent: 187 92% 41%;
--accent-foreground: 210 40% 98%;
--destructive: 0 63% 31%;
--destructive-foreground: 210 40% 98%;
--border: 215 28% 17%;
--input: 215 28% 17%;
--ring: 187 92% 41%
}

* {
border-color: hsl(var(--border))
}

html {
scroll-behavior: smooth
}

body {
background-color: hsl(var(--background));
font-family: Inter,system-ui,sans-serif;
color: hsl(var(--foreground));
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-family: Inter,sans-serif
}

h1,h2,h3,h4,h5,h6 {
font-family: Plus Jakarta Sans,sans-serif;
font-weight: 700;
letter-spacing: -.025em
}




.container-custom {
margin-left: auto;
margin-right: auto;
max-width: 80rem;
padding-left: 1rem;
padding-right: 1rem
}

@media (min-width: 640px) {
.container-custom {
padding-left:1.5rem;
padding-right: 1.5rem
}
}

@media (min-width: 1024px) {
.container-custom {
padding-left:2rem;
padding-right: 2rem
}
}

.heading-hero {
font-size: 2.25rem;
line-height: 2.5rem;
font-weight: 800;
line-height: 1.25
}

@media (min-width: 640px) {
.heading-hero {
font-size:3rem;
line-height: 1
}
}

@media (min-width: 768px) {
.heading-hero {
font-size:3.75rem;
line-height: 1
}
}

@media (min-width: 1024px) {
.heading-hero {
font-size:4.5rem;
line-height: 1
}
}

.heading-section {
font-size: 1.875rem;
line-height: 2.25rem;
font-weight: 700;
line-height: 1.25
}

@media (min-width: 640px) {
.heading-section {
font-size:2.25rem;
line-height: 2.5rem
}
}

@media (min-width: 768px) {
.heading-section {
font-size:3rem;
line-height: 1
}
}

.heading-card {
font-size: 1.25rem;
line-height: 1.75rem;
font-weight: 700
}

@media (min-width: 640px) {
.heading-card {
font-size:1.5rem;
line-height: 2rem
}
}

.text-lead {
font-size: 1.125rem;
line-height: 1.75rem;
line-height: 1.625;
color: hsl(var(--muted-foreground))
}

@media (min-width: 768px) {
.text-lead {
font-size:1.25rem;
line-height: 1.75rem
}
}

.text-body {
font-size: 1rem;
line-height: 1.5rem;
line-height: 1.625;
color: hsl(var(--muted-foreground))
}

.btn-primary {
display: inline-flex;
align-items: center;
justify-content: center;
gap: .5rem;
border-radius: var(--radius);
background-color: hsl(var(--primary));
padding: .75rem 1.5rem;
font-weight: 600;
color: hsl(var(--primary-foreground));
transition-property: all;
transition-timing-function: cubic-bezier(.4,0,.2,1);
transition-duration: .3s;
animation-duration: .3s
}

.btn-primary:hover {
--tw-scale-x: 1.02;
--tw-scale-y: 1.02;
transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
opacity: .9
}

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

@media (min-width: 768px) {
.btn-primary {
padding:1rem 2rem
}
}

.btn-cta {
display: inline-flex;
align-items: center;
justify-content: center;
gap: .5rem;
border-radius: var(--radius);
padding: .75rem 1.5rem;
font-weight: 600;
transition-property: all;
transition-timing-function: cubic-bezier(.4,0,.2,1);
transition-duration: .3s;
animation-duration: .3s;
background: var(--gradient-cta);
color: hsl(var(--cta-foreground));
box-shadow: var(--shadow-cta)
}

.btn-cta:hover {
--tw-scale-x: 1.02;
--tw-scale-y: 1.02;
transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
box-shadow: 0 6px 20px #f59f0a80
}

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

@media (min-width: 768px) {
.btn-cta {
padding:1rem 2rem
}
}

.btn-outline {
display: inline-flex;
align-items: center;
justify-content: center;
gap: .5rem;
border-radius: var(--radius);
border-width: 2px;
border-color: hsl(var(--primary));
padding: .75rem 1.5rem;
font-weight: 600;
color: hsl(var(--primary));
transition-property: all;
transition-timing-function: cubic-bezier(.4,0,.2,1);
transition-duration: .3s;
animation-duration: .3s
}

.btn-outline:hover {
background-color: hsl(var(--primary));
color: hsl(var(--primary-foreground))
}

@media (min-width: 768px) {
.btn-outline {
padding:1rem 2rem
}
}

.btn-ghost {
display: inline-flex;
align-items: center;
justify-content: center;
gap: .5rem;
border-radius: var(--radius);
padding: .5rem 1rem;
font-weight: 500;
color: hsl(var(--foreground));
transition-property: all;
transition-timing-function: cubic-bezier(.4,0,.2,1);
transition-duration: .2s;
animation-duration: .2s
}

.btn-ghost:hover {
background-color: hsl(var(--muted))
}

.card-elevated {
border-radius: 1rem;
background-color: hsl(var(--card));
padding: 1.5rem;
transition-property: all;
transition-timing-function: cubic-bezier(.4,0,.2,1);
transition-duration: .3s;
animation-duration: .3s;
box-shadow: var(--shadow-md)
}

@media (min-width: 768px) {
.card-elevated {
padding:2rem
}
}

.card-elevated:hover {
box-shadow: var(--shadow-xl);
transform: translateY(-4px)
}

.card-bordered {
border-radius: 1rem;
border-width: 1px;
border-color: hsl(var(--border));
background-color: hsl(var(--card));
padding: 1.5rem;
transition-property: all;
transition-timing-function: cubic-bezier(.4,0,.2,1);
transition-duration: .3s;
animation-duration: .3s
}

.card-bordered:hover {
border-color: hsl(var(--accent) / .5)
}

@media (min-width: 768px) {
.card-bordered {
padding:2rem
}
}

.stat-value {
font-size: 2.25rem;
line-height: 2.5rem;
font-weight: 800;
color: hsl(var(--accent))
}

@media (min-width: 768px) {
.stat-value {
font-size:3rem;
line-height: 1
}
}

@media (min-width: 1024px) {
.stat-value {
font-size:3.75rem;
line-height: 1
}
}

.stat-label {
margin-top: .5rem;
font-size: .875rem;
line-height: 1.25rem;
font-weight: 500;
color: hsl(var(--muted-foreground))
}

@media (min-width: 768px) {
.stat-label {
font-size:1rem;
line-height: 1.5rem
}
}

.badge-accent {
display: inline-flex;
align-items: center;
border-radius: 9999px;
padding: .25rem .75rem;
font-size: .75rem;
line-height: 1rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .05em;
background-color: hsl(var(--accent) / .1);
color: hsl(var(--accent))
}

.badge-success {
display: inline-flex;
align-items: center;
border-radius: 9999px;
padding: .25rem .75rem;
font-size: .75rem;
line-height: 1rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .05em;
background-color: hsl(var(--success) / .1);
color: hsl(var(--success))
}

.hero-gradient {
background: var(--gradient-hero)
}

.accent-line {
height: .25rem;
width: 4rem;
border-radius: 9999px;
background-color: hsl(var(--accent))
}

.fixed {
position: fixed
}

.absolute {
position: absolute
}

.relative {
position: relative
}

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

.top-0 {
top: 0
}

.left-0 {
left: 0
}

.right-0 {
right: 0
}

.z-50 {
z-index: 50
}

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

.mb-2 {
margin-bottom: .5rem
}

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

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

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

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

.block {
display: block
}

.flex {
display: flex
}

.inline-flex {
display: inline-flex
}

.grid {
display: grid
}

.hidden {
display: none
}

.h-10 {
height: 2.5rem
}

.h-16 {
height: 4rem
}

.h-5 {
height: 1.25rem
}

.h-6 {
height: 1.5rem
}

.w-10 {
width: 2.5rem
}

.w-4 {
width: 1rem
}

.w-5 {
width: 1.25rem
}

.w-6 {
width: 1.5rem
}

.w-full {
width: 100%
}

.max-w-3xl {
max-width: 48rem
}

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

.items-center {
align-items: center
}

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

.gap-1 {
gap: .25rem
}

.gap-2 {
gap: .5rem
}

.gap-3 {
gap: .75rem
}

.gap-4 {
gap: 1rem
}

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

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

.rounded-lg {
border-radius: var(--radius)
}

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

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

.bg-background\/95 {
background-color: hsl(var(--background) / .95)
}

.bg-primary {
background-color: hsl(var(--primary))
}

.bg-primary-foreground\/10 {
background-color: hsl(var(--primary-foreground) / .1)
}

.bg-secondary {
background-color: hsl(var(--secondary))
}

.backdrop-blur-md {
--tw-backdrop-blur: blur(12px);
-webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)
}

.border-border {
border-color: hsl(var(--border))
}

.p-2 {
padding: .5rem
}

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

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

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

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

.pt-16 {
padding-top: 4rem
}

.text-center {
text-align: center
}

.text-sm {
font-size: .875rem;
line-height: 1.25rem
}

.text-xl {
font-size: 1.25rem;
line-height: 1.75rem
}

.font-bold {
font-weight: 700
}

.font-display {
font-family: Plus Jakarta Sans,system-ui,sans-serif
}

.font-semibold {
font-weight: 600
}

.text-foreground {
color: hsl(var(--foreground))
}

.text-primary-foreground {
color: hsl(var(--primary-foreground))
}

.text-primary-foreground\/60 {
color: hsl(var(--primary-foreground) / .6)
}

.text-primary-foreground\/70 {
color: hsl(var(--primary-foreground) / .7)
}

.text-primary-foreground\/80 {
color: hsl(var(--primary-foreground) / .8)
}

.text-accent {
color: hsl(var(--accent))
}

.text-muted-foreground {
color: hsl(var(--muted-foreground))
}

.hover\:bg-muted:hover {
background-color: hsl(var(--muted))
}

.hover\:bg-primary-foreground\/20:hover {
background-color: hsl(var(--primary-foreground) / .2)
}

.hover\:text-primary-foreground:hover {
color: hsl(var(--primary-foreground))
}

.transition-colors {
transition-property: color,background-color,border-color,text-decoration-color,fill,stroke;
transition-timing-function: cubic-bezier(.4,0,.2,1);
transition-duration: .15s
}

@media (min-width: 640px) {
.sm\:flex-row {
flex-direction: row
}
}

@media (min-width: 768px) {
.md\:h-20 {
height: 5rem
}

.md\:pt-20 {
padding-top: 5rem
}

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

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

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

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

@media (min-width: 1024px) {
.lg\:flex {
display: flex
}

.lg\:hidden {
display: none
}

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

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

.lg\:gap-8 {
gap: 2rem
}
}