diff --git a/public/css/app.css b/public/css/app.css index 47ac0ef..287f36e 100644 --- a/public/css/app.css +++ b/public/css/app.css @@ -977,6 +977,9 @@ .sr-only{ white-space: nowrap; border-width: 0; } +.pointer-events-none{ + pointer-events: none; +} .visible{ visibility: visible; } @@ -1015,6 +1018,9 @@ .inset-y-0{ .bottom-0{ bottom: 0px; } +.bottom-6{ + bottom: 1.5rem; +} .bottom-\[60px\]{ bottom: 60px; } @@ -1030,6 +1036,9 @@ .left-\[calc\(50\%-11rem\)\]{ .right-0{ right: 0px; } +.right-6{ + right: 1.5rem; +} .top-0{ top: 0px; } @@ -1057,6 +1066,12 @@ .z-40{ .z-50{ z-index: 50; } +.col-span-1{ + grid-column: span 1 / span 1; +} +.col-span-2{ + grid-column: span 2 / span 2; +} .-m-1{ margin: -0.25rem; } @@ -1069,15 +1084,12 @@ .z-50{ .-m-2\.5{ margin: -0.625rem; } -.m-5{ - margin: 1.25rem; -} -.m-4{ - margin: 1rem; -} .m-1{ margin: 0.25rem; } +.m-5{ + margin: 1.25rem; +} .-mx-3{ margin-left: -0.75rem; margin-right: -0.75rem; @@ -1086,6 +1098,10 @@ .m-1{ margin-top: -1.5rem; margin-bottom: -1.5rem; } +.mx-1{ + margin-left: 0.25rem; + margin-right: 0.25rem; +} .mx-auto{ margin-left: auto; margin-right: auto; @@ -1098,9 +1114,17 @@ .my-3{ margin-top: 0.75rem; margin-bottom: 0.75rem; } -.mx-2{ - margin-left: 0.5rem; - margin-right: 0.5rem; +.my-8{ + margin-top: 2rem; + margin-bottom: 2rem; +} +.my-4{ + margin-top: 1rem; + margin-bottom: 1rem; +} +.my-2{ + margin-top: 0.5rem; + margin-bottom: 0.5rem; } .mb-1{ margin-bottom: 0.25rem; @@ -1108,52 +1132,55 @@ .mb-1{ .mb-2{ margin-bottom: 0.5rem; } +.mb-20{ + margin-bottom: 5rem; +} +.mb-3{ + margin-bottom: 0.75rem; +} .mb-4{ margin-bottom: 1rem; } +.mb-6{ + margin-bottom: 1.5rem; +} .me-1{ -webkit-margin-end: 0.25rem; margin-inline-end: 0.25rem; } +.me-2{ + -webkit-margin-end: 0.5rem; + margin-inline-end: 0.5rem; +} .ml-1{ margin-left: 0.25rem; } +.ml-2{ + margin-left: 0.5rem; +} .ml-3{ margin-left: 0.75rem; } +.mt-1{ + margin-top: 0.25rem; +} .mt-10{ margin-top: 2.5rem; } .mt-2{ margin-top: 0.5rem; } -.mt-6{ - margin-top: 1.5rem; -} -.mr-4{ - margin-right: 1rem; -} -.mt-3{ - margin-top: 0.75rem; -} -.mb-3{ - margin-bottom: 0.75rem; -} -.mt-1{ - margin-top: 0.25rem; -} -.me-2{ - -webkit-margin-end: 0.5rem; - margin-inline-end: 0.5rem; -} -.mt-20{ - margin-top: 5rem; -} .mt-28{ margin-top: 7rem; } -.mb-20{ - margin-bottom: 5rem; +.mt-5{ + margin-top: 1.25rem; +} +.mt-6{ + margin-top: 1.5rem; +} +.mb-5{ + margin-bottom: 1.25rem; } .block{ display: block; @@ -1200,6 +1227,9 @@ .aspect-\[1155\/678\]{ .h-10{ height: 2.5rem; } +.h-14{ + height: 3.5rem; +} .h-16{ height: 4rem; } @@ -1218,20 +1248,29 @@ .h-4{ .h-48{ height: 12rem; } +.h-5{ + height: 1.25rem; +} .h-6{ height: 1.5rem; } .h-8{ height: 2rem; } +.h-\[52px\]{ + height: 52px; +} .h-full{ height: 100%; } .h-screen{ height: 100vh; } -.h-auto{ - height: auto; +.h-px{ + height: 1px; +} +.h-1{ + height: 0.25rem; } .min-h-full{ min-height: 100%; @@ -1242,6 +1281,12 @@ .w-1\/2{ .w-10{ width: 2.5rem; } +.w-14{ + width: 3.5rem; +} +.w-16{ + width: 4rem; +} .w-3{ width: 0.75rem; } @@ -1251,6 +1296,9 @@ .w-4{ .w-44{ width: 11rem; } +.w-5{ + width: 1.25rem; +} .w-6{ width: 1.5rem; } @@ -1263,17 +1311,23 @@ .w-8{ .w-\[36\.125rem\]{ width: 36.125rem; } +.w-\[52px\]{ + width: 52px; +} .w-auto{ width: auto; } .w-full{ width: 100%; } -.w-32{ - width: 8rem; +.w-11{ + width: 2.75rem; } -.w-16{ - width: 4rem; +.w-48{ + width: 12rem; +} +.w-24{ + width: 6rem; } .max-w-2xl{ max-width: 42rem; @@ -1293,6 +1347,10 @@ .flex-shrink{ .flex-shrink-0{ flex-shrink: 0; } +.border-spacing-x-10{ + --tw-border-spacing-x: 2.5rem; + border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-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)); @@ -1364,12 +1422,18 @@ .grid-cols-4{ .grid-cols-7{ grid-template-columns: repeat(7, minmax(0, 1fr)); } +.grid-rows-1{ + grid-template-rows: repeat(1, minmax(0, 1fr)); +} +.grid-rows-2{ + grid-template-rows: repeat(2, minmax(0, 1fr)); +} +.grid-rows-3{ + grid-template-rows: repeat(3, minmax(0, 1fr)); +} .flex-col{ flex-direction: column; } -.flex-wrap{ - flex-wrap: wrap; -} .items-start{ align-items: flex-start; } @@ -1394,6 +1458,9 @@ .justify-between{ .gap-4{ gap: 1rem; } +.gap-6{ + gap: 1.5rem; +} .gap-x-6{ -moz-column-gap: 1.5rem; column-gap: 1.5rem; @@ -1470,24 +1537,15 @@ .border{ .border-0{ border-width: 0px; } -.border-2{ - border-width: 2px; +.border-4{ + border-width: 4px; } -.border-y-2{ - border-top-width: 2px; - border-bottom-width: 2px; +.border-x-4{ + border-left-width: 4px; + border-right-width: 4px; } -.border-t{ - border-top-width: 1px; -} -.border-e-2{ - border-inline-end-width: 2px; -} -.border-r{ - border-right-width: 1px; -} -.border-b{ - border-bottom-width: 1px; +.border-r-4{ + border-right-width: 4px; } .border-dashed{ border-style: dashed; @@ -1512,14 +1570,18 @@ .border-gray-300{ --tw-border-opacity: 1; border-color: rgb(209 213 219 / var(--tw-border-opacity)); } -.border-red-200{ +.border-red-300{ --tw-border-opacity: 1; - border-color: rgb(251 213 213 / var(--tw-border-opacity)); + border-color: rgb(248 180 180 / var(--tw-border-opacity)); } .border-red-500{ --tw-border-opacity: 1; border-color: rgb(240 82 82 / var(--tw-border-opacity)); } +.border-blue-500{ + --tw-border-opacity: 1; + border-color: rgb(63 131 248 / var(--tw-border-opacity)); +} .bg-blue-100{ --tw-bg-opacity: 1; background-color: rgb(225 239 254 / var(--tw-bg-opacity)); @@ -1548,6 +1610,10 @@ .bg-gray-900{ --tw-bg-opacity: 1; background-color: rgb(17 24 39 / var(--tw-bg-opacity)); } +.bg-green-100{ + --tw-bg-opacity: 1; + background-color: rgb(222 247 236 / var(--tw-bg-opacity)); +} .bg-indigo-600{ --tw-bg-opacity: 1; background-color: rgb(88 80 236 / var(--tw-bg-opacity)); @@ -1556,6 +1622,10 @@ .bg-purple-700{ --tw-bg-opacity: 1; background-color: rgb(108 43 217 / var(--tw-bg-opacity)); } +.bg-red-100{ + --tw-bg-opacity: 1; + background-color: rgb(253 232 232 / var(--tw-bg-opacity)); +} .bg-white{ --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity)); @@ -1662,13 +1732,19 @@ .py-8{ padding-top: 2rem; padding-bottom: 2rem; } -.py-16{ - padding-top: 4rem; - padding-bottom: 4rem; +.pe-2{ + -webkit-padding-end: 0.5rem; + padding-inline-end: 0.5rem; +} +.pl-10{ + padding-left: 2.5rem; } .pl-11{ padding-left: 2.75rem; } +.pl-3{ + padding-left: 0.75rem; +} .ps-3{ -webkit-padding-start: 0.75rem; padding-inline-start: 0.75rem; @@ -1680,21 +1756,6 @@ .ps-5{ .pt-2{ padding-top: 0.5rem; } -.pt-16{ - padding-top: 4rem; -} -.pe-3{ - -webkit-padding-end: 0.75rem; - padding-inline-end: 0.75rem; -} -.pe-1{ - -webkit-padding-end: 0.25rem; - padding-inline-end: 0.25rem; -} -.pe-2{ - -webkit-padding-end: 0.5rem; - padding-inline-end: 0.5rem; -} .text-left{ text-align: left; } @@ -1704,19 +1765,13 @@ .text-center{ .text-right{ text-align: right; } -.text-start{ - text-align: start; -} -.text-end{ - text-align: end; -} .text-2xl{ font-size: 1.5rem; line-height: 2rem; } -.text-4xl{ - font-size: 2.25rem; - line-height: 2.5rem; +.text-6xl{ + font-size: 3.75rem; + line-height: 1; } .text-base{ font-size: 1rem; @@ -1730,10 +1785,6 @@ .text-sm{ font-size: 0.875rem; line-height: 1.25rem; } -.text-6xl{ - font-size: 3.75rem; - line-height: 1; -} .text-xl{ font-size: 1.25rem; line-height: 1.75rem; @@ -1765,9 +1816,6 @@ .leading-8{ .leading-9{ line-height: 2.25rem; } -.leading-10{ - line-height: 2.5rem; -} .tracking-tight{ letter-spacing: -0.025em; } @@ -1779,6 +1827,10 @@ .text-blue-600{ --tw-text-opacity: 1; color: rgb(28 100 242 / var(--tw-text-opacity)); } +.text-blue-700{ + --tw-text-opacity: 1; + color: rgb(26 86 219 / var(--tw-text-opacity)); +} .text-blue-800{ --tw-text-opacity: 1; color: rgb(30 66 159 / var(--tw-text-opacity)); @@ -1811,6 +1863,10 @@ .text-indigo-600{ --tw-text-opacity: 1; color: rgb(88 80 236 / var(--tw-text-opacity)); } +.text-red-700{ + --tw-text-opacity: 1; + color: rgb(200 30 30 / var(--tw-text-opacity)); +} .text-white{ --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity)); @@ -1898,6 +1954,9 @@ .transition-transform{ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } +.duration-300{ + transition-duration: 300ms; +} .duration-75{ transition-duration: 75ms; } @@ -1912,6 +1971,54 @@ .placeholder\:text-gray-400::placeholder{ --tw-text-opacity: 1; color: rgb(156 163 175 / var(--tw-text-opacity)); } +.after\:absolute::after{ + content: var(--tw-content); + position: absolute; +} +.after\:left-\[2px\]::after{ + content: var(--tw-content); + left: 2px; +} +.after\:top-\[2px\]::after{ + content: var(--tw-content); + top: 2px; +} +.after\:h-5::after{ + content: var(--tw-content); + height: 1.25rem; +} +.after\:w-5::after{ + content: var(--tw-content); + width: 1.25rem; +} +.after\:rounded-full::after{ + content: var(--tw-content); + border-radius: 9999px; +} +.after\:border::after{ + content: var(--tw-content); + border-width: 1px; +} +.after\:border-gray-300::after{ + content: var(--tw-content); + --tw-border-opacity: 1; + border-color: rgb(209 213 219 / var(--tw-border-opacity)); +} +.after\:bg-white::after{ + content: var(--tw-content); + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity)); +} +.after\:transition-all::after{ + content: var(--tw-content); + transition-property: all; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; +} +.after\:content-\[\'\'\]::after{ + --tw-content: ''; + content: var(--tw-content); +} .hover\:border-gray-300:hover{ --tw-border-opacity: 1; border-color: rgb(209 213 219 / var(--tw-border-opacity)); @@ -1928,6 +2035,10 @@ .hover\:bg-gray-50:hover{ --tw-bg-opacity: 1; background-color: rgb(249 250 251 / var(--tw-bg-opacity)); } +.hover\:bg-green-200:hover{ + --tw-bg-opacity: 1; + background-color: rgb(188 240 218 / var(--tw-bg-opacity)); +} .hover\:bg-indigo-500:hover{ --tw-bg-opacity: 1; background-color: rgb(104 117 245 / var(--tw-bg-opacity)); @@ -1936,6 +2047,10 @@ .hover\:bg-purple-500:hover{ --tw-bg-opacity: 1; background-color: rgb(144 97 249 / var(--tw-bg-opacity)); } +.hover\:bg-red-200:hover{ + --tw-bg-opacity: 1; + background-color: rgb(251 213 213 / var(--tw-bg-opacity)); +} .hover\:bg-white:hover{ --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity)); @@ -1959,6 +2074,10 @@ .hover\:text-indigo-500:hover{ .hover\:underline:hover{ text-decoration-line: underline; } +.focus\:border-blue-500:focus{ + --tw-border-opacity: 1; + border-color: rgb(63 131 248 / var(--tw-border-opacity)); +} .focus\:outline-none:focus{ outline: 2px solid transparent; outline-offset: 2px; @@ -1980,10 +2099,18 @@ .focus\:ring-blue-300:focus{ --tw-ring-opacity: 1; --tw-ring-color: rgb(164 202 254 / var(--tw-ring-opacity)); } +.focus\:ring-blue-500:focus{ + --tw-ring-opacity: 1; + --tw-ring-color: rgb(63 131 248 / var(--tw-ring-opacity)); +} .focus\:ring-gray-200:focus{ --tw-ring-opacity: 1; --tw-ring-color: rgb(229 231 235 / var(--tw-ring-opacity)); } +.focus\:ring-gray-300:focus{ + --tw-ring-opacity: 1; + --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity)); +} .focus\:ring-indigo-600:focus{ --tw-ring-opacity: 1; --tw-ring-color: rgb(88 80 236 / var(--tw-ring-opacity)); @@ -2000,10 +2127,41 @@ .focus-visible\:outline-offset-2:focus-visible{ .focus-visible\:outline-indigo-600:focus-visible{ outline-color: #5850EC; } +.group:hover .group-hover\:rotate-45{ + --tw-rotate: 45deg; + 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\:text-gray-900{ --tw-text-opacity: 1; color: rgb(17 24 39 / var(--tw-text-opacity)); } +.peer:checked ~ .peer-checked\:bg-blue-600{ + --tw-bg-opacity: 1; + background-color: rgb(28 100 242 / var(--tw-bg-opacity)); +} +.peer:checked ~ .peer-checked\:after\:translate-x-full::after{ + content: var(--tw-content); + --tw-translate-x: 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:checked ~ .peer-checked\:after\:border-white::after{ + content: var(--tw-content); + --tw-border-opacity: 1; + border-color: rgb(255 255 255 / var(--tw-border-opacity)); +} +.peer:focus ~ .peer-focus\:outline-none{ + outline: 2px solid transparent; + outline-offset: 2px; +} +.peer:focus ~ .peer-focus\:ring-4{ + --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(4px + 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); +} +.peer:focus ~ .peer-focus\:ring-blue-300{ + --tw-ring-opacity: 1; + --tw-ring-color: rgb(164 202 254 / var(--tw-ring-opacity)); +} :is(.dark .dark\:divide-gray-600) > :not([hidden]) ~ :not([hidden]){ --tw-divide-opacity: 1; border-color: rgb(75 85 99 / var(--tw-divide-opacity)); @@ -2077,10 +2235,21 @@ :is(.dark .dark\:text-white){ --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity)); } +:is(.dark .dark\:placeholder-gray-400)::-moz-placeholder{ + --tw-placeholder-opacity: 1; + color: rgb(156 163 175 / var(--tw-placeholder-opacity)); +} +:is(.dark .dark\:placeholder-gray-400)::placeholder{ + --tw-placeholder-opacity: 1; + color: rgb(156 163 175 / var(--tw-placeholder-opacity)); +} :is(.dark .dark\:ring-gray-500){ --tw-ring-opacity: 1; --tw-ring-color: rgb(107 114 128 / var(--tw-ring-opacity)); } +:is(.dark .dark\:ring-offset-gray-800){ + --tw-ring-offset-color: #1F2937; +} :is(.dark .dark\:hover\:bg-blue-700:hover){ --tw-bg-opacity: 1; background-color: rgb(26 86 219 / var(--tw-bg-opacity)); @@ -2109,6 +2278,26 @@ :is(.dark .dark\:hover\:text-white:hover){ --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity)); } +:is(.dark .dark\:focus\:border-blue-500:focus){ + --tw-border-opacity: 1; + border-color: rgb(63 131 248 / var(--tw-border-opacity)); +} +:is(.dark .dark\:focus\:ring-blue-500:focus){ + --tw-ring-opacity: 1; + --tw-ring-color: rgb(63 131 248 / var(--tw-ring-opacity)); +} +:is(.dark .dark\:focus\:ring-blue-600:focus){ + --tw-ring-opacity: 1; + --tw-ring-color: rgb(28 100 242 / var(--tw-ring-opacity)); +} +:is(.dark .dark\:focus\:ring-blue-800:focus){ + --tw-ring-opacity: 1; + --tw-ring-color: rgb(30 66 159 / var(--tw-ring-opacity)); +} +:is(.dark .dark\:focus\:ring-gray-400:focus){ + --tw-ring-opacity: 1; + --tw-ring-color: rgb(156 163 175 / var(--tw-ring-opacity)); +} :is(.dark .dark\:focus\:ring-gray-600:focus){ --tw-ring-opacity: 1; --tw-ring-color: rgb(75 85 99 / var(--tw-ring-opacity)); @@ -2117,6 +2306,10 @@ :is(.dark .group:hover .dark\:group-hover\:text-white){ --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity)); } +:is(.dark .peer:focus ~ .dark\:peer-focus\:ring-blue-800){ + --tw-ring-opacity: 1; + --tw-ring-color: rgb(30 66 159 / var(--tw-ring-opacity)); +} @media (min-width: 640px){ .sm\:-top-80{ top: -20rem; @@ -2134,22 +2327,25 @@ @media (min-width: 640px){ margin-left: auto; margin-right: auto; } - .sm\:ml-64{ - margin-left: 16rem; - } - .sm\:mt-0{ - margin-top: 0px; - } .sm\:me-4{ -webkit-margin-end: 1rem; margin-inline-end: 1rem; } + .sm\:ml-64{ + margin-left: 16rem; + } + .sm\:mb-3{ + margin-bottom: 0.75rem; + } .sm\:hidden{ display: none; } .sm\:w-\[72\.1875rem\]{ width: 72.1875rem; } + .sm\:w-auto{ + width: auto; + } .sm\:w-full{ width: 100%; } @@ -2163,23 +2359,16 @@ @media (min-width: 640px){ .sm\:grid-cols-2{ grid-template-columns: repeat(2, minmax(0, 1fr)); } - .sm\:p-8{ - padding: 2rem; - } .sm\:p-4{ padding: 1rem; } + .sm\:p-8{ + padding: 2rem; + } .sm\:py-16{ padding-top: 4rem; padding-bottom: 4rem; } - .sm\:py-48{ - padding-top: 12rem; - padding-bottom: 12rem; - } - .sm\:text-center{ - text-align: center; - } .sm\:text-6xl{ font-size: 3.75rem; line-height: 1; @@ -2201,41 +2390,42 @@ @media (min-width: 640px){ } } @media (min-width: 768px){ - .md\:mr-6{ - margin-right: 1.5rem; + .md\:my-10{ + margin-top: 2.5rem; + margin-bottom: 2.5rem; + } + .md\:my-5{ + margin-top: 1.25rem; + margin-bottom: 1.25rem; + } + .md\:my-6{ + margin-top: 1.5rem; + margin-bottom: 1.5rem; + } + .md\:mb-0{ + margin-bottom: 0px; } .md\:flex{ display: flex; } + .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\:items-start{ - align-items: flex-start; - } .md\:items-end{ align-items: flex-end; } .md\:items-center{ align-items: center; } - .md\:justify-center{ - justify-content: center; - } .md\:justify-between{ justify-content: space-between; } .md\:p-6{ padding: 1.5rem; } - .md\:py-28{ - padding-top: 7rem; - padding-bottom: 7rem; - } - .md\:py-52{ - padding-top: 13rem; - padding-bottom: 13rem; - } } @media (min-width: 1024px){ .lg\:flex{ @@ -2247,9 +2437,6 @@ @media (min-width: 1024px){ .lg\:flex-1{ flex: 1 1 0%; } - .lg\:grid-cols-4{ - grid-template-columns: repeat(4, minmax(0, 1fr)); - } .lg\:justify-end{ justify-content: flex-end; } @@ -2265,33 +2452,18 @@ @media (min-width: 1024px){ padding-top: 4rem; padding-bottom: 4rem; } - .lg\:py-56{ - padding-top: 14rem; - padding-bottom: 14rem; + .lg\:py-40{ + padding-top: 10rem; + padding-bottom: 10rem; } - .lg\:py-52{ - padding-top: 13rem; - padding-bottom: 13rem; +} +@media (min-width: 1280px){ + .xl\:grid-cols-4{ + grid-template-columns: repeat(4, minmax(0, 1fr)); } - .lg\:py-48{ + .xl\:py-48{ padding-top: 12rem; padding-bottom: 12rem; } } -@media (min-width: 1280px){ - .xl\:grid-cols-6{ - grid-template-columns: repeat(6, minmax(0, 1fr)); - } - .xl\:grid-cols-4{ - grid-template-columns: repeat(4, minmax(0, 1fr)); - } - .xl\:py-60{ - padding-top: 15rem; - padding-bottom: 15rem; - } - .xl\:py-80{ - padding-top: 20rem; - padding-bottom: 20rem; - } -}