wots-ui-chameleon/dist/main.css

Sass framework for Wots UI

@keyframes draw-left {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}
@keyframes draw-right {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}
@keyframes draw-up {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}
@keyframes draw-down {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}
@keyframes fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes slide-left-xs {
  from {
    transform: translateX(var(--distance-xs));
  }
  to {
    transform: translateX(0);
  }
}
@keyframes slide-left-sm {
  from {
    transform: translateX(var(--distance-sm));
  }
  to {
    transform: translateX(0);
  }
}
@keyframes slide-left-md {
  from {
    transform: translateX(var(--distance-md));
  }
  to {
    transform: translateX(0);
  }
}
@keyframes slide-left-lg {
  from {
    transform: translateX(var(--distance-lg));
  }
  to {
    transform: translateX(0);
  }
}
@keyframes slide-left-xl {
  from {
    transform: translateX(var(--distance-xl));
  }
  to {
    transform: translateX(0);
  }
}
@keyframes slide-right-xs {
  from {
    transform: translateX(calc(var(--distance-xs) * -1));
  }
  to {
    transform: translateX(0);
  }
}
@keyframes slide-right-sm {
  from {
    transform: translateX(calc(var(--distance-sm) * -1));
  }
  to {
    transform: translateX(0);
  }
}
@keyframes slide-right-md {
  from {
    transform: translateX(calc(var(--distance-md) * -1));
  }
  to {
    transform: translateX(0);
  }
}
@keyframes slide-right-lg {
  from {
    transform: translateX(calc(var(--distance-lg) * -1));
  }
  to {
    transform: translateX(0);
  }
}
@keyframes slide-right-xl {
  from {
    transform: translateX(calc(var(--distance-xl) * -1));
  }
  to {
    transform: translateX(0);
  }
}
@keyframes slide-up-xs {
  from {
    transform: translateY(var(--distance-xs));
  }
  to {
    transform: translateY(0);
  }
}
@keyframes slide-up-sm {
  from {
    transform: translateY(var(--distance-sm));
  }
  to {
    transform: translateY(0);
  }
}
@keyframes slide-up-md {
  from {
    transform: translateY(var(--distance-md));
  }
  to {
    transform: translateY(0);
  }
}
@keyframes slide-up-lg {
  from {
    transform: translateY(var(--distance-lg));
  }
  to {
    transform: translateY(0);
  }
}
@keyframes slide-up-xl {
  from {
    transform: translateY(var(--distance-xl));
  }
  to {
    transform: translateY(0);
  }
}
@keyframes slide-down-xs {
  from {
    transform: translateY(calc(var(--distance-xs) * -1));
  }
  to {
    transform: translateY(0);
  }
}
@keyframes slide-down-sm {
  from {
    transform: translateY(calc(var(--distance-sm) * -1));
  }
  to {
    transform: translateY(0);
  }
}
@keyframes slide-down-md {
  from {
    transform: translateY(calc(var(--distance-md) * -1));
  }
  to {
    transform: translateY(0);
  }
}
@keyframes slide-down-lg {
  from {
    transform: translateY(calc(var(--distance-lg) * -1));
  }
  to {
    transform: translateY(0);
  }
}
@keyframes slide-down-xl {
  from {
    transform: translateY(calc(var(--distance-xl) * -1));
  }
  to {
    transform: translateY(0);
  }
}
@keyframes zoom-in-xs {
  from {
    transform: scale(calc(100% - var(--distance-xs)));
  }
  to {
    transform: scale(1);
  }
}
@keyframes zoom-in-sm {
  from {
    transform: scale(calc(100% - var(--distance-sm)));
  }
  to {
    transform: scale(1);
  }
}
@keyframes zoom-in-md {
  from {
    transform: scale(calc(100% - var(--distance-md)));
  }
  to {
    transform: scale(1);
  }
}
@keyframes zoom-in-lg {
  from {
    transform: scale(calc(100% - var(--distance-lg)));
  }
  to {
    transform: scale(1);
  }
}
@keyframes zoom-in-xl {
  from {
    transform: scale(calc(100% - var(--distance-xl)));
  }
  to {
    transform: scale(1);
  }
}
@keyframes zoom-out-xs {
  from {
    transform: scale(calc(100% + var(--distance-xs)));
  }
  to {
    transform: scale(1);
  }
}
@keyframes zoom-out-sm {
  from {
    transform: scale(calc(100% + var(--distance-sm)));
  }
  to {
    transform: scale(1);
  }
}
@keyframes zoom-out-md {
  from {
    transform: scale(calc(100% + var(--distance-md)));
  }
  to {
    transform: scale(1);
  }
}
@keyframes zoom-out-lg {
  from {
    transform: scale(calc(100% + var(--distance-lg)));
  }
  to {
    transform: scale(1);
  }
}
@keyframes zoom-out-xl {
  from {
    transform: scale(calc(100% + var(--distance-xl)));
  }
  to {
    transform: scale(1);
  }
}
:root {
  --clr-body: hsl(200, 10%, 98%);
  --clr-text: hsl(0, 0%, 5%);
  --clr-text-light: hsl(0, 0%, 95%);
  --clr-text-dark: hsl(0, 0%, 5%);
  --clr-main-primary: white;
  --clr-main-primary-lighter: white;
  --clr-main-primary-darker: #d9d9d9;
  --clr-main-primary-text: var(--clr-text-dark);
  --clr-main-secondary: #e6e6e6;
  --clr-main-secondary-lighter: #e9e9e9;
  --clr-main-secondary-darker: #c3c3c3;
  --clr-main-secondary-text: var(--clr-text-dark);
  --clr-main-tertiary: #00aaff;
  --clr-main-tertiary-lighter: #26b7ff;
  --clr-main-tertiary-darker: #0091d9;
  --clr-main-tertiary-text: var(--clr-text-light);
  --clr-main-border: #c3c3c3;
  --clr-main-overlay: rgba(230, 230, 230, 0.75);
  --clr-main-shadow-primary: rgba(195, 195, 195, 0.2);
  --clr-main-shadow-secondary: rgba(195, 195, 195, 0.4);
}

:root {
  --clr-primary: var(--clr-main-primary);
  --clr-primary-lighter: var(--clr-main-primary-lighter);
  --clr-primary-darker: var(--clr-main-primary-darker);
  --clr-primary-text: var(--clr-main-primary-text);
  --clr-secondary: var(--clr-main-secondary);
  --clr-secondary-lighter: var(--clr-main-secondary-lighter);
  --clr-secondary-darker: var(--clr-main-secondary-darker);
  --clr-secondary-text: var(--clr-main-secondary-text);
  --clr-tertiary: var(--clr-main-tertiary);
  --clr-tertiary-lighter: var(--clr-main-tertiary-lighter);
  --clr-tertiary-darker: var(--clr-main-tertiary-darker);
  --clr-tertiary-text: var(--clr-main-tertiary-text);
  --clr-border: var(--clr-main-border);
  --clr-overlay: var(--clr-main-overlay);
  --clr-shadow-primary: var(--clr-main-shadow-primary);
  --clr-shadow-secondary: var(--clr-main-shadow-secondary);
}

:root {
  --clr-amazon-primary: #ff9900;
  --clr-amazon-primary-lighter: #ffa826;
  --clr-amazon-primary-darker: #d98200;
  --clr-amazon-primary-text: var(--clr-text-dark);
  --clr-amazon-secondary: #f2f2f2;
  --clr-amazon-secondary-lighter: #f4f4f4;
  --clr-amazon-secondary-darker: #cecece;
  --clr-amazon-secondary-text: var(--clr-text-dark);
  --clr-amazon-tertiary: #4dafff;
  --clr-amazon-tertiary-lighter: #67bbff;
  --clr-amazon-tertiary-darker: #1b98ff;
  --clr-amazon-tertiary-text: var(--clr-text-dark);
  --clr-amazon-border: #cecece;
  --clr-amazon-overlay: rgba(242, 242, 242, 0.75);
  --clr-amazon-shadow-primary: rgba(206, 206, 206, 0.2);
  --clr-amazon-shadow-secondary: rgba(206, 206, 206, 0.4);
}

:root {
  --clr-facebook-primary: #1876f2;
  --clr-facebook-primary-lighter: #3a8bf4;
  --clr-facebook-primary-darker: #0c63d5;
  --clr-facebook-primary-text: var(--clr-text-light);
  --clr-facebook-secondary: white;
  --clr-facebook-secondary-lighter: white;
  --clr-facebook-secondary-darker: #d9d9d9;
  --clr-facebook-secondary-text: var(--clr-text-dark);
  --clr-facebook-tertiary: #ebebeb;
  --clr-facebook-tertiary-lighter: #eeeeee;
  --clr-facebook-tertiary-darker: #c7c7c7;
  --clr-facebook-tertiary-text: var(--clr-text-dark);
  --clr-facebook-border: #d9d9d9;
  --clr-facebook-overlay: rgba(255, 255, 255, 0.75);
  --clr-facebook-shadow-primary: rgba(217, 217, 217, 0.2);
  --clr-facebook-shadow-secondary: rgba(217, 217, 217, 0.4);
}

:root {
  --clr-instagram-primary: #e2326c;
  --clr-instagram-primary-lighter: #e65182;
  --clr-instagram-primary-darker: #cd1d58;
  --clr-instagram-primary-text: var(--clr-text-light);
  --clr-instagram-secondary: #843bb5;
  --clr-instagram-secondary-lighter: #9852c7;
  --clr-instagram-secondary-darker: #70329a;
  --clr-instagram-secondary-text: var(--clr-text-light);
  --clr-instagram-tertiary: #f77636;
  --clr-instagram-tertiary-lighter: #f88b54;
  --clr-instagram-tertiary-darker: #f5590b;
  --clr-instagram-tertiary-text: var(--clr-text-dark);
  --clr-instagram-border: #9852c7;
  --clr-instagram-overlay: rgba(132, 59, 181, 0.75);
  --clr-instagram-shadow-primary: rgba(152, 82, 199, 0.2);
  --clr-instagram-shadow-secondary: rgba(152, 82, 199, 0.4);
}

:root {
  --clr-spotify-primary: #1db954;
  --clr-spotify-primary-lighter: #26dd66;
  --clr-spotify-primary-darker: #199d47;
  --clr-spotify-primary-text: var(--clr-text-light);
  --clr-spotify-secondary: #191414;
  --clr-spotify-secondary-lighter: #403333;
  --clr-spotify-secondary-darker: #161111;
  --clr-spotify-secondary-text: var(--clr-text-light);
  --clr-spotify-tertiary: white;
  --clr-spotify-tertiary-lighter: white;
  --clr-spotify-tertiary-darker: #d9d9d9;
  --clr-spotify-tertiary-text: var(--clr-text-dark);
  --clr-spotify-border: #403333;
  --clr-spotify-overlay: rgba(25, 20, 20, 0.75);
  --clr-spotify-shadow-primary: rgba(38, 221, 102, 0.2);
  --clr-spotify-shadow-secondary: rgba(38, 221, 102, 0.4);
}

:root {
  --clr-tiktok-primary: #68c8cf;
  --clr-tiktok-primary-lighter: #7fd1d6;
  --clr-tiktok-primary-darker: #44bcc4;
  --clr-tiktok-primary-text: var(--clr-text-dark);
  --clr-tiktok-secondary: #ee1b50;
  --clr-tiktok-secondary-lighter: #f03d6a;
  --clr-tiktok-secondary-darker: #d21040;
  --clr-tiktok-secondary-text: var(--clr-text-light);
  --clr-tiktok-tertiary: black;
  --clr-tiktok-tertiary-lighter: #262626;
  --clr-tiktok-tertiary-darker: black;
  --clr-tiktok-tertiary-text: var(--clr-text-light);
  --clr-tiktok-border: #f03d6a;
  --clr-tiktok-overlay: rgba(238, 27, 80, 0.75);
  --clr-tiktok-shadow-primary: rgba(240, 61, 106, 0.2);
  --clr-tiktok-shadow-secondary: rgba(240, 61, 106, 0.4);
}

:root {
  --clr-twitch-primary: #9147ff;
  --clr-twitch-primary-lighter: #a163ff;
  --clr-twitch-primary-darker: #7316ff;
  --clr-twitch-primary-text: var(--clr-text-light);
  --clr-twitch-secondary: white;
  --clr-twitch-secondary-lighter: white;
  --clr-twitch-secondary-darker: #d9d9d9;
  --clr-twitch-secondary-text: var(--clr-text-dark);
  --clr-twitch-tertiary: #cc0000;
  --clr-twitch-tertiary-lighter: #fa0000;
  --clr-twitch-tertiary-darker: #ad0000;
  --clr-twitch-tertiary-text: var(--clr-text-light);
  --clr-twitch-border: #d9d9d9;
  --clr-twitch-overlay: rgba(255, 255, 255, 0.75);
  --clr-twitch-shadow-primary: rgba(217, 217, 217, 0.2);
  --clr-twitch-shadow-secondary: rgba(217, 217, 217, 0.4);
}

:root {
  --clr-twitter-primary: #1ca0f2;
  --clr-twitter-primary-lighter: #3eaef4;
  --clr-twitter-primary-darker: #0d8bd9;
  --clr-twitter-primary-text: var(--clr-text-light);
  --clr-twitter-secondary: #f5f8fa;
  --clr-twitter-secondary-lighter: #f6f9fb;
  --clr-twitter-secondary-darker: #c3d5e1;
  --clr-twitter-secondary-text: var(--clr-text-dark);
  --clr-twitter-tertiary: #e2e9ee;
  --clr-twitter-tertiary-lighter: #e7ecf0;
  --clr-twitter-tertiary-darker: #b7c8d4;
  --clr-twitter-tertiary-text: var(--clr-text-dark);
  --clr-twitter-border: #c3d5e1;
  --clr-twitter-overlay: rgba(245, 248, 250, 0.75);
  --clr-twitter-shadow-primary: rgba(195, 213, 225, 0.2);
  --clr-twitter-shadow-secondary: rgba(195, 213, 225, 0.4);
}

:root {
  --clr-whatsapp-primary: #25d466;
  --clr-whatsapp-primary-lighter: #43de7c;
  --clr-whatsapp-primary-darker: #20b556;
  --clr-whatsapp-primary-text: var(--clr-text-dark);
  --clr-whatsapp-secondary: #128c7e;
  --clr-whatsapp-secondary-lighter: #18bba8;
  --clr-whatsapp-secondary-darker: #0f776b;
  --clr-whatsapp-secondary-text: var(--clr-text-light);
  --clr-whatsapp-tertiary: #f2f2f2;
  --clr-whatsapp-tertiary-lighter: #f4f4f4;
  --clr-whatsapp-tertiary-darker: #cecece;
  --clr-whatsapp-tertiary-text: var(--clr-text-dark);
  --clr-whatsapp-border: #18bba8;
  --clr-whatsapp-overlay: rgba(18, 140, 126, 0.75);
  --clr-whatsapp-shadow-primary: rgba(24, 187, 168, 0.2);
  --clr-whatsapp-shadow-secondary: rgba(24, 187, 168, 0.4);
}

:root {
  --clr-youtube-primary: red;
  --clr-youtube-primary-lighter: #ff2626;
  --clr-youtube-primary-darker: #d90000;
  --clr-youtube-primary-text: var(--clr-text-light);
  --clr-youtube-secondary: white;
  --clr-youtube-secondary-lighter: white;
  --clr-youtube-secondary-darker: #d9d9d9;
  --clr-youtube-secondary-text: var(--clr-text-dark);
  --clr-youtube-tertiary: #292929;
  --clr-youtube-tertiary-lighter: #494949;
  --clr-youtube-tertiary-darker: #232323;
  --clr-youtube-tertiary-text: var(--clr-text-light);
  --clr-youtube-border: #d9d9d9;
  --clr-youtube-overlay: rgba(255, 255, 255, 0.75);
  --clr-youtube-shadow-primary: rgba(217, 217, 217, 0.2);
  --clr-youtube-shadow-secondary: rgba(217, 217, 217, 0.4);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  overflow-x: hidden;
  background-color: var(--clr-body);
  color: var(--clr-text);
  font-family: var(--ff-main);
  font-size: var(--fs-sm);
}

:root {
  --border-radius: max(5px, 0.5rem);
  --distance-xs: 10%;
  --distance-sm: 20%;
  --distance-md: 30%;
  --distance-lg: 40%;
  --distance-xl: 50%;
  --duration-xs: 0.2s;
  --duration-sm: 0.33s;
  --duration-md: 0.5s;
  --duration-lg: 1s;
  --duration-xl: 2s;
  --ff-input: monospace;
  --ff-main: sans-serif;
  --ff-title: serif;
  --ff-jumbo: sans-serif;
  --fs-xs: 1rem;
  --fs-sm: 1.5rem;
  --fs-md: 2rem;
  --fs-lg: 4rem;
  --fs-xl: 6rem;
  --responsive-fs-xs: 0.625em;
  --responsive-fs-sm: 0.6875em;
  --responsive-fs-md: 0.75em;
  --responsive-fs-lg: 0.8125em;
  --responsive-fs-xl: max(0.875em, 0.4vw);
  --responsive-fs-fluid: 1;
  --size-xs: 12rem;
  --size-sm: 24rem;
  --size-md: 48rem;
  --size-lg: 84rem;
  --size-xl: 144rem;
  --size-content: 120rem;
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 3rem;
  --space-xl: 6rem;
}

.ani-draw-left {
  animation: draw-left var(--duration-sm) normal none 1 ease-out;
}
.ani-draw-right {
  animation: draw-right var(--duration-sm) normal none 1 ease-out;
}
.ani-draw-up {
  animation: draw-up var(--duration-sm) normal none 1 ease-out;
}
.ani-draw-down {
  animation: draw-down var(--duration-sm) normal none 1 ease-out;
}
.ani-fade {
  animation: fade var(--duration-sm) normal none 1 ease-out;
}
.ani-blink {
  animation: fade var(--duration-sm) normal none infinite steps(2, jump-none);
}
.ani-slide-left-xs {
  animation: slide-left-xs var(--duration-sm) normal none 1 ease-out;
}
.ani-slide-left-sm {
  animation: slide-left-sm var(--duration-sm) normal none 1 ease-out;
}
.ani-slide-left-md {
  animation: slide-left-md var(--duration-sm) normal none 1 ease-out;
}
.ani-slide-left-lg {
  animation: slide-left-lg var(--duration-sm) normal none 1 ease-out;
}
.ani-slide-left-xl {
  animation: slide-left-xl var(--duration-sm) normal none 1 ease-out;
}
.ani-slide-right-xs {
  animation: slide-right-xs var(--duration-sm) normal none 1 ease-out;
}
.ani-slide-right-sm {
  animation: slide-right-sm var(--duration-sm) normal none 1 ease-out;
}
.ani-slide-right-md {
  animation: slide-right-md var(--duration-sm) normal none 1 ease-out;
}
.ani-slide-right-lg {
  animation: slide-right-lg var(--duration-sm) normal none 1 ease-out;
}
.ani-slide-right-xl {
  animation: slide-right-xl var(--duration-sm) normal none 1 ease-out;
}
.ani-slide-up-xs {
  animation: slide-up-xs var(--duration-sm) normal none 1 ease-out;
}
.ani-slide-up-sm {
  animation: slide-up-sm var(--duration-sm) normal none 1 ease-out;
}
.ani-slide-up-md {
  animation: slide-up-md var(--duration-sm) normal none 1 ease-out;
}
.ani-slide-up-lg {
  animation: slide-up-lg var(--duration-sm) normal none 1 ease-out;
}
.ani-slide-up-xl {
  animation: slide-up-xl var(--duration-sm) normal none 1 ease-out;
}
.ani-slide-down-xs {
  animation: slide-down-xs var(--duration-sm) normal none 1 ease-out;
}
.ani-slide-down-sm {
  animation: slide-down-sm var(--duration-sm) normal none 1 ease-out;
}
.ani-slide-down-md {
  animation: slide-down-md var(--duration-sm) normal none 1 ease-out;
}
.ani-slide-down-lg {
  animation: slide-down-lg var(--duration-sm) normal none 1 ease-out;
}
.ani-slide-down-xl {
  animation: slide-down-xl var(--duration-sm) normal none 1 ease-out;
}
.ani-zoom-in-xs {
  animation: zoom-in-xs var(--duration-sm) normal none 1 ease-out;
}
.ani-zoom-in-sm {
  animation: zoom-in-sm var(--duration-sm) normal none 1 ease-out;
}
.ani-zoom-in-md {
  animation: zoom-in-md var(--duration-sm) normal none 1 ease-out;
}
.ani-zoom-in-lg {
  animation: zoom-in-lg var(--duration-sm) normal none 1 ease-out;
}
.ani-zoom-in-xl {
  animation: zoom-in-xl var(--duration-sm) normal none 1 ease-out;
}
.ani-zoom-out-xs {
  animation: zoom-out-xs var(--duration-sm) normal none 1 ease-out;
}
.ani-zoom-out-sm {
  animation: zoom-out-sm var(--duration-sm) normal none 1 ease-out;
}
.ani-zoom-out-md {
  animation: zoom-out-md var(--duration-sm) normal none 1 ease-out;
}
.ani-zoom-out-lg {
  animation: zoom-out-lg var(--duration-sm) normal none 1 ease-out;
}
.ani-zoom-out-xl {
  animation: zoom-out-xl var(--duration-sm) normal none 1 ease-out;
}
.ani-duration-xs {
  animation-duration: var(--duration-xs);
}
.ani-duration-sm {
  animation-duration: var(--duration-sm);
}
.ani-duration-md {
  animation-duration: var(--duration-md);
}
.ani-duration-lg {
  animation-duration: var(--duration-lg);
}
.ani-duration-xl {
  animation-duration: var(--duration-xl);
}
.ani-alternate {
  animation-direction: alternate;
}
.ani-infinite {
  animation-iteration-count: infinite;
}

.g-0 {
  gap: 0 !important;
}

.g-xs {
  gap: var(--space-xs) !important;
}

.gx-xs {
  column-gap: var(--space-xs) !important;
}

.gy-xs {
  row-gap: var(--space-xs) !important;
}

.g-sm {
  gap: var(--space-sm) !important;
}

.gx-sm {
  column-gap: var(--space-sm) !important;
}

.gy-sm {
  row-gap: var(--space-sm) !important;
}

.g-md {
  gap: var(--space-md) !important;
}

.gx-md {
  column-gap: var(--space-md) !important;
}

.gy-md {
  row-gap: var(--space-md) !important;
}

.g-lg {
  gap: var(--space-lg) !important;
}

.gx-lg {
  column-gap: var(--space-lg) !important;
}

.gy-lg {
  row-gap: var(--space-lg) !important;
}

.g-xl {
  gap: var(--space-xl) !important;
}

.gx-xl {
  column-gap: var(--space-xl) !important;
}

.gy-xl {
  row-gap: var(--space-xl) !important;
}

.m-0 {
  margin: 0 !important;
}

.m-xs {
  margin: var(--space-xs) !important;
}

.ml-xs {
  margin-left: var(--space-xs) !important;
}

.mr-xs {
  margin-right: var(--space-xs) !important;
}

.mt-xs {
  margin-top: var(--space-xs) !important;
}

.mb-xs {
  margin-bottom: var(--space-xs) !important;
}

.mx-xs {
  margin-left: var(--space-xs) !important;
  margin-right: var(--space-xs) !important;
}

.my-xs {
  margin-top: var(--space-xs) !important;
  margin-bottom: var(--space-xs) !important;
}

.m-sm {
  margin: var(--space-sm) !important;
}

.ml-sm {
  margin-left: var(--space-sm) !important;
}

.mr-sm {
  margin-right: var(--space-sm) !important;
}

.mt-sm {
  margin-top: var(--space-sm) !important;
}

.mb-sm {
  margin-bottom: var(--space-sm) !important;
}

.mx-sm {
  margin-left: var(--space-sm) !important;
  margin-right: var(--space-sm) !important;
}

.my-sm {
  margin-top: var(--space-sm) !important;
  margin-bottom: var(--space-sm) !important;
}

.m-md {
  margin: var(--space-md) !important;
}

.ml-md {
  margin-left: var(--space-md) !important;
}

.mr-md {
  margin-right: var(--space-md) !important;
}

.mt-md {
  margin-top: var(--space-md) !important;
}

.mb-md {
  margin-bottom: var(--space-md) !important;
}

.mx-md {
  margin-left: var(--space-md) !important;
  margin-right: var(--space-md) !important;
}

.my-md {
  margin-top: var(--space-md) !important;
  margin-bottom: var(--space-md) !important;
}

.m-lg {
  margin: var(--space-lg) !important;
}

.ml-lg {
  margin-left: var(--space-lg) !important;
}

.mr-lg {
  margin-right: var(--space-lg) !important;
}

.mt-lg {
  margin-top: var(--space-lg) !important;
}

.mb-lg {
  margin-bottom: var(--space-lg) !important;
}

.mx-lg {
  margin-left: var(--space-lg) !important;
  margin-right: var(--space-lg) !important;
}

.my-lg {
  margin-top: var(--space-lg) !important;
  margin-bottom: var(--space-lg) !important;
}

.m-xl {
  margin: var(--space-xl) !important;
}

.ml-xl {
  margin-left: var(--space-xl) !important;
}

.mr-xl {
  margin-right: var(--space-xl) !important;
}

.mt-xl {
  margin-top: var(--space-xl) !important;
}

.mb-xl {
  margin-bottom: var(--space-xl) !important;
}

.mx-xl {
  margin-left: var(--space-xl) !important;
  margin-right: var(--space-xl) !important;
}

.my-xl {
  margin-top: var(--space-xl) !important;
  margin-bottom: var(--space-xl) !important;
}

.p-0 {
  padding: 0 !important;
}

.p-xs {
  padding: var(--space-xs) !important;
}

.pl-xs {
  padding-left: var(--space-xs) !important;
}

.pr-xs {
  padding-right: var(--space-xs) !important;
}

.pt-xs {
  padding-top: var(--space-xs) !important;
}

.pb-xs {
  padding-bottom: var(--space-xs) !important;
}

.px-xs {
  padding-left: var(--space-xs) !important;
  padding-right: var(--space-xs) !important;
}

.py-xs {
  padding-top: var(--space-xs) !important;
  padding-bottom: var(--space-xs) !important;
}

.p-sm {
  padding: var(--space-sm) !important;
}

.pl-sm {
  padding-left: var(--space-sm) !important;
}

.pr-sm {
  padding-right: var(--space-sm) !important;
}

.pt-sm {
  padding-top: var(--space-sm) !important;
}

.pb-sm {
  padding-bottom: var(--space-sm) !important;
}

.px-sm {
  padding-left: var(--space-sm) !important;
  padding-right: var(--space-sm) !important;
}

.py-sm {
  padding-top: var(--space-sm) !important;
  padding-bottom: var(--space-sm) !important;
}

.p-md {
  padding: var(--space-md) !important;
}

.pl-md {
  padding-left: var(--space-md) !important;
}

.pr-md {
  padding-right: var(--space-md) !important;
}

.pt-md {
  padding-top: var(--space-md) !important;
}

.pb-md {
  padding-bottom: var(--space-md) !important;
}

.px-md {
  padding-left: var(--space-md) !important;
  padding-right: var(--space-md) !important;
}

.py-md {
  padding-top: var(--space-md) !important;
  padding-bottom: var(--space-md) !important;
}

.p-lg {
  padding: var(--space-lg) !important;
}

.pl-lg {
  padding-left: var(--space-lg) !important;
}

.pr-lg {
  padding-right: var(--space-lg) !important;
}

.pt-lg {
  padding-top: var(--space-lg) !important;
}

.pb-lg {
  padding-bottom: var(--space-lg) !important;
}

.px-lg {
  padding-left: var(--space-lg) !important;
  padding-right: var(--space-lg) !important;
}

.py-lg {
  padding-top: var(--space-lg) !important;
  padding-bottom: var(--space-lg) !important;
}

.p-xl {
  padding: var(--space-xl) !important;
}

.pl-xl {
  padding-left: var(--space-xl) !important;
}

.pr-xl {
  padding-right: var(--space-xl) !important;
}

.pt-xl {
  padding-top: var(--space-xl) !important;
}

.pb-xl {
  padding-bottom: var(--space-xl) !important;
}

.px-xl {
  padding-left: var(--space-xl) !important;
  padding-right: var(--space-xl) !important;
}

.py-xl {
  padding-top: var(--space-xl) !important;
  padding-bottom: var(--space-xl) !important;
}

@supports (aspect-ratio: 1) {
  .asr-1x1 {
    aspect-ratio: 1 !important;
  }
}
@supports not (aspect-ratio: 1) {
  .asr-1x1 {
    position: relative !important;
    padding-top: 100% !important;
  }
  .asr-1x1 > * {
    position: absolute !important;
    inset: 0 !important;
  }
}
@supports (aspect-ratio: 1.5) {
  .asr-3x2 {
    aspect-ratio: 1.5 !important;
  }
}
@supports not (aspect-ratio: 1.5) {
  .asr-3x2 {
    position: relative !important;
    padding-top: 66.6666666667% !important;
  }
  .asr-3x2 > * {
    position: absolute !important;
    inset: 0 !important;
  }
}
@supports (aspect-ratio: 1.333333333) {
  .asr-4x3 {
    aspect-ratio: 1.333333333 !important;
  }
}
@supports not (aspect-ratio: 1.333333333) {
  .asr-4x3 {
    position: relative !important;
    padding-top: 75.0000000187% !important;
  }
  .asr-4x3 > * {
    position: absolute !important;
    inset: 0 !important;
  }
}
@supports (aspect-ratio: 1.777777778) {
  .asr-16x9 {
    aspect-ratio: 1.777777778 !important;
  }
}
@supports not (aspect-ratio: 1.777777778) {
  .asr-16x9 {
    position: relative !important;
    padding-top: 56.249999993% !important;
  }
  .asr-16x9 > * {
    position: absolute !important;
    inset: 0 !important;
  }
}
@supports (aspect-ratio: 2) {
  .asr-18x9 {
    aspect-ratio: 2 !important;
  }
}
@supports not (aspect-ratio: 2) {
  .asr-18x9 {
    position: relative !important;
    padding-top: 50% !important;
  }
  .asr-18x9 > * {
    position: absolute !important;
    inset: 0 !important;
  }
}
@supports (aspect-ratio: 2.333333333) {
  .asr-21x9 {
    aspect-ratio: 2.333333333 !important;
  }
}
@supports not (aspect-ratio: 2.333333333) {
  .asr-21x9 {
    position: relative !important;
    padding-top: 42.8571428633% !important;
  }
  .asr-21x9 > * {
    position: absolute !important;
    inset: 0 !important;
  }
}
@supports (aspect-ratio: 0.714285714) {
  .asr-gaming-card {
    aspect-ratio: 0.714285714 !important;
  }
}
@supports not (aspect-ratio: 0.714285714) {
  .asr-gaming-card {
    position: relative !important;
    padding-top: 140.000000056% !important;
  }
  .asr-gaming-card > * {
    position: absolute !important;
    inset: 0 !important;
  }
}

.brd {
  border: 1px solid var(--clr-border);
}
.brd-none {
  border: none !important;
}
.brd-round {
  border-radius: var(--border-radius) !important;
}
.brd-round-left {
  border-top-left-radius: var(--border-radius) !important;
  border-bottom-left-radius: var(--border-radius) !important;
}
.brd-round-right {
  border-top-right-radius: var(--border-radius) !important;
  border-bottom-right-radius: var(--border-radius) !important;
}
.brd-round-top {
  border-top-left-radius: var(--border-radius) !important;
  border-top-right-radius: var(--border-radius) !important;
}
.brd-round-bottom {
  border-bottom-left-radius: var(--border-radius) !important;
  border-bottom-right-radius: var(--border-radius) !important;
}
.brd-square {
  border-radius: 0 !important;
}
.brd-left {
  border-left: 1px solid var(--clr-border);
}
.brd-right {
  border-right: 1px solid var(--clr-border);
}
.brd-top {
  border-top: 1px solid var(--clr-border);
}
.brd-bottom {
  border-bottom: 1px solid var(--clr-border);
}

.fit {
  height: 100% !important;
  width: 100% !important;
}
.fit-height {
  height: 100% !important;
}
.fit-width {
  width: 100% !important;
}
.fit-viewport {
  width: 100vw !important;
  height: max(100%, 100vh) !important;
}
.fit-viewport-height {
  height: max(100%, 100vh) !important;
}
.fit-viewport-width {
  width: 100vw !important;
}

.obj-contain-left {
  object-fit: contain !important;
  object-position: left !important;
}
.obj-contain-right {
  object-fit: contain !important;
  object-position: right !important;
}
.obj-contain-top {
  object-fit: contain !important;
  object-position: top !important;
}
.obj-contain-bottom {
  object-fit: contain !important;
  object-position: bottom !important;
}
.obj-contain-center {
  object-fit: contain !important;
  object-position: center !important;
}
.obj-cover-left {
  object-fit: cover !important;
  object-position: left !important;
}
.obj-cover-right {
  object-fit: cover !important;
  object-position: right !important;
}
.obj-cover-top {
  object-fit: cover !important;
  object-position: top !important;
}
.obj-cover-bottom {
  object-fit: cover !important;
  object-position: bottom !important;
}
.obj-cover-center {
  object-fit: cover !important;
  object-position: center !important;
}
.obj-scale-down-left {
  object-fit: scale-down !important;
  object-position: left !important;
}
.obj-scale-down-right {
  object-fit: scale-down !important;
  object-position: right !important;
}
.obj-scale-down-top {
  object-fit: scale-down !important;
  object-position: top !important;
}
.obj-scale-down-bottom {
  object-fit: scale-down !important;
  object-position: bottom !important;
}
.obj-scale-down-center {
  object-fit: scale-down !important;
  object-position: center !important;
}

.siz-x-xs {
  width: var(--size-xs) !important;
  max-width: 100% !important;
}
.siz-y-xs {
  height: var(--size-xs) !important;
  max-height: 100% !important;
}
.siz-x-sm {
  width: var(--size-sm) !important;
  max-width: 100% !important;
}
.siz-y-sm {
  height: var(--size-sm) !important;
  max-height: 100% !important;
}
.siz-x-md {
  width: var(--size-md) !important;
  max-width: 100% !important;
}
.siz-y-md {
  height: var(--size-md) !important;
  max-height: 100% !important;
}
.siz-x-lg {
  width: var(--size-lg) !important;
  max-width: 100% !important;
}
.siz-y-lg {
  height: var(--size-lg) !important;
  max-height: 100% !important;
}
.siz-x-xl {
  width: var(--size-xl) !important;
  max-width: 100% !important;
}
.siz-y-xl {
  height: var(--size-xl) !important;
  max-height: 100% !important;
}
.siz-45ch {
  width: 45ch !important;
  max-width: 100% !important;
}
.siz-60ch {
  width: 60ch !important;
  max-width: 100% !important;
}
.siz-75ch {
  width: 75ch !important;
  max-width: 100% !important;
}
.siz-90ch {
  width: 90ch !important;
  max-width: 100% !important;
}

.ovf {
  overflow: auto;
}
.ovf-auto {
  overflow: auto;
}
.ovf-x-auto {
  overflow-x: auto;
}
.ovf-y-auto {
  overflow-y: auto;
}
.ovf-wrapper-x-auto {
  overflow-x: auto;
  white-space: nowrap;
}
.ovf-wrapper-y-auto {
  overflow-y: auto;
}
.ovf-hidden {
  overflow: hidden;
}
.ovf-x-hidden {
  overflow-x: hidden;
}
.ovf-y-hidden {
  overflow-y: hidden;
}
.ovf-wrapper-x-hidden {
  overflow-x: hidden;
  white-space: nowrap;
}
.ovf-wrapper-y-hidden {
  overflow-y: hidden;
}
.ovf-scroll {
  overflow: scroll;
}
.ovf-x-scroll {
  overflow-x: scroll;
}
.ovf-y-scroll {
  overflow-y: scroll;
}
.ovf-wrapper-x-scroll {
  overflow-x: scroll;
  white-space: nowrap;
}
.ovf-wrapper-y-scroll {
  overflow-y: scroll;
}
.ovf-text-clip {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: clip;
}
.ovf-text-ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.ovf-text-ellipsis-1 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}
.ovf-text-ellipsis-2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.ovf-text-ellipsis-3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
.ovf-text-ellipsis-4 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
}
.ovf-text-ellipsis-5 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  overflow: hidden;
}

.grd-fit-xs {
  grid-template-columns: repeat(auto-fit, minmax(min(var(--size-xs), 100%), 1fr));
  display: grid;
}

.flx-fit-xs {
  flex-wrap: wrap;
  display: flex;
}
.flx-fit-xs > * {
  flex-basis: var(--size-xs);
  flex-shrink: 1;
  flex-grow: 1;
}

.grd-fill-xs {
  grid-template-columns: repeat(auto-fill, minmax(min(var(--size-xs), 100%), 1fr));
  display: grid;
}

.flx-fill-xs {
  flex-wrap: wrap;
  display: flex;
}
.flx-fill-xs > * {
  flex-basis: var(--size-xs);
  flex-shrink: 1;
  flex-grow: 0;
}

.grd-fit-sm {
  grid-template-columns: repeat(auto-fit, minmax(min(var(--size-sm), 100%), 1fr));
  display: grid;
}

.flx-fit-sm {
  flex-wrap: wrap;
  display: flex;
}
.flx-fit-sm > * {
  flex-basis: var(--size-sm);
  flex-shrink: 1;
  flex-grow: 1;
}

.grd-fill-sm {
  grid-template-columns: repeat(auto-fill, minmax(min(var(--size-sm), 100%), 1fr));
  display: grid;
}

.flx-fill-sm {
  flex-wrap: wrap;
  display: flex;
}
.flx-fill-sm > * {
  flex-basis: var(--size-sm);
  flex-shrink: 1;
  flex-grow: 0;
}

.grd-fit-md {
  grid-template-columns: repeat(auto-fit, minmax(min(var(--size-md), 100%), 1fr));
  display: grid;
}

.flx-fit-md {
  flex-wrap: wrap;
  display: flex;
}
.flx-fit-md > * {
  flex-basis: var(--size-md);
  flex-shrink: 1;
  flex-grow: 1;
}

.grd-fill-md {
  grid-template-columns: repeat(auto-fill, minmax(min(var(--size-md), 100%), 1fr));
  display: grid;
}

.flx-fill-md {
  flex-wrap: wrap;
  display: flex;
}
.flx-fill-md > * {
  flex-basis: var(--size-md);
  flex-shrink: 1;
  flex-grow: 0;
}

.grd-fit-lg {
  grid-template-columns: repeat(auto-fit, minmax(min(var(--size-lg), 100%), 1fr));
  display: grid;
}

.flx-fit-lg {
  flex-wrap: wrap;
  display: flex;
}
.flx-fit-lg > * {
  flex-basis: var(--size-lg);
  flex-shrink: 1;
  flex-grow: 1;
}

.grd-fill-lg {
  grid-template-columns: repeat(auto-fill, minmax(min(var(--size-lg), 100%), 1fr));
  display: grid;
}

.flx-fill-lg {
  flex-wrap: wrap;
  display: flex;
}
.flx-fill-lg > * {
  flex-basis: var(--size-lg);
  flex-shrink: 1;
  flex-grow: 0;
}

.grd-fit-xl {
  grid-template-columns: repeat(auto-fit, minmax(min(var(--size-xl), 100%), 1fr));
  display: grid;
}

.flx-fit-xl {
  flex-wrap: wrap;
  display: flex;
}
.flx-fit-xl > * {
  flex-basis: var(--size-xl);
  flex-shrink: 1;
  flex-grow: 1;
}

.grd-fill-xl {
  grid-template-columns: repeat(auto-fill, minmax(min(var(--size-xl), 100%), 1fr));
  display: grid;
}

.flx-fill-xl {
  flex-wrap: wrap;
  display: flex;
}
.flx-fill-xl > * {
  flex-basis: var(--size-xl);
  flex-shrink: 1;
  flex-grow: 0;
}

.flx-top-left {
  align-content: flex-start;
  justify-content: flex-start;
  display: flex;
}

.grd-top-left {
  align-items: start;
  justify-items: start;
  display: grid;
}

.flx-top-center {
  align-content: flex-start;
  justify-content: center;
  display: flex;
}

.grd-top-center {
  align-items: start;
  justify-items: center;
  display: grid;
}

.flx-top-right {
  align-content: flex-start;
  justify-content: flex-end;
  display: flex;
}

.grd-top-right {
  align-items: start;
  justify-items: end;
  display: grid;
}

.flx-center-left {
  align-content: center;
  justify-content: flex-start;
  display: flex;
}

.grd-center-left {
  align-items: center;
  justify-items: start;
  display: grid;
}

.flx-center-center {
  align-content: center;
  justify-content: center;
  display: flex;
}

.grd-center-center {
  align-items: center;
  justify-items: center;
  display: grid;
}

.flx-center-right {
  align-content: center;
  justify-content: flex-end;
  display: flex;
}

.grd-center-right {
  align-items: center;
  justify-items: end;
  display: grid;
}

.flx-bottom-left {
  align-content: flex-end;
  justify-content: flex-start;
  display: flex;
}

.grd-bottom-left {
  align-items: end;
  justify-items: start;
  display: grid;
}

.flx-bottom-center {
  align-content: flex-end;
  justify-content: center;
  display: flex;
}

.grd-bottom-center {
  align-items: end;
  justify-items: center;
  display: grid;
}

.flx-bottom-right {
  align-content: flex-end;
  justify-content: flex-end;
  display: flex;
}

.grd-bottom-right {
  align-items: end;
  justify-items: end;
  display: grid;
}

.ali-content-top {
  align-content: flex-start !important;
  align-content: start !important;
}

.ali-content-center {
  align-content: center !important;
  align-content: center !important;
}

.ali-content-bottom {
  align-content: flex-end !important;
  align-content: end !important;
}

.jst-content-left {
  justify-content: flex-start !important;
  justify-content: start !important;
}

.jst-content-center {
  justify-content: center !important;
  justify-content: center !important;
}

.jst-content-right {
  justify-content: flex-end !important;
  justify-content: end !important;
}

.ali-content-space-around {
  align-content: space-around !important;
}

.jst-content-space-around {
  justify-content: space-around !important;
}

.ali-content-space-between {
  align-content: space-between !important;
}

.jst-content-space-between {
  justify-content: space-between !important;
}

.ali-content-space-evenly {
  align-content: space-evenly !important;
}

.jst-content-space-evenly {
  justify-content: space-evenly !important;
}

.ali-items-space-around {
  align-items: space-around !important;
}

.jst-items-space-around {
  justify-items: space-around !important;
}

.ali-items-space-between {
  align-items: space-between !important;
}

.jst-items-space-between {
  justify-items: space-between !important;
}

.ali-items-space-evenly {
  align-items: space-evenly !important;
}

.jst-items-space-evenly {
  justify-items: space-evenly !important;
}

.ali-items-top {
  align-items: flex-start !important;
  align-items: start !important;
}

.ali-items-center {
  align-items: center !important;
  align-items: center !important;
}

.ali-items-bottom {
  align-items: flex-end !important;
  align-items: end !important;
}

.jst-items-left {
  justify-items: flex-start !important;
  justify-items: start !important;
}

.jst-items-center {
  justify-items: center !important;
  justify-items: center !important;
}

.jst-items-right {
  justify-items: flex-end !important;
  justify-items: end !important;
}

.ali-content-space-around {
  align-content: space-around !important;
}

.jst-content-space-around {
  justify-content: space-around !important;
}

.ali-content-space-between {
  align-content: space-between !important;
}

.jst-content-space-between {
  justify-content: space-between !important;
}

.ali-content-space-evenly {
  align-content: space-evenly !important;
}

.jst-content-space-evenly {
  justify-content: space-evenly !important;
}

.ali-items-space-around {
  align-items: space-around !important;
}

.jst-items-space-around {
  justify-items: space-around !important;
}

.ali-items-space-between {
  align-items: space-between !important;
}

.jst-items-space-between {
  justify-items: space-between !important;
}

.ali-items-space-evenly {
  align-items: space-evenly !important;
}

.jst-items-space-evenly {
  justify-items: space-evenly !important;
}

.ali-self-top {
  align-self: flex-start !important;
  align-self: start !important;
}

.ali-self-center {
  align-self: center !important;
  align-self: center !important;
}

.ali-self-bottom {
  align-self: flex-end !important;
  align-self: end !important;
}

.jst-self-left {
  justify-self: flex-start !important;
  justify-self: start !important;
}

.jst-self-center {
  justify-self: center !important;
  justify-self: center !important;
}

.jst-self-right {
  justify-self: flex-end !important;
  justify-self: end !important;
}

.ali-content-space-around {
  align-content: space-around !important;
}

.jst-content-space-around {
  justify-content: space-around !important;
}

.ali-content-space-between {
  align-content: space-between !important;
}

.jst-content-space-between {
  justify-content: space-between !important;
}

.ali-content-space-evenly {
  align-content: space-evenly !important;
}

.jst-content-space-evenly {
  justify-content: space-evenly !important;
}

.ali-items-space-around {
  align-items: space-around !important;
}

.jst-items-space-around {
  justify-items: space-around !important;
}

.ali-items-space-between {
  align-items: space-between !important;
}

.jst-items-space-between {
  justify-items: space-between !important;
}

.ali-items-space-evenly {
  align-items: space-evenly !important;
}

.jst-items-space-evenly {
  justify-items: space-evenly !important;
}

.flx {
  display: flex;
}
.flx-column {
  flex-direction: column;
}
.flx-wrap {
  flex-wrap: wrap;
}
.flx-wrap-reverse {
  flex-wrap: wrap-reverse;
}
.flx-grow-1 {
  flex-grow: 1;
}
.flx-shrink-1 {
  flex-shrink: 1;
}
.flx-grow-2 {
  flex-grow: 2;
}
.flx-shrink-2 {
  flex-shrink: 2;
}
.flx-grow-3 {
  flex-grow: 3;
}
.flx-shrink-3 {
  flex-shrink: 3;
}
.flx-grow-4 {
  flex-grow: 4;
}
.flx-shrink-4 {
  flex-shrink: 4;
}
.flx-grow-5 {
  flex-grow: 5;
}
.flx-shrink-5 {
  flex-shrink: 5;
}

.grd {
  display: grid;
}
.grd-dense {
  grid-auto-flow: dense;
}
.grd-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
  display: grid;
}
.grd-item-1x1 {
  grid-column-start: span 1;
  grid-row-start: span 1;
}
.grd-item-1x2 {
  grid-column-start: span 1;
  grid-row-start: span 2;
}
.grd-item-1x3 {
  grid-column-start: span 1;
  grid-row-start: span 3;
}
.grd-item-1x4 {
  grid-column-start: span 1;
  grid-row-start: span 4;
}
.grd-item-1x5 {
  grid-column-start: span 1;
  grid-row-start: span 5;
}
.grd-item-1x6 {
  grid-column-start: span 1;
  grid-row-start: span 6;
}
.grd-item-1x7 {
  grid-column-start: span 1;
  grid-row-start: span 7;
}
.grd-item-1x8 {
  grid-column-start: span 1;
  grid-row-start: span 8;
}
.grd-item-1x9 {
  grid-column-start: span 1;
  grid-row-start: span 9;
}
.grd-item-1x10 {
  grid-column-start: span 1;
  grid-row-start: span 10;
}
.grd-item-1x11 {
  grid-column-start: span 1;
  grid-row-start: span 11;
}
.grd-item-1x12 {
  grid-column-start: span 1;
  grid-row-start: span 12;
}
.grd-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  display: grid;
}
.grd-item-2x1 {
  grid-column-start: span 2;
  grid-row-start: span 1;
}
.grd-item-2x2 {
  grid-column-start: span 2;
  grid-row-start: span 2;
}
.grd-item-2x3 {
  grid-column-start: span 2;
  grid-row-start: span 3;
}
.grd-item-2x4 {
  grid-column-start: span 2;
  grid-row-start: span 4;
}
.grd-item-2x5 {
  grid-column-start: span 2;
  grid-row-start: span 5;
}
.grd-item-2x6 {
  grid-column-start: span 2;
  grid-row-start: span 6;
}
.grd-item-2x7 {
  grid-column-start: span 2;
  grid-row-start: span 7;
}
.grd-item-2x8 {
  grid-column-start: span 2;
  grid-row-start: span 8;
}
.grd-item-2x9 {
  grid-column-start: span 2;
  grid-row-start: span 9;
}
.grd-item-2x10 {
  grid-column-start: span 2;
  grid-row-start: span 10;
}
.grd-item-2x11 {
  grid-column-start: span 2;
  grid-row-start: span 11;
}
.grd-item-2x12 {
  grid-column-start: span 2;
  grid-row-start: span 12;
}
.grd-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  display: grid;
}
.grd-item-3x1 {
  grid-column-start: span 3;
  grid-row-start: span 1;
}
.grd-item-3x2 {
  grid-column-start: span 3;
  grid-row-start: span 2;
}
.grd-item-3x3 {
  grid-column-start: span 3;
  grid-row-start: span 3;
}
.grd-item-3x4 {
  grid-column-start: span 3;
  grid-row-start: span 4;
}
.grd-item-3x5 {
  grid-column-start: span 3;
  grid-row-start: span 5;
}
.grd-item-3x6 {
  grid-column-start: span 3;
  grid-row-start: span 6;
}
.grd-item-3x7 {
  grid-column-start: span 3;
  grid-row-start: span 7;
}
.grd-item-3x8 {
  grid-column-start: span 3;
  grid-row-start: span 8;
}
.grd-item-3x9 {
  grid-column-start: span 3;
  grid-row-start: span 9;
}
.grd-item-3x10 {
  grid-column-start: span 3;
  grid-row-start: span 10;
}
.grd-item-3x11 {
  grid-column-start: span 3;
  grid-row-start: span 11;
}
.grd-item-3x12 {
  grid-column-start: span 3;
  grid-row-start: span 12;
}
.grd-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  display: grid;
}
.grd-item-4x1 {
  grid-column-start: span 4;
  grid-row-start: span 1;
}
.grd-item-4x2 {
  grid-column-start: span 4;
  grid-row-start: span 2;
}
.grd-item-4x3 {
  grid-column-start: span 4;
  grid-row-start: span 3;
}
.grd-item-4x4 {
  grid-column-start: span 4;
  grid-row-start: span 4;
}
.grd-item-4x5 {
  grid-column-start: span 4;
  grid-row-start: span 5;
}
.grd-item-4x6 {
  grid-column-start: span 4;
  grid-row-start: span 6;
}
.grd-item-4x7 {
  grid-column-start: span 4;
  grid-row-start: span 7;
}
.grd-item-4x8 {
  grid-column-start: span 4;
  grid-row-start: span 8;
}
.grd-item-4x9 {
  grid-column-start: span 4;
  grid-row-start: span 9;
}
.grd-item-4x10 {
  grid-column-start: span 4;
  grid-row-start: span 10;
}
.grd-item-4x11 {
  grid-column-start: span 4;
  grid-row-start: span 11;
}
.grd-item-4x12 {
  grid-column-start: span 4;
  grid-row-start: span 12;
}
.grd-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  display: grid;
}
.grd-item-5x1 {
  grid-column-start: span 5;
  grid-row-start: span 1;
}
.grd-item-5x2 {
  grid-column-start: span 5;
  grid-row-start: span 2;
}
.grd-item-5x3 {
  grid-column-start: span 5;
  grid-row-start: span 3;
}
.grd-item-5x4 {
  grid-column-start: span 5;
  grid-row-start: span 4;
}
.grd-item-5x5 {
  grid-column-start: span 5;
  grid-row-start: span 5;
}
.grd-item-5x6 {
  grid-column-start: span 5;
  grid-row-start: span 6;
}
.grd-item-5x7 {
  grid-column-start: span 5;
  grid-row-start: span 7;
}
.grd-item-5x8 {
  grid-column-start: span 5;
  grid-row-start: span 8;
}
.grd-item-5x9 {
  grid-column-start: span 5;
  grid-row-start: span 9;
}
.grd-item-5x10 {
  grid-column-start: span 5;
  grid-row-start: span 10;
}
.grd-item-5x11 {
  grid-column-start: span 5;
  grid-row-start: span 11;
}
.grd-item-5x12 {
  grid-column-start: span 5;
  grid-row-start: span 12;
}
.grd-6 {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  display: grid;
}
.grd-item-6x1 {
  grid-column-start: span 6;
  grid-row-start: span 1;
}
.grd-item-6x2 {
  grid-column-start: span 6;
  grid-row-start: span 2;
}
.grd-item-6x3 {
  grid-column-start: span 6;
  grid-row-start: span 3;
}
.grd-item-6x4 {
  grid-column-start: span 6;
  grid-row-start: span 4;
}
.grd-item-6x5 {
  grid-column-start: span 6;
  grid-row-start: span 5;
}
.grd-item-6x6 {
  grid-column-start: span 6;
  grid-row-start: span 6;
}
.grd-item-6x7 {
  grid-column-start: span 6;
  grid-row-start: span 7;
}
.grd-item-6x8 {
  grid-column-start: span 6;
  grid-row-start: span 8;
}
.grd-item-6x9 {
  grid-column-start: span 6;
  grid-row-start: span 9;
}
.grd-item-6x10 {
  grid-column-start: span 6;
  grid-row-start: span 10;
}
.grd-item-6x11 {
  grid-column-start: span 6;
  grid-row-start: span 11;
}
.grd-item-6x12 {
  grid-column-start: span 6;
  grid-row-start: span 12;
}
.grd-7 {
  grid-template-columns: repeat(7, minmax(0, 1fr));
  display: grid;
}
.grd-item-7x1 {
  grid-column-start: span 7;
  grid-row-start: span 1;
}
.grd-item-7x2 {
  grid-column-start: span 7;
  grid-row-start: span 2;
}
.grd-item-7x3 {
  grid-column-start: span 7;
  grid-row-start: span 3;
}
.grd-item-7x4 {
  grid-column-start: span 7;
  grid-row-start: span 4;
}
.grd-item-7x5 {
  grid-column-start: span 7;
  grid-row-start: span 5;
}
.grd-item-7x6 {
  grid-column-start: span 7;
  grid-row-start: span 6;
}
.grd-item-7x7 {
  grid-column-start: span 7;
  grid-row-start: span 7;
}
.grd-item-7x8 {
  grid-column-start: span 7;
  grid-row-start: span 8;
}
.grd-item-7x9 {
  grid-column-start: span 7;
  grid-row-start: span 9;
}
.grd-item-7x10 {
  grid-column-start: span 7;
  grid-row-start: span 10;
}
.grd-item-7x11 {
  grid-column-start: span 7;
  grid-row-start: span 11;
}
.grd-item-7x12 {
  grid-column-start: span 7;
  grid-row-start: span 12;
}
.grd-8 {
  grid-template-columns: repeat(8, minmax(0, 1fr));
  display: grid;
}
.grd-item-8x1 {
  grid-column-start: span 8;
  grid-row-start: span 1;
}
.grd-item-8x2 {
  grid-column-start: span 8;
  grid-row-start: span 2;
}
.grd-item-8x3 {
  grid-column-start: span 8;
  grid-row-start: span 3;
}
.grd-item-8x4 {
  grid-column-start: span 8;
  grid-row-start: span 4;
}
.grd-item-8x5 {
  grid-column-start: span 8;
  grid-row-start: span 5;
}
.grd-item-8x6 {
  grid-column-start: span 8;
  grid-row-start: span 6;
}
.grd-item-8x7 {
  grid-column-start: span 8;
  grid-row-start: span 7;
}
.grd-item-8x8 {
  grid-column-start: span 8;
  grid-row-start: span 8;
}
.grd-item-8x9 {
  grid-column-start: span 8;
  grid-row-start: span 9;
}
.grd-item-8x10 {
  grid-column-start: span 8;
  grid-row-start: span 10;
}
.grd-item-8x11 {
  grid-column-start: span 8;
  grid-row-start: span 11;
}
.grd-item-8x12 {
  grid-column-start: span 8;
  grid-row-start: span 12;
}
.grd-9 {
  grid-template-columns: repeat(9, minmax(0, 1fr));
  display: grid;
}
.grd-item-9x1 {
  grid-column-start: span 9;
  grid-row-start: span 1;
}
.grd-item-9x2 {
  grid-column-start: span 9;
  grid-row-start: span 2;
}
.grd-item-9x3 {
  grid-column-start: span 9;
  grid-row-start: span 3;
}
.grd-item-9x4 {
  grid-column-start: span 9;
  grid-row-start: span 4;
}
.grd-item-9x5 {
  grid-column-start: span 9;
  grid-row-start: span 5;
}
.grd-item-9x6 {
  grid-column-start: span 9;
  grid-row-start: span 6;
}
.grd-item-9x7 {
  grid-column-start: span 9;
  grid-row-start: span 7;
}
.grd-item-9x8 {
  grid-column-start: span 9;
  grid-row-start: span 8;
}
.grd-item-9x9 {
  grid-column-start: span 9;
  grid-row-start: span 9;
}
.grd-item-9x10 {
  grid-column-start: span 9;
  grid-row-start: span 10;
}
.grd-item-9x11 {
  grid-column-start: span 9;
  grid-row-start: span 11;
}
.grd-item-9x12 {
  grid-column-start: span 9;
  grid-row-start: span 12;
}
.grd-10 {
  grid-template-columns: repeat(10, minmax(0, 1fr));
  display: grid;
}
.grd-item-10x1 {
  grid-column-start: span 10;
  grid-row-start: span 1;
}
.grd-item-10x2 {
  grid-column-start: span 10;
  grid-row-start: span 2;
}
.grd-item-10x3 {
  grid-column-start: span 10;
  grid-row-start: span 3;
}
.grd-item-10x4 {
  grid-column-start: span 10;
  grid-row-start: span 4;
}
.grd-item-10x5 {
  grid-column-start: span 10;
  grid-row-start: span 5;
}
.grd-item-10x6 {
  grid-column-start: span 10;
  grid-row-start: span 6;
}
.grd-item-10x7 {
  grid-column-start: span 10;
  grid-row-start: span 7;
}
.grd-item-10x8 {
  grid-column-start: span 10;
  grid-row-start: span 8;
}
.grd-item-10x9 {
  grid-column-start: span 10;
  grid-row-start: span 9;
}
.grd-item-10x10 {
  grid-column-start: span 10;
  grid-row-start: span 10;
}
.grd-item-10x11 {
  grid-column-start: span 10;
  grid-row-start: span 11;
}
.grd-item-10x12 {
  grid-column-start: span 10;
  grid-row-start: span 12;
}
.grd-11 {
  grid-template-columns: repeat(11, minmax(0, 1fr));
  display: grid;
}
.grd-item-11x1 {
  grid-column-start: span 11;
  grid-row-start: span 1;
}
.grd-item-11x2 {
  grid-column-start: span 11;
  grid-row-start: span 2;
}
.grd-item-11x3 {
  grid-column-start: span 11;
  grid-row-start: span 3;
}
.grd-item-11x4 {
  grid-column-start: span 11;
  grid-row-start: span 4;
}
.grd-item-11x5 {
  grid-column-start: span 11;
  grid-row-start: span 5;
}
.grd-item-11x6 {
  grid-column-start: span 11;
  grid-row-start: span 6;
}
.grd-item-11x7 {
  grid-column-start: span 11;
  grid-row-start: spa