@charset "UTF-8";
/*
 * The ProGrass theme: other values for the design tokens of the site (see
 * vendor/kupisa/sdk/frontend/public/css/src/_tokens.scss) and the styles of what the theme adds, one file per
 * block. The source of `public/theme.css`: compile it with `npm run build` (or `npm run dev` to watch) in the
 * root of the repository; the site loads only the compiled file.
 */
/*
 * The faces of the design from Google Fonts: Fraunces Regular for the headings and Work Sans Regular, Medium
 * and SemiBold for the text. The site loads only the fonts picked in its appearance settings, so the theme
 * loads its own. Sass moves the import to the top of the compiled file, where CSS needs it.
 */
@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400&family=Work+Sans:wght@400;500;600&display=swap");
/*
 * The design tokens of the site with the values of the ProGrass Figma design: a cream page, deep green for
 * buttons and dark sections, a bark-brown accent for links and labels, Fraunces for the headings and Work Sans
 * for the text. The stylesheet of the site loads first, this one after it, so only what changes is here.
 */
:root {
  --color-primary: #24452f;
  --color-primary-hover: #1c2a21;
  --color-primary-contrast: #fbf9f4;
  --color-secondary: #8a4520;
  --color-secondary-hover: #6e361a;
  --color-secondary-contrast: #fbf9f4;
  --color-text: #3e4a41;
  --color-text-muted: #4f5a52;
  --color-heading: #1c2a21;
  --color-link: #8a4520;
  --color-link-hover: #6e361a;
  --color-background: #f3efe6;
  --color-surface: #fbf9f4;
  --color-border: #dcd5c6;
  --font-body: "Work Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-heading: "Fraunces", Georgia, "Times New Roman", serif;
  --font-size: 1.0625rem;
  --heading-weight: 400;
  --heading-line-height: 1.1;
  /* The text styles of the Figma design ("Desktop/…" and "Mobil/…"): each size slides between its 390px
     value and its 1440px value with the width of the screen. H1 is 40–68px, H2 32–52px, H3 27–30px, the
     lead 17–20px, the card titles 21–25px and the strength titles 18–21px. */
  --text-lg: clamp(1.0625rem, 0.99rem + 0.29vw, 1.25rem);
  --text-xl: clamp(1.125rem, 1.06rem + 0.29vw, 1.3125rem);
  --text-2xl: clamp(1.3125rem, 1.22rem + 0.38vw, 1.5625rem);
  --text-3xl: clamp(1.6875rem, 1.62rem + 0.29vw, 1.875rem);
  --text-4xl: clamp(2rem, 1.54rem + 1.9vw, 3.25rem);
  --text-5xl: clamp(2.5rem, 1.85rem + 2.67vw, 4.25rem);
  /* The sizes of the design its named styles do not cover, sliding like the styles above: the small labels
     (13px), the chip and area texts (15px), the questions (17–19px), the titles of the call-to-action card
     (26–36px), of the photo strip and the steps (28–40px), of the section headings (30–44px), of the dark
     band (30–48px), and the numbers of the steps (38–64px). */
  --prograss-text-13: 0.8125rem;
  --prograss-text-15: 0.9375rem;
  --prograss-text-19: clamp(1.0625rem, 1.02rem + 0.19vw, 1.1875rem);
  --prograss-text-36: clamp(1.625rem, 1.39rem + 0.95vw, 2.25rem);
  --prograss-text-40: clamp(1.75rem, 1.47rem + 1.14vw, 2.5rem);
  --prograss-text-44: clamp(1.875rem, 1.55rem + 1.33vw, 2.75rem);
  --prograss-text-48: clamp(1.875rem, 1.46rem + 1.71vw, 3rem);
  --prograss-text-64: clamp(2.375rem, 1.77rem + 2.48vw, 4rem);
  /* The width of the content inside the container, 1280px as in the design, and the space at the edges of
     the screen around it (see layout.scss). */
  --container-width: 80rem;
  --container-padding: 1.25rem;
  --radius-sm: 0.1875rem;
  --radius: 0.25rem;
  --radius-lg: 0.375rem;
  /* The tokens of the theme itself, used by its blocks and views. */
  --prograss-dark: #1c2a21;
  --prograss-darker: #16211a;
  --prograss-beige: #eae3d3;
  --prograss-sand: #e7e0d0;
  --prograss-ok: #dde6d5;
  --prograss-moss: #6b8059;
  --prograss-faint: #aaaea5;
  --prograss-border-strong: #a89f8c;
  --prograss-leaf: #7db038;
  --prograss-white: #ffffff;
  --prograss-on-dark: #f3efe6;
  --prograss-line-dark: #4a594f;
  --prograss-on-dark-soft: #d5d9d0;
  --prograss-bark-light: #e2b792;
  --prograss-pill: 9999px;
  /* The spaces of the design that the scale of the site (--space-1 to --space-5: 4, 8, 16, 24 and 48px) does
     not have, named by their size in pixels. The utilities use them with the steps of the site as one scale
     in pixels (see utilities.scss). */
  --prograss-space-6: 0.375rem;
  --prograss-space-10: 0.625rem;
  --prograss-space-11: 0.6875rem;
  --prograss-space-12: 0.75rem;
  --prograss-space-14: 0.875rem;
  --prograss-space-18: 1.125rem;
  --prograss-space-20: 1.25rem;
  --prograss-space-22: 1.375rem;
  --prograss-space-26: 1.625rem;
  --prograss-space-28: 1.75rem;
  --prograss-space-32: 2rem;
  --prograss-space-36: 2.25rem;
  --prograss-space-40: 2.5rem;
  --prograss-space-44: 2.75rem;
  --prograss-space-56: 3.5rem;
  --prograss-space-64: 4rem;
  --prograss-space-72: 4.5rem;
  --prograss-space-80: 5rem;
  --prograss-space-88: 5.5rem;
  --prograss-space-96: 6rem;
  --prograss-space-100: 6.25rem;
  --prograss-space-110: 6.875rem;
}

/*
 * The text styles of the Figma design, shared by every block: "Mobil/…" on a phone and "Desktop/…" from the md
 * break (900px). The sizes slide between the two with their tokens; the line heights and the letter spacing
 * step at the break.
 *
 * - H1: 40–68px, 108% / 104%, -2%.
 * - H2: 32–52px, 112% / 110%, -1% / -2%.
 * - Lead (`.lead`): 17–20px at 160%.
 * - Eyebrow (`.eyebrow`, "UI/Eyebrow"): the small line above a heading, 12px / 14px semibold capitals at 120%
 *   with 12% of spacing; its colour is the block's (`text-secondary`, `text-bark-light`).
 */
/*
 * The breakpoints of the design, in one place for the utilities and the stylesheets of the blocks: the grids
 * fold to one column below md (900px) and the header below lg (1080px). Mobile first: a style for a wider
 * screen goes in `@include up(md) { ... }`, which the utilities name with the same key (`d-md-none`).
 *
 *     @use '../breakpoints' as *;
 *
 *     .block-x { height: 13.75rem; }
 *
 *     @include up(md) {
 *         .block-x { height: 28.75rem; }
 *     }
 */
h1 {
  font-size: var(--text-5xl);
  line-height: 1.08;
  letter-spacing: -0.02em;
}

h2 {
  font-size: var(--text-4xl);
  line-height: 1.12;
  letter-spacing: -0.01em;
}

.lead {
  font-size: var(--text-lg);
  line-height: 1.6;
}

.eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

@media (min-width: 56.25rem) {
  h1 {
    line-height: 1.04;
  }
  h2 {
    line-height: 1.1;
    letter-spacing: -0.02em;
  }
  .eyebrow {
    font-size: var(--text-sm);
  }
}
/*
 * The container of the design: its content is --container-width wide (1280px) and the padding at the edges of
 * the screen comes on top of that, so the content of every block lines up at the same 1280px.
 */
.container {
  box-sizing: border-box;
  width: 100%;
  max-width: calc(var(--container-width) + 2 * var(--container-padding));
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

/*
 * The breadcrumbs the layout of the site draws above the content (`ul.breadcrumb` in a `container`, see
 * frontend/views/layouts/main.php of the SDK): they keep the look of the platform and take the place the Figma
 * design gives them, so the theme sets only their space. The space under them is the margin of what follows
 * (28px on a wide screen, as both details of the design have it).
 *
 * - A phone: 20px under the header.
 * - From the md break (900px): 32px under the header ("Detail produktu"); 48px on the page of a realization
 *   ("Detail realizácie"), which a phone shows without them, as it has the way back to the list instead.
 */
.breadcrumb {
  margin: var(--prograss-space-20) 0 0;
  padding: 0;
}

/* The page of a realization has "‹ Všetky realizácie" on a phone in place of the breadcrumbs. */
main:has(.realization-header) > .container:has(> .breadcrumb) {
  display: none;
}

@media (min-width: 56.25rem) {
  .breadcrumb {
    margin-top: var(--prograss-space-32);
  }
  main:has(.realization-header) > .container:has(> .breadcrumb) {
    display: block;
  }
  main:has(.realization-header) .breadcrumb {
    margin-top: var(--space-5);
  }
}
/*
 * The buttons of the design (the "Tlačidlo" component and the "UI/Button" text style of the Figma design):
 * 1rem semibold text with a padding of 16 by 26 pixels. The filled button has white text and no border (51px
 * high, the outline one 53px, as in the design), the outline one is drawn in the darkest green; the corner stays
 * the token the stylesheet of the site already uses.
 */
.btn {
  padding: 1rem 1.625rem;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
}

.btn-primary,
.btn-primary:hover {
  border-width: 0;
  color: var(--prograss-white);
}

.btn-outline-primary {
  border-color: var(--prograss-dark);
  color: var(--prograss-dark);
}

/* The outline button on a dark surface ("Obrys svetlé"): a light border and light text, white under the pointer. */
.btn-outline-light {
  border-color: var(--prograss-on-dark);
  color: var(--prograss-on-dark);
}

.btn-outline-light:hover {
  background-color: var(--prograss-white);
}

/*
 * The fields of every form of the site ("Dopytový formulár" of the Figma design), the forms module's and the
 * checkout's alike: a 15px semibold label 8px above a 50px white field with the strong line colour, a 130px
 * text area, a 20px white checkbox, and its label in 14px text.
 *
 * `.form-legend` gives a paragraph the look of a label, for the line above a group of fields (a paragraph
 * block with the class `form-legend` in its settings). A checkbox block with the class `chip` is drawn as a
 * pill that fills in dark when it is ticked ("Štítok filtra"), so a row of them reads as a choice of several.
 */
.control-label,
.form-legend p {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-heading);
}

.control-label {
  margin-bottom: var(--space-2);
}

/* The fields stand 18px apart, the hint under a field 8px below it. */
.form-group {
  margin-bottom: var(--prograss-space-18);
}

.hint-block {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--color-text-muted);
}

.form-control,
input[type=text],
input[type=email],
input[type=tel],
input[type=number],
input[type=url],
input[type=password],
textarea,
select {
  border-color: var(--prograss-border-strong);
  background-color: var(--prograss-white);
}

.form-control {
  height: 3.125rem;
  padding: 0 var(--space-3);
  font-size: 1rem;
}

textarea.form-control {
  height: 8.125rem;
  min-height: 0;
  padding: var(--prograss-space-12) var(--space-3);
}

input[type=checkbox] {
  width: 1.25rem;
  height: 1.25rem;
  border-color: var(--prograss-border-strong);
  border-radius: var(--radius-sm);
  background-color: var(--prograss-white);
}

label:has(> input[type=checkbox]) {
  display: flex;
  gap: var(--prograss-space-10);
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--color-text);
}

/* A checkbox drawn as a pill: the box itself is hidden but stays focusable. */
.chip label:has(> input[type=checkbox]) {
  padding: var(--prograss-space-12) var(--prograss-space-20);
  border: 1px solid var(--prograss-dark);
  border-radius: var(--prograss-pill);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--color-heading);
}

.chip input[type=checkbox] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.chip label:has(> input:checked) {
  background: var(--prograss-dark);
  color: var(--prograss-white);
}

.chip label:has(> input:focus-visible) {
  box-shadow: 0 0 0 3px var(--color-focus);
}

/*
 * The caption chip over a photo ("Popis fotky" of the Figma design), shared by the blocks: dark green at 85%,
 * white 13px text, 16px from the bottom left corner of the photo. The view gives it its colours, its corner and
 * its vertical padding with the utilities (`photo-caption position-absolute m-0 py-6 bg-dark text-white
 * rounded-sm`), inside a parent that is `position-relative`.
 */
.photo-caption {
  left: var(--space-3);
  bottom: var(--space-3);
  padding-inline: 0.6875rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  opacity: 0.85;
}

/*
 * The header block of the theme ("Hlavička" and "Mobil – Menu" of the Figma design). The view sets the layout,
 * the spaces and the colours with the utilities; this file holds only what they cannot say: the heights, the
 * sizes of the logo and the icons, the pieces the platform draws (the navigation, the cart) and the hairlines.
 * Mobile first: below 1080px (the lg break) the bar is 64px high with the phone, the cart and the menu button,
 * from 1080px it is 88px high with the navigation, the cart in a ring and the button.
 */
.block-header-bar {
  padding-right: var(--prograss-space-12);
}

.block-header-brand img {
  width: auto;
  height: 2.8125rem;
  max-height: none;
}

.block-header-nav .nav {
  column-gap: var(--prograss-space-36);
}

.block-header-nav .nav a {
  color: var(--color-heading);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.2;
}

.block-header-nav .nav a:hover {
  color: var(--color-secondary);
}

/* The phone, the cart and the menu button of a phone: 44px boxes with a 21px icon. */
.block-header-phone,
.block-header-action,
.block-header-toggle {
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  color: var(--color-heading);
}

.block-header-phone svg,
.block-header-action svg,
.block-header-toggle svg {
  width: 1.3125rem;
  height: 1.3125rem;
}

.block-header-actions {
  gap: 0;
}

/* The dark menu of a phone, over the whole screen. */
.block-header-menu {
  width: 100%;
  max-width: 100%;
}

.block-header-menu-top {
  min-height: 4rem;
  border-bottom: 1px solid var(--prograss-line-dark);
}

.block-header-menu .dialog-close {
  position: static;
  width: auto;
  height: 2.75rem;
  font-size: 1.875rem;
  line-height: 1.15;
}

.block-header-menu .dialog-close:hover {
  background: transparent;
}

.block-header-menu .nav {
  gap: 0;
  margin: 0;
}

.block-header-menu .nav a {
  display: block;
  padding: var(--space-3) 0;
  font-family: var(--font-heading);
  font-size: 1.875rem;
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--prograss-on-dark);
  border-bottom: 1px solid var(--prograss-line-dark);
}

.block-header-menu-instagram {
  line-height: 1.5;
}

/* The focused header: its bar keeps the rule of the header, the steps of the order stand under it. */
.block-header-focused {
  border-bottom: 0;
}

.block-header-focused-bar {
  border-bottom: 1px solid var(--color-border);
}

/* The phone of the focused header: a large icon on a phone, the icon and the number in the text from lg. */
.block-header-advice-icon {
  font-size: 1.875rem;
  line-height: 1;
}

@media (min-width: 67.5rem) {
  .block-header-advice-icon {
    font-size: 1rem;
  }
  .block-header-bar {
    min-height: 5.5rem;
    padding-right: var(--container-padding);
  }
  .block-header-brand img {
    height: 3.5rem;
  }
  /* The cart of the bar: a 44px ring in the strong line colour with a 20px icon. */
  .block-header-action {
    position: relative;
    border: 1px solid var(--prograss-border-strong);
    border-radius: var(--prograss-pill);
  }
  /* The count of the cart sits on the ring, at its top right: the line of the circle runs through its middle.
     That point of a circle is 14.64% (half of 1 - cos 45°) from the top and from the right of its box. */
  .block-header-action .shop-cart-icon {
    position: static;
  }
  .block-header-action .shop-cart-count {
    top: 14.64%;
    right: 14.64%;
    transform: translate(50%, -50%);
  }
  .block-header-action svg {
    width: 1.25rem;
    height: 1.25rem;
  }
}
/*
 * The intro block: the hero of the design ("Úvod" of the Figma design). The view sets the layout, the spaces,
 * the colours and the sizes with the utilities and the text styles of type.scss; this file holds only what
 * they cannot say. On a phone the photos slide between the text and the buttons; from the md break (900px) the
 * text and the buttons sit on the left, centred against the photos, in the 560 : 656 widths of the design.
 */
.block-intro-inner {
  grid-template-areas: "content" "media" "actions";
}

.block-intro-content {
  grid-area: content;
}

.block-intro-actions {
  grid-area: actions;
}

.block-intro-media {
  grid-area: media;
  height: 25rem;
}

@media (min-width: 56.25rem) {
  .block-intro-inner {
    grid-template-columns: minmax(0, 35fr) minmax(0, 41fr);
    grid-template-rows: 1fr auto auto 1fr;
    grid-template-areas: ".       media" "content media" "actions media" ".       media";
  }
  .block-intro-media {
    height: 38.75rem;
  }
}
/*
 * The page intro block: the head of a subpage of the design. The view sets the spaces, the colours and the
 * sizes with the utilities and the text styles of type.scss; this file holds only the columns: on a phone the
 * text sits under the title, from the md break (900px) the title takes seven of the twelve columns of the
 * design and the text the last five, both resting on the same bottom line.
 */
/* On a phone the photo touches the head and the next section brings its own space. */
.block-pagehero + .block-image {
  padding-bottom: 0;
}

/* The head of the Realizácie page sits closer to the filters under it than the other heads do. */
.block-pagehero:has(+ .block-projects) .block-pagehero-inner {
  padding-bottom: var(--space-4);
}

@media (min-width: 56.25rem) {
  .block-pagehero-inner {
    grid-template-columns: minmax(0, 688fr) minmax(0, 520fr);
  }
  .block-pagehero + .block-image {
    padding-bottom: var(--space-5);
  }
  .block-pagehero:has(+ .block-projects) .block-pagehero-inner {
    padding-top: var(--prograss-space-72);
    padding-bottom: var(--prograss-space-40);
  }
}
/*
 * The image block of the platform, drawn as the wide photo of the ProGrass design (see
 * blocks/image/views/image.php). The view styles the figure with the utilities; this file holds only the
 * bleed no utility can say: on a phone the photo runs from edge to edge of the screen, from the md break it
 * sits in the container again.
 */
.block-image-figure {
  margin: 0 calc(-1 * var(--container-padding));
}

/* On a phone the photo is cropped to the 390 : 300 of the design instead of its own shape. */
.block-image-figure img {
  aspect-ratio: 13/10;
  object-fit: cover;
}

@media (min-width: 56.25rem) {
  .block-image-figure {
    margin-inline: 0;
  }
  .block-image-figure img {
    aspect-ratio: auto;
  }
}
/*
 * The hero photo of a realization (settings.class "realization-hero" on its `image` block): fixed at 720px
 * tall from the Figma design, cropped with object-fit; a phone keeps the 13:10 crop every other photo has.
 */
@media (min-width: 56.25rem) {
  .realization-hero .block-image-figure img {
    aspect-ratio: auto;
    height: 45rem;
    object-fit: cover;
  }
}
/*
 * The steps block of the Ako pracujeme page. The view sets the spaces and the colours with the utilities and the
 * text styles of type.scss; this file holds only what they cannot say: the shape of the photo (620 by 400 in the
 * design), the two columns of a step in the 620 : 588 widths of the design with the photo changing sides step by
 * step, and the two columns of the facts under a step.
 */
.block-phases-media {
  aspect-ratio: 35/22;
}

.block-phases-facts {
  grid-template-columns: repeat(2, minmax(0, max-content));
}

@media (min-width: 56.25rem) {
  .block-phases-media {
    aspect-ratio: 31/20;
  }
  .block-phases-item {
    grid-template-columns: minmax(0, 620fr) minmax(0, 588fr);
  }
  .block-phases-item:nth-child(2n) .block-phases-media {
    order: 2;
  }
  .block-phases-item:nth-child(2n) {
    grid-template-columns: minmax(0, 588fr) minmax(0, 620fr);
  }
}
/*
 * The project list block (the cards of the Realizácie page). The view sets the spaces and the colours with the
 * utilities; this file holds what they cannot say: the text style and the border of a pill and of the chips over
 * the photo, the three columns of the grid (407 by 375 photos in the design) and where the chips sit; the photo
 * that grows a little under the pointer, and the cards that come in one after another when the list switches to
 * another kind or lengthens (`is-entering`, set by the script of the block). Both stay still for who asks the
 * system for less motion.
 */
/* On a phone the pills run as one row off the right edge of the screen and scroll sideways. */
.block-projects-pills {
  margin-inline: calc(-1 * var(--container-padding));
  padding-inline: var(--container-padding);
  overflow-x: auto;
  scrollbar-width: none;
}

.block-projects-pill {
  border: 1px solid var(--prograss-dark);
  font-size: var(--prograss-text-15);
  line-height: 1.3;
  color: var(--prograss-dark);
  white-space: nowrap;
}

.block-projects-pill.is-active {
  border-color: var(--prograss-dark);
  background-color: var(--prograss-dark);
  color: var(--prograss-on-dark);
}

.block-projects-media {
  aspect-ratio: 35/24;
}

.block-projects-media img {
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}

a:hover .block-projects-media img,
a:focus-visible .block-projects-media img {
  transform: scale(1.05);
}

/* The cards new to the visitor come in one after another (`--i` is their place among them, set by the script). */
.block-projects-grid > li.is-entering {
  animation: block-projects-card-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(var(--i, 0) * 110ms);
}

@keyframes block-projects-card-in {
  from {
    opacity: 0;
    transform: translateY(1.25rem);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .block-projects-media img,
  .block-projects-grid > li.is-entering {
    transition: none;
    animation: none;
  }
  a:hover .block-projects-media img,
  a:focus-visible .block-projects-media img {
    transform: none;
  }
}
.block-projects-type {
  top: var(--space-3);
  left: var(--space-3);
  font-size: var(--prograss-text-13);
  line-height: 1.5;
}

.block-projects-area {
  white-space: nowrap;
}

@media (min-width: 56.25rem) {
  .block-projects-pills {
    margin-inline: 0;
    padding-inline: 0;
    overflow-x: visible;
    flex-wrap: wrap;
  }
  .block-projects-media {
    aspect-ratio: 38/35;
  }
  .block-projects-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
/*
 * The before-and-after block of a realization (`modules/prograssmodul/frontend/blocks/realizationphotos/`): the
 * "Pred a po" tabs on a sand band (the heading and the tabs on one row, see the view). The tabs are plain radio
 * inputs and labels, shown and hidden with sibling selectors so no script is needed; the radio input itself is
 * visually hidden. On a phone the tabs scroll sideways in one row and the photos of a pair stand upright, as the
 * mobile design has them.
 */
/* The sand band behind "Pred a po" ("ProGrass farby" bg/sand in the Figma design). */
.block-realizationphotos-band {
  padding: var(--prograss-space-36) 0;
  background-color: var(--prograss-sand);
}

.block-realizationphotos-pairs-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--prograss-space-14);
  margin: 0 0 var(--prograss-space-14);
}

.block-realizationphotos-pairs-head h2 {
  font-size: 1.75rem;
  line-height: 1.12;
}

.block-realizationphotos-tab-input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* On a phone the tabs run as one row off the right edge of the screen and scroll sideways. */
.block-realizationphotos-tabs {
  display: flex;
  gap: var(--space-2);
  width: calc(100% + 2 * var(--container-padding));
  margin-inline: calc(-1 * var(--container-padding));
  padding-inline: var(--container-padding);
  overflow-x: auto;
  scrollbar-width: none;
}

.block-realizationphotos-tab {
  flex: none;
  padding: var(--prograss-space-12) var(--prograss-space-20);
  border: 1px solid var(--prograss-dark);
  border-radius: var(--prograss-pill);
  font-size: var(--prograss-text-15);
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
  color: var(--prograss-dark);
  cursor: pointer;
}

.block-realizationphotos-pair {
  display: none;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
  margin: 0;
}
.block-realizationphotos-pair figure {
  margin: 0;
}
.block-realizationphotos-pair figure img {
  aspect-ratio: 171/300;
  border-radius: var(--radius-lg);
}

.block-realizationphotos-pair-caption {
  grid-column: span 2;
  margin: var(--prograss-space-6) 0 0;
  font-size: var(--prograss-text-15);
  line-height: 1.5;
  color: var(--color-text);
}

.block-realizationphotos-tab-input:nth-of-type(1):checked ~ .block-realizationphotos-pairs-head .block-realizationphotos-tabs label:nth-of-type(1) {
  border-color: var(--prograss-dark);
  background-color: var(--prograss-dark);
  color: var(--prograss-on-dark);
}

.block-realizationphotos-tab-input:nth-of-type(1):checked ~ .block-realizationphotos-pair:nth-of-type(2) {
  display: grid;
}

.block-realizationphotos-tab-input:nth-of-type(2):checked ~ .block-realizationphotos-pairs-head .block-realizationphotos-tabs label:nth-of-type(2) {
  border-color: var(--prograss-dark);
  background-color: var(--prograss-dark);
  color: var(--prograss-on-dark);
}

.block-realizationphotos-tab-input:nth-of-type(2):checked ~ .block-realizationphotos-pair:nth-of-type(3) {
  display: grid;
}

.block-realizationphotos-tab-input:nth-of-type(3):checked ~ .block-realizationphotos-pairs-head .block-realizationphotos-tabs label:nth-of-type(3) {
  border-color: var(--prograss-dark);
  background-color: var(--prograss-dark);
  color: var(--prograss-on-dark);
}

.block-realizationphotos-tab-input:nth-of-type(3):checked ~ .block-realizationphotos-pair:nth-of-type(4) {
  display: grid;
}

@media (min-width: 56.25rem) {
  .block-realizationphotos-band {
    padding: var(--prograss-space-88) 0;
  }
  .block-realizationphotos-pairs-head {
    margin-bottom: var(--prograss-space-20);
  }
  .block-realizationphotos-pairs-head h2 {
    font-size: var(--prograss-text-44);
    line-height: 1.1;
  }
  .block-realizationphotos-tabs {
    flex-wrap: wrap;
    gap: var(--prograss-space-14);
    width: auto;
    margin-inline: 0;
    padding-inline: 0;
    overflow: visible;
  }
  .block-realizationphotos-tab {
    padding: var(--space-2) var(--space-4);
    font-size: var(--font-size);
    line-height: var(--line-height);
  }
  .block-realizationphotos-pair {
    gap: var(--prograss-space-14);
  }
  .block-realizationphotos-pair figure img {
    aspect-ratio: 4/3;
  }
  .block-realizationphotos-pair-caption {
    margin: 0;
    color: var(--prograss-faint);
  }
}
/*
 * The project intro block (the head of one garden of the Realizácie page). The view sets the spaces and the
 * colours with the utilities; this file holds only the rule under the facts and their columns: two on a phone,
 * the four of the design side by side from the md break (900px).
 */
.block-projecthero-facts {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-bottom: 1px solid var(--color-border);
}

@media (min-width: 56.25rem) {
  .block-projecthero-facts {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
/*
 * The story block ("Náš príbeh" of the O nás page). The view sets the spaces and the colours with the utilities
 * and the text styles of type.scss; this file holds only the columns: on a phone the title stands over the text,
 * from the md break (900px) the title takes the left five of the twelve columns of the design and the text the
 * right seven.
 */
@media (min-width: 56.25rem) {
  .block-story-inner {
    grid-template-columns: minmax(0, 460fr) minmax(0, 748fr);
  }
}
/*
 * The strengths block (the dark "Čo nás odlišuje" band of the O nás page). The view sets the spaces and the
 * colours with the utilities and the text styles of type.scss; this file holds only the rule above every
 * strength and the columns: one under another on a phone, side by side in equal columns from the md break
 * (900px).
 */
.block-strengths-item {
  border-top: 1px solid var(--prograss-line-dark);
}

@media (min-width: 56.25rem) {
  .block-strengths-items {
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
  }
}
/*
 * The service list block ("Čo robíme" of the O nás page). The view sets the spaces and the colours with the
 * utilities and the text styles of type.scss; this file holds only what they cannot say: the columns of the
 * section (title left, services right, 5 : 7 as in the design), the two columns of the list from the md break
 * (900px), the check mark in the bark colour before a service and the rule under it.
 */
.block-checklist-item {
  border-bottom: 1px solid var(--color-border);
}

.block-checklist-item::before {
  content: "✓";
  color: var(--color-secondary);
}

@media (min-width: 56.25rem) {
  .block-checklist-inner {
    grid-template-columns: minmax(0, 460fr) minmax(0, 748fr);
  }
  .block-checklist-items {
    columns: 2;
    column-gap: var(--prograss-space-40);
  }
  .block-checklist-item {
    break-inside: avoid;
  }
}
/*
 * The photo strip block ("Z našich stavieb" of the O nás page). The view sets the spaces and the colours with
 * the utilities; this file holds only the grid of the strip and the shape of a photo: two columns on a phone,
 * the six photos side by side from the md break (900px), each nearly square (204 by 200 in the design).
 */
/* On a phone the title, the photos and the link stack in the order of the design: the link moves under the
   photos, so the head dissolves into the grid of the section and comes back as a row from the md break. */
.block-builds-head {
  display: contents;
}

.block-builds-head h2 {
  order: -1;
}

.block-builds-head > :not(h2) {
  order: 1;
}

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

.block-builds-photo {
  aspect-ratio: 1;
  height: auto;
}

@media (min-width: 56.25rem) {
  .block-builds-strip {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .block-builds-photo {
    aspect-ratio: 51/50;
  }
}
/*
 * The questions block of the platform, drawn as the sand "Časté otázky" band of the design. The view sets the
 * spaces it can with the utilities; this file holds the band itself, the 5 : 7 columns of the section, and the
 * accordion the utilities cannot say: the rule under a question, its + that turns to − in the bark colour, and
 * the sizes of the question and the answer.
 */
.block-faq {
  padding-block: var(--space-5);
  background-color: var(--prograss-sand);
}

.block-faq-item {
  border-bottom: 1px solid var(--prograss-border-strong);
}

.block-faq-item summary {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--prograss-space-20);
  padding-block: var(--prograss-space-14) var(--prograss-space-18);
  font-size: var(--prograss-text-19);
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-heading);
  cursor: pointer;
  list-style: none;
}

.block-faq-item[open] summary {
  padding-bottom: var(--prograss-space-10);
}

.block-faq-item summary::-webkit-details-marker {
  display: none;
}

/* The platform draws its + as a background cross on the same ::after and turns it 45° when open; take the
 * cross and the turn away, so only the + here, and the − of the open item, is seen. */
.block-faq-item summary::after {
  content: "+";
  flex: none;
  width: auto;
  height: auto;
  background: none;
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  font-weight: 400;
  line-height: 1;
  color: var(--color-secondary);
  transition: none;
}

.block-faq-item[open] summary::after,
.block-faq-item[open]:not(.closing) summary::after {
  content: "−";
  transform: none;
}

.block-faq-answer {
  padding-bottom: var(--prograss-space-18);
}

.block-faq-answer p {
  margin: 0;
}

@media (min-width: 56.25rem) {
  .block-faq {
    padding-block: var(--prograss-space-96);
  }
  .block-faq-inner {
    grid-template-columns: minmax(0, 460fr) minmax(0, 748fr);
  }
  .block-faq-item summary {
    padding-block: var(--prograss-space-18);
  }
  .block-faq-item[open] summary {
    padding-bottom: var(--prograss-space-12);
  }
  .block-faq-answer {
    padding-bottom: var(--prograss-space-22);
  }
}
/*
 * The call-to-action block of the platform, drawn as the card of the ProGrass design ("Porozprávajme sa o vašej
 * záhrade"): a deep green rounded card as wide as the content, a serif title in cream on the left, the button as
 * a light surface on the right. The block is the platform's, so only its stylesheet changes here; its view stays
 * (`.container.block-cta-inner` with the content and the actions in it). The card takes the width of the
 * container itself, so the inner padding of the card replaces the padding of the container.
 */
/* The space under the card down to the footer. */
.block-cta {
  padding-bottom: var(--prograss-space-44);
}

/* The card right after the photo strip ("Z našich stavieb") stays on its sand band, as the O nás page has it;
   anywhere else the card sits on the page itself, as the Ako pracujeme page has it. */
.block-builds + .block-cta {
  background-color: var(--prograss-sand);
  padding-bottom: var(--space-5);
}

/* The card right after the questions keeps its own space up to their sand band on a phone. */
.block-faq + .block-cta {
  padding-top: var(--prograss-space-44);
}

.block-cta-inner {
  width: calc(100% - 2 * var(--container-padding));
  max-width: var(--container-width);
  padding: var(--prograss-space-26) var(--prograss-space-22);
  background: var(--color-primary);
  border-radius: var(--radius-lg);
}

.block-cta h2 {
  margin: 0;
  font-size: var(--prograss-text-36);
  line-height: 1.15;
  color: var(--color-primary-contrast);
}

.block-cta .lead {
  margin: var(--prograss-space-14) 0 0;
  color: var(--prograss-on-dark-soft);
}

.block-cta .lead:empty {
  display: none;
}

.block-cta .block-cta-actions {
  margin-top: var(--prograss-space-14);
}

.block-cta .block-cta-actions .btn {
  width: 100%;
  background: var(--color-background);
  border-width: 0;
  color: var(--prograss-dark);
  text-align: center;
}

@media (min-width: 56.25rem) {
  /* As much space above the card as under it, up to the section before it. */
  .block-cta,
  .block-faq + .block-cta {
    padding-top: var(--prograss-space-96);
    padding-bottom: var(--prograss-space-96);
  }
  /* The card on the sand band of the photo strip follows the photos right away. */
  .block-builds + .block-cta {
    padding-top: 0;
    padding-bottom: var(--prograss-space-96);
  }
  .block-cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--prograss-space-40);
    padding: var(--prograss-space-56) var(--prograss-space-64);
  }
  .block-cta .lead {
    margin-top: var(--prograss-space-10);
  }
  .block-cta .block-cta-actions {
    margin-top: 0;
  }
  .block-cta .block-cta-actions .btn {
    width: auto;
  }
}
/*
 * The "own designs" block ("Vlastné návrhy" of the Figma design). The view sets the layout, the spaces, the
 * colours and the sizes with the utilities and the text styles of type.scss; this file holds only what they
 * cannot say: the dark section, the grid areas and the heights of the photos. On a phone the photos (220px
 * high) slide between the text and the button; from the md break (900px) the text and the button sit on the
 * left, centred against the photos (460px high), in the 520 : 688 widths of the design.
 */
.block-designs {
  background: var(--prograss-dark);
}

.block-designs-inner {
  grid-template-areas: "content" "media" "actions";
}

.block-designs-content {
  grid-area: content;
}

.block-designs-actions {
  grid-area: actions;
}

.block-designs-media {
  grid-area: media;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.block-designs-media img {
  height: 13.75rem;
}

.block-designs-caption {
  line-height: 1.5;
}

@media (min-width: 56.25rem) {
  .block-designs-inner {
    grid-template-columns: minmax(0, 65fr) minmax(0, 86fr);
    grid-template-rows: 1fr auto auto 1fr;
    grid-template-areas: ".       media" "content media" "actions media" ".       media";
  }
  .block-designs-media img {
    height: 28.75rem;
  }
}
/*
 * The "how we work" block ("Ako pracujeme" of the Figma design). The view sets the layout, the spaces and the
 * colours with the utilities and the text styles of type.scss; this file holds only what they cannot say: the
 * rules above the steps, the columns and the sizes of the numbers, the step titles and their texts. On a phone
 * the steps stack under a thin rule, the 44px wide number beside the title and the text; from the md break
 * (900px) they stand side by side in equal columns under a 2px dark rule.
 */
.block-process-step {
  border-top: 1px solid var(--prograss-border-strong);
}

.block-process-number {
  flex: 0 0 2.75rem;
  font-size: 1.875rem;
  line-height: 1.12;
  letter-spacing: -0.01em;
}

.block-process-title {
  font-size: 1.1875rem;
}

.block-process-text {
  font-size: 1rem;
}

@media (min-width: 56.25rem) {
  .block-process-steps {
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
  }
  .block-process-step {
    border-top: 2px solid var(--prograss-dark);
  }
  .block-process-number {
    flex-basis: auto;
    font-size: 2.75rem;
    line-height: 1.1;
    letter-spacing: -0.02em;
  }
}
/*
 * The "about us" block ("O nás" of the Figma design). The view sets the band, the layout, the spaces and the
 * colours with the utilities and the text styles of type.scss; this file holds only what they cannot say: the
 * height of the photo (280px on a phone, 520px from the md break) and the 620 : 588 columns of a wide screen.
 */
.block-about-photo {
  height: 17.5rem;
}

@media (min-width: 56.25rem) {
  .block-about-inner {
    grid-template-columns: minmax(0, 155fr) minmax(0, 147fr);
  }
  .block-about-photo {
    height: 32.5rem;
  }
}
/*
 * The shop offer block ("E-shop" of the Figma design). The view sets the layout, the spaces, the colours and
 * the card with the utilities and the text styles of type.scss; this file holds only what they cannot say: the
 * width of the text beside the title, the columns of the card, the height of its photo, the sizes of the
 * product's texts and the rules between the prices. On a phone the photo (220px high) stands above the text of
 * the card; from the md break (900px) it fills the left of the card beside a 540px column of text.
 */
.block-offer-media {
  height: 13.75rem;
}

.block-offer-name {
  font-size: 1.625rem;
  line-height: 1.12;
  letter-spacing: -0.01em;
}

.block-offer-small {
  font-size: 0.9375rem;
}

.block-offer-price {
  border-bottom: 1px solid var(--color-border);
}

.block-offer-amount {
  font-size: 1.1875rem;
}

@media (min-width: 56.25rem) {
  .block-offer-text {
    max-width: 28.75rem;
  }
  .block-offer-card {
    grid-template-columns: minmax(0, 1fr) 33.75rem;
  }
  .block-offer-media {
    height: auto;
  }
  .block-offer-name {
    font-size: 2.125rem;
    line-height: 1.1;
    letter-spacing: -0.02em;
  }
  .block-offer-prices {
    border-top: 1px solid var(--color-border);
  }
  .block-offer-amount {
    font-size: 1.5rem;
  }
}
/*
 * The inquiry section ("Dopyt" of the Figma design): a form block whose form starts with the inquiry text block
 * of the theme. Only such a form is drawn this way; every other form keeps the look of the platform.
 *
 * The form block becomes the dark green band and the form itself the light card of the fields. The fields wrap
 * as a row: one per line, two per line where their block has the class `half`, and the `chip` checkboxes side
 * by side 10px apart. On a phone the text stands above the card: it lies over the top of the card in the green
 * of the band, with the card's rounded corners cut out under it. From the md break (900px) the card takes the
 * right 740 of the 1280 and the text sits beside it, 460 wide and 80 away.
 */
.block-form:has(.block-inquiry) {
  padding: var(--prograss-space-56) var(--container-padding);
  background: var(--color-primary);
}

.block-form:has(.block-inquiry) .form-module {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  column-gap: var(--prograss-space-20);
  padding: var(--space-4) var(--prograss-space-20);
  border-radius: var(--radius-lg);
  background: var(--color-background);
}

/* The blocks of the form: the platform's centred containers give way to the card. */
.block-form:has(.block-inquiry) .form-module > * {
  flex: 0 0 100%;
}

.block-form:has(.block-inquiry) .form-module > .block {
  margin: 0 0 var(--prograss-space-18);
}

.block-form:has(.block-inquiry) .form-module > .block-submit {
  margin-bottom: 0;
}

.block-form:has(.block-inquiry) .form-module .container {
  max-width: none;
  padding-inline: 0;
}

.block-form:has(.block-inquiry) .form-group {
  margin-bottom: 0;
}

.block-form:has(.block-inquiry) .block-submit .btn {
  width: 100%;
}

/* The design marks no field as required; the fields still say so to a screen reader (aria-required). */
.block-form:has(.block-inquiry) .form-required {
  display: none;
}

/* The chips: 10px apart, the column gap of the row less 10px. */
.block-form:has(.block-inquiry) .form-module > .chip {
  flex: 0 0 auto;
  margin: 0 calc(var(--prograss-space-10) - var(--prograss-space-20)) var(--prograss-space-10) 0;
}

.block-form:has(.block-inquiry) .form-module > .chip:not(:has(+ .chip)) {
  margin-bottom: var(--prograss-space-18);
}

/* A break after the last chip, so the fields after it start a line of their own: an empty item of the full
   width, ordered between the chips and what follows them. */
.block-form:has(.block-inquiry) .form-module::after {
  content: "";
  flex-basis: 100%;
  order: 1;
}

.block-form:has(.block-inquiry) .form-module > .chip:not(:has(+ .chip)) ~ * {
  order: 2;
}

/* The text on a phone: over the top of the card, in the green of the band, as wide as the card with its
   padding on both sides. */
.block-form:has(.block-inquiry) .form-module > .block-inquiry {
  position: relative;
  flex-basis: calc(100% + 2 * var(--prograss-space-20));
  margin: calc(-1 * var(--space-4)) calc(-1 * var(--prograss-space-20)) var(--space-4);
  padding-bottom: var(--prograss-space-20);
  background: var(--color-primary);
}

.block-form:has(.block-inquiry) .form-module > .block-inquiry::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(-1 * var(--radius-lg));
  height: var(--radius-lg);
  background: radial-gradient(circle at 100% 100%, transparent var(--radius-lg), var(--color-primary) var(--radius-lg)) left top/var(--radius-lg) var(--radius-lg) no-repeat, radial-gradient(circle at 0 100%, transparent var(--radius-lg), var(--color-primary) var(--radius-lg)) right top/var(--radius-lg) var(--radius-lg) no-repeat;
}

@media (min-width: 56.25rem) {
  .block-form:has(.block-inquiry) {
    padding: var(--prograss-space-110) max(var(--container-padding), (100% - var(--container-width)) / 2);
  }
  .block-form:has(.block-inquiry) .form-module {
    margin-left: 42.1875%;
    padding: var(--prograss-space-44);
  }
  .block-form:has(.block-inquiry) .form-module > .block {
    margin-bottom: var(--prograss-space-22);
  }
  .block-form:has(.block-inquiry) .form-module > .block-submit {
    margin-bottom: 0;
  }
  .block-form:has(.block-inquiry) .form-module > .chip {
    margin-bottom: var(--prograss-space-10);
  }
  .block-form:has(.block-inquiry) .form-module > .chip:not(:has(+ .chip)) {
    margin-bottom: var(--prograss-space-22);
  }
  .block-form:has(.block-inquiry) .form-module > .half {
    flex-basis: calc(50% - var(--prograss-space-10));
  }
  /* The text beside the card: 460 of its 740 wide, 80 to its left. */
  .block-form:has(.block-inquiry) .form-module > .block-inquiry {
    position: absolute;
    top: 0;
    right: 110.8108%;
    width: 62.1622%;
    margin: 0;
    padding: 0;
    background: none;
  }
  .block-form:has(.block-inquiry) .form-module > .block-inquiry::after {
    content: none;
  }
}
/*
 * The contact cards of the Kontakt page ("Telefón", "E-mail", "Instagram"): one column on a phone, three side
 * by side from the md break. The view sets the colours and the radius with the utilities; this file holds the
 * grid, the card's own padding and the two off-scale text sizes the design has (30px icon, 20px value).
 */
.block-contactcards-card {
  padding: var(--prograss-space-28);
}

.block-contactcards-icon {
  width: 1.875rem;
  height: 1.875rem;
}

.block-contactcards-value {
  font-size: 1.25rem;
}

@media (min-width: 56.25rem) {
  .block-contactcards-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
/*
 * The foot of the Kontakt page: the map beside "Kde pôsobíme" and "Fakturačné údaje". The view sets the
 * colours and the text sizes with the utilities; this file holds the two-column grid, the map's own shape and
 * the rule under a row of the billing list.
 */
.block-companyinfo-inner {
  display: grid;
  gap: var(--prograss-space-44);
  padding: var(--prograss-space-44) 0;
}

.block-companyinfo-map {
  aspect-ratio: 3/2;
}

.block-companyinfo-billing {
  margin-top: var(--prograss-space-32);
}

.block-companyinfo-billing-row {
  padding-block: var(--prograss-space-12);
}

.block-companyinfo-billing-row:not(:last-child) {
  border-bottom: 1px solid var(--color-border);
}

@media (min-width: 56.25rem) {
  .block-companyinfo-inner {
    grid-template-columns: minmax(0, 688fr) minmax(0, 520fr);
    gap: var(--prograss-space-72);
    padding: var(--prograss-space-96) 0;
    align-items: start;
  }
}
/*
 * The calculator of bark and the steps of an order ("Kalkulačka a objednávka" of the Figma design). The view sets
 * the layout, the spaces and the colours with the utilities; this file holds only what they cannot say: the
 * columns, the line heights and letter spacing of the titles, the size of the field and of the result, and the
 * rules above the steps. On a phone the calculator stands alone (the steps are hidden, as in the design); from
 * the md break (900px) the steps stand beside it in two equal columns.
 */
.block-calculator-title {
  line-height: 1.12;
  letter-spacing: -0.01em;
}

.block-calculator-field {
  max-width: 20rem;
}

.block-calculator-field .form-control {
  height: 3.5625rem;
  padding: 0 var(--prograss-space-14);
  font-size: 1.0625rem;
}

.block-calculator-result {
  padding: var(--prograss-space-18) var(--prograss-space-20);
}

.block-calculator-amount {
  font-size: 2rem;
  line-height: 1.12;
}

.block-calculator-step {
  border-top: 1px solid var(--prograss-border-strong);
}

.block-calculator-number {
  flex: 0 0 2.75rem;
  font-size: 1.875rem;
  line-height: 1.15;
}

.block-calculator-step-title {
  font-size: 1.1875rem;
}

@media (min-width: 56.25rem) {
  .block-calculator-layout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
  .block-calculator-title {
    line-height: 1.1;
    letter-spacing: -0.02em;
  }
  .block-calculator-field .form-control {
    height: 3.875rem;
    font-size: 1.25rem;
  }
  .block-calculator-result {
    padding: var(--prograss-space-22) var(--space-4);
  }
  .block-calculator-amount {
    font-size: 2.125rem;
    line-height: 1.15;
  }
}
/*
 * The parameters of a product ("Parametre" of the Figma design). The view sets the layout, the spaces and the
 * colours with the utilities; this file holds only what they cannot say: the columns, the line heights and letter
 * spacing of the title and the size of the text of the rows. On a phone the title stands above the rows and each
 * value sits at the end of its row; from the md break (900px) the title stands on the left, in the 460 : 748
 * columns of the design, and the names and the values of the rows in two equal columns.
 */
.block-parameters-title {
  line-height: 1.12;
  letter-spacing: -0.01em;
}

.block-parameters-row {
  font-size: var(--prograss-text-15);
  line-height: 1.5;
}

.block-parameters-row dd {
  text-align: right;
}

@media (min-width: 56.25rem) {
  .block-parameters-layout {
    grid-template-columns: minmax(0, 460fr) minmax(0, 748fr);
    align-items: start;
  }
  .block-parameters-title {
    line-height: 1.1;
    letter-spacing: -0.02em;
  }
  .block-parameters-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    font-size: var(--font-size);
    line-height: 1.6;
  }
  .block-parameters-row dd {
    text-align: left;
  }
}
/*
 * The call to action with two buttons ("Plánujete celú záhradu, nielen záhony?" of the Figma design). The view
 * sets the layout, the spaces and the colours with the utilities; this file holds only what they cannot say: the
 * padding of the card, the size and line height of the title, and the buttons that keep their width. On a phone
 * the buttons fill the card under the text; from the md break (900px) they stand on the right of it.
 */
.block-promo-card {
  padding: var(--prograss-space-26) var(--prograss-space-22);
}

.block-promo-title {
  font-size: var(--prograss-text-36);
  line-height: 1.15;
}

@media (min-width: 56.25rem) {
  .block-promo-card {
    padding: var(--prograss-space-56) var(--prograss-space-64);
  }
  .block-promo-actions {
    flex: none;
  }
}
/*
 * A long document in numbered parts (the terms, the complaints procedure, the privacy policy). The view sets the
 * layout, the spaces and the colours with the utilities; this file holds only what they cannot say: the columns,
 * the contents that stay in sight, the rule above each part, the size of the titles, the measure of the text and
 * the markers of the lists. On a phone the parts stand in one column; from the md break (900px) the contents
 * stand on the left, in sight while the page scrolls, and the text on the right in a measure easy to read.
 */
.block-document-body {
  max-width: 48rem;
  line-height: 1.6;
}

.block-document-part {
  border-top: 1px solid var(--color-border);
  scroll-margin-top: calc(var(--sticky-top, 0px) + var(--space-4));
}

.block-document-title {
  font-size: var(--text-2xl);
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.block-document-number,
.block-document-toc-number {
  flex: none;
}

.block-document-toc-number {
  min-width: 1.25rem;
}

.block-document-list {
  padding-left: 1.25rem;
}

.block-document-list li::marker {
  color: var(--color-secondary);
}

.block-document-toc-link:hover {
  color: var(--color-heading);
}

@media (min-width: 56.25rem) {
  .block-document-layout {
    grid-template-columns: minmax(0, 17.5rem) minmax(0, 48rem);
    align-items: start;
  }
  .block-document-toc {
    position: sticky;
    top: calc(var(--sticky-top, 0px) + var(--space-4));
    padding-top: var(--prograss-space-56);
  }
}
/*
 * The footer of the site ("Päta" of the Figma design), drawn by the theme's copy of the platform's view. The
 * view sets the dark bar, its spaces and colours with the utilities; this file holds only what they cannot say:
 * the size of the name and the menu the platform renders. On a phone the name and the links stand one under
 * another 8px apart; from the md break (900px) the name sits left and the links in a row at the right.
 */
.block-footer-name {
  font-size: 1.1875rem;
  line-height: 1.15;
}

.block-footer .nav {
  flex-direction: column;
  gap: var(--space-2);
}

.block-footer .nav a {
  line-height: 1.5;
  text-decoration: underline;
}

.block-footer .nav a:hover {
  color: var(--prograss-on-dark);
}

@media (min-width: 56.25rem) {
  .block-footer-name {
    font-size: 1.25rem;
  }
  .block-footer .nav {
    flex-direction: row;
    column-gap: var(--prograss-space-28);
  }
}
/*
 * The steps of the order under the focused header of the cart, the checkout and the confirmation
 * (blocks/header/views/_steps.php). On a phone a 4px bar per step with its short name under it, the bars of the current step and
 * those before it green; from the md break (900px) a tab per step with its number in a ring and its name, on a
 * 2px rule, the current step and those before it dark.
 */
.shop-steps {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.shop-step {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-text-muted);
}

.shop-step::before {
  content: "";
  height: 0.25rem;
  border-radius: 0.125rem;
  background: var(--color-border);
}

.shop-step-reached {
  color: var(--color-heading);
}

.shop-step-reached::before {
  background: var(--color-primary);
}

.shop-step-number {
  flex: 0 0 2rem;
  height: 2rem;
  border: 1px solid var(--prograss-border-strong);
  border-radius: var(--prograss-pill);
  font-size: 0.9375rem;
  line-height: 1.3;
}

.shop-step-reached .shop-step-number {
  border-color: var(--prograss-dark);
  background: var(--prograss-dark);
  color: var(--prograss-white);
}

@media (min-width: 56.25rem) {
  .shop-step {
    flex-direction: row;
    align-items: center;
    gap: var(--prograss-space-12);
    padding-bottom: var(--space-3);
    border-bottom: 2px solid var(--color-border);
    font-size: 1rem;
    line-height: 1.2;
  }
  .shop-step::before {
    content: none;
  }
  .shop-step-reached {
    border-bottom-color: var(--prograss-dark);
  }
}
/*
 * The cart of the shop ("Objednávka 1 – Košík" of the Figma design), drawn by the theme's copy of its view
 * (modules/shop/frontend/views/cart/index.php). The view sets the layout, the spaces and the colours with the
 * utilities; this file holds what they cannot say and what the shop's own stylesheet draws otherwise, so every
 * rule starts at `.shop-cart` to win over it. On a phone a line is the 84px picture beside the title with its
 * amount, the variant and the stepper, and the summary follows the lines without a card; from the md break
 * (900px) a line is one row (picture, title, stepper, amount) and the summary is a card on the right, in the
 * 824 : 400 columns of the design.
 */
.shop-cart .shop-cart-heading {
  font-size: 2.25rem;
  line-height: 1.08;
}

.shop-cart .shop-cart-lines {
  border-top: 1px solid var(--prograss-border-strong);
}

.shop-cart .shop-cart-line {
  display: grid;
  grid-template-columns: 5.25rem minmax(0, 1fr) auto;
  grid-template-areas: "image details total" "image quantity quantity";
  column-gap: var(--prograss-space-14);
  row-gap: var(--space-2);
  align-items: start;
  padding: var(--prograss-space-18) 0;
  border-bottom: 1px solid var(--prograss-border-strong);
}

.shop-cart .shop-cart-image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border: 0;
  border-radius: var(--radius-lg);
}

.shop-cart .shop-cart-title {
  font-size: 1rem;
}

.shop-cart .shop-cart-variant {
  font-size: var(--text-sm);
}

.shop-cart .shop-cart-remove {
  background: none;
}

.shop-cart .shop-cart-total {
  grid-area: total;
  align-self: start;
  font-size: 1.0625rem;
  text-align: right;
  white-space: nowrap;
}

/* The stepper: a white box in the strong line colour, the quantity with its unit between − and +. */
.shop-cart .shop-stepper {
  align-items: center;
  border-color: var(--prograss-border-strong);
  border-radius: var(--radius);
  background: var(--prograss-white);
  color: var(--color-heading);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.2;
}

.shop-cart .shop-stepper .form-control {
  width: 2.25rem;
  height: 2.5rem;
  padding: 0;
  background: none;
  color: inherit;
  font: inherit;
}

.shop-cart .shop-stepper-unit {
  padding-right: var(--prograss-space-6);
}

.shop-cart .shop-stepper-button {
  width: 2.375rem;
  height: 2.5rem;
  background: none;
  color: inherit;
  font: inherit;
}

.shop-cart .shop-cart-info {
  padding: var(--space-3);
  font-size: var(--text-sm);
  line-height: 1.5;
}

/* The summary fills its column; the shop's stylesheet narrows it to the right. */
.shop-cart .shop-cart-summary {
  max-width: none;
  margin: 0;
}

.shop-cart .shop-cart-summary .shop-cart-row {
  font-size: var(--text-sm);
  line-height: 1.5;
}

.shop-cart .shop-cart-sum {
  padding-top: var(--prograss-space-12);
  border-top: 1px solid var(--prograss-border-strong);
}

.shop-cart .shop-cart-sum-amount {
  font-size: 1.5rem;
}

.shop-cart .shop-cart-empty {
  max-width: 30rem;
  margin: var(--space-5) auto;
  text-align: center;
}

@media (min-width: 56.25rem) {
  .shop-cart .shop-cart-heading {
    font-size: 3.25rem;
    line-height: 1.1;
  }
  .shop-cart .shop-cart-layout {
    grid-template-columns: minmax(0, 103fr) minmax(0, 50fr);
    align-items: start;
  }
  .shop-cart .shop-cart-line {
    grid-template-columns: 7.5rem minmax(0, 1fr) auto 6.875rem;
    grid-template-areas: "image details quantity total";
    column-gap: var(--prograss-space-28);
    align-items: center;
    padding: var(--space-4) 0;
  }
  .shop-cart .shop-cart-title {
    font-size: 1.25rem;
  }
  .shop-cart .shop-cart-variant {
    font-size: 0.9375rem;
  }
  .shop-cart .shop-cart-total {
    align-self: center;
    font-size: 1.5rem;
  }
  .shop-cart .shop-stepper {
    font-size: 1rem;
  }
  .shop-cart .shop-stepper .form-control,
  .shop-cart .shop-stepper-button {
    height: 2.6875rem;
  }
  .shop-cart .shop-stepper-button {
    width: 2.625rem;
  }
  .shop-cart .shop-cart-info {
    padding: var(--prograss-space-20) var(--prograss-space-22);
    font-size: 0.9375rem;
    line-height: 1.6;
  }
  .shop-cart .shop-cart-summary {
    padding: var(--prograss-space-32);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
  }
  .shop-cart .shop-cart-summary-title {
    font-size: 1.625rem;
    line-height: 1.15;
  }
  .shop-cart .shop-cart-summary .shop-cart-row {
    font-size: var(--font-size);
    line-height: 1.6;
  }
  .shop-cart .shop-cart-sum {
    padding-top: var(--space-3);
  }
  .shop-cart .shop-cart-sum-amount {
    font-size: 1.875rem;
  }
}
/*
 * The checkout of the shop ("Objednávka 2 – Údaje a doručenie" of the Figma design), drawn by the shop's own
 * view: the theme only restyles it, so every field, every refresh of its parts and the button stay the shop's.
 * Every rule starts at `.shop-checkout` to win over the shop's stylesheet.
 *
 * The form keeps the shop's sections (some of them the design has not: the country, the billing address), with
 * serif titles and the fields of forms.scss; the ways of delivery and payment are cards, the chosen one white in
 * a dark frame with a filled radio. The summary is a card ("Vaša objednávka") instead of the grey side of the
 * shop: on a phone after the form, from the md break (900px) on the right in the 824 : 400 columns of the design.
 * The button stays under the form, where the shop puts it. The folded total at the top of a phone, which the
 * design has not, is hidden.
 */
.shop-checkout .shop-checkout-top {
  display: none;
}

.shop-checkout .shop-checkout-main {
  padding-top: var(--space-4);
}

.shop-checkout .shop-checkout-main h1 {
  margin: 0 0 var(--space-4);
  font-size: 2.25rem;
  line-height: 1.08;
}

.shop-checkout .shop-checkout-section {
  margin-bottom: var(--prograss-space-32);
}

.shop-checkout .shop-checkout-section h2 {
  margin: 0 0 var(--space-3);
  font-family: var(--font-heading);
  font-size: 1.4375rem;
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: normal;
  color: var(--color-heading);
}

.shop-checkout .shop-checkout-section-head h2 {
  margin-bottom: 0;
}

.shop-checkout .shop-checkout-section-head {
  margin-bottom: var(--space-3);
}

/* The ways of delivery and payment: cards, the chosen one white in a dark frame. */
.shop-checkout .shop-checkout-methods {
  gap: var(--prograss-space-14);
}

.shop-checkout .shop-checkout-method {
  column-gap: var(--space-3);
  row-gap: var(--space-1);
  padding: var(--space-3) var(--space-3);
  border: 1px solid var(--prograss-border-strong);
  border-radius: var(--radius-lg);
}

.shop-checkout .shop-checkout-method:has(input:checked) {
  padding: calc(var(--space-3) - 1px);
  border: 2px solid var(--prograss-dark);
  background: var(--prograss-white);
}

.shop-checkout .shop-checkout-method input[type=radio] {
  width: 1.375rem;
  height: 1.375rem;
  margin: 0;
  border: 1px solid var(--prograss-border-strong);
  border-radius: var(--prograss-pill);
  background: var(--prograss-white);
  appearance: none;
}

.shop-checkout .shop-checkout-method input[type=radio]:checked {
  border: 7px solid var(--color-primary);
}

.shop-checkout .shop-checkout-method input[type=radio]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--color-focus);
}

.shop-checkout .shop-checkout-method-name {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-heading);
}

.shop-checkout .shop-checkout-method-description {
  font-size: var(--text-sm);
  line-height: 1.5;
}

.shop-checkout .shop-checkout-method-price {
  font-size: var(--text-sm);
  color: var(--color-heading);
}

/* The summary: a card instead of the grey side of the shop. */
.shop-checkout .shop-checkout-summary {
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  clip-path: none;
}

.shop-checkout .shop-checkout-summary-inner {
  display: flex;
  flex-direction: column;
  gap: var(--prograss-space-14);
  padding: var(--prograss-space-20);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.shop-checkout .shop-checkout-summary-inner h2 {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 1.375rem;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: normal;
  color: var(--color-heading);
}

.shop-checkout .shop-checkout-lines {
  display: flex;
  flex-direction: column;
  gap: var(--prograss-space-14);
  margin: 0;
}

.shop-checkout .shop-checkout-line {
  align-items: flex-start;
  padding: 0;
  border: 0;
  font-size: var(--text-sm);
  line-height: 1.5;
}

.shop-checkout .shop-checkout-line img {
  display: none;
}

.shop-checkout .shop-checkout-line-title,
.shop-checkout .shop-checkout-line-quantity,
.shop-checkout .shop-checkout-line-variant {
  font-size: inherit;
  line-height: inherit;
  color: var(--color-text-muted);
}

.shop-checkout .shop-checkout-line-total {
  color: var(--color-heading);
}

.shop-checkout .shop-checkout-amounts {
  row-gap: var(--prograss-space-14);
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.5;
}

.shop-checkout .shop-checkout-amounts dt {
  color: var(--color-text-muted);
}

.shop-checkout .shop-checkout-amounts dd {
  color: var(--color-heading);
}

/* The total under a rule across the card: the label and the amount stretch to the height of the row, so the
   rule is one line, and stand on its foot. */
.shop-checkout .shop-checkout-amounts .shop-checkout-grand {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  align-self: stretch;
  padding-top: var(--prograss-space-12);
  border-top: 1px solid var(--prograss-border-strong);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-heading);
}

.shop-checkout .shop-checkout-amounts dt.shop-checkout-grand {
  justify-content: flex-start;
}

.shop-checkout .shop-checkout-amounts dd.shop-checkout-grand {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 400;
}

/* The foot: the policies and the button, under the form. The pages of the shop the shop lists under the button
   are in the footer of the site (see views/layouts/focused.php), so the list is left out. */
.shop-checkout .shop-checkout-links {
  display: none;
}

.shop-checkout .shop-checkout-foot {
  padding-bottom: var(--space-5);
}

.shop-checkout .shop-checkout-policies {
  font-size: var(--text-sm);
  line-height: 1.5;
}

@media (min-width: 56.25rem) {
  .shop-checkout .shop-checkout-layout {
    grid-template-columns: minmax(0, 103fr) minmax(0, 50fr);
    grid-template-areas: "main summary" "foot summary";
    column-gap: var(--prograss-space-56);
  }
  .shop-checkout .shop-checkout-main {
    padding: var(--space-5) 0 0;
  }
  .shop-checkout .shop-checkout-foot {
    padding: 0 0 var(--prograss-space-96);
  }
  .shop-checkout .shop-checkout-summary {
    margin-top: var(--space-5);
  }
  .shop-checkout .shop-checkout-main h1 {
    margin-bottom: var(--prograss-space-40);
    font-size: 3.25rem;
    line-height: 1.1;
  }
  .shop-checkout .shop-checkout-section {
    margin-bottom: var(--prograss-space-40);
  }
  .shop-checkout .shop-checkout-section h2 {
    margin-bottom: var(--prograss-space-18);
    font-size: 1.625rem;
    line-height: 1.15;
  }
  .shop-checkout .shop-checkout-method {
    padding: var(--prograss-space-20) var(--prograss-space-22);
  }
  .shop-checkout .shop-checkout-method:has(input:checked) {
    padding: calc(var(--prograss-space-20) - 1px) calc(var(--prograss-space-22) - 1px);
  }
  .shop-checkout .shop-checkout-method-name {
    font-size: 1.0625rem;
  }
  .shop-checkout .shop-checkout-method-description,
  .shop-checkout .shop-checkout-method-price {
    font-size: 0.9375rem;
  }
  .shop-checkout .shop-checkout-summary-inner {
    padding: var(--prograss-space-32);
  }
  .shop-checkout .shop-checkout-summary-inner h2 {
    font-size: 1.625rem;
  }
  .shop-checkout .shop-checkout-line,
  .shop-checkout .shop-checkout-amounts {
    font-size: var(--font-size);
    line-height: 1.6;
  }
  .shop-checkout .shop-checkout-amounts .shop-checkout-grand {
    padding-top: var(--space-3);
  }
  .shop-checkout .shop-checkout-amounts dt.shop-checkout-grand {
    justify-content: flex-start;
  }
  .shop-checkout .shop-checkout-amounts dd.shop-checkout-grand {
    font-size: 1.875rem;
  }
}
/*
 * The page after an order ("Objednávka 3 – Potvrdenie" of the Figma design), drawn by the theme's copy of its
 * view (modules/shop/frontend/views/checkout/thank-you.php). It is laid out like the checkout and takes the
 * summary card of checkout.scss; this file holds what differs: the green tick, the larger title, what comes
 * next under thin rules and the dark card that leads to the gardens. On a phone the summary is left out, as in
 * the design; from the md break (900px) the columns are the 688 : 520 of the design, 72 apart.
 */
.shop-thank-you .shop-checkout-main h1 {
  margin: var(--prograss-space-20) 0 var(--space-3);
  font-size: 2.25rem;
  line-height: 1.08;
}

/* The way back home follows in the foot of the layout, so the main column keeps no space below it. */
.shop-thank-you .shop-checkout-main {
  padding-bottom: 0;
}

.shop-thank-you .shop-thank-you-tick {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--prograss-pill);
  background: var(--prograss-ok);
  font-size: 2rem;
  line-height: 1.15;
}

.shop-thank-you .shop-thank-you-title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 1.4375rem;
  font-weight: 400;
  line-height: 1.12;
  color: var(--color-heading);
}

.shop-thank-you .shop-thank-you-card {
  border-color: var(--prograss-border-strong);
  border-radius: var(--radius-lg);
}

.shop-thank-you .shop-thank-you-next-title {
  margin-bottom: var(--space-2);
}

.shop-thank-you .shop-thank-you-card .shop-thank-you-title {
  margin-bottom: var(--space-2);
}

.shop-thank-you .shop-thank-you-step {
  border-top: 1px solid var(--prograss-border-strong);
}

.shop-thank-you .shop-thank-you-step-number {
  flex: 0 0 2.375rem;
  font-size: 1.5rem;
  line-height: 1.15;
}

.shop-thank-you .shop-thank-you-step-title {
  font-size: 1.0625rem;
}

.shop-thank-you .shop-thank-you-step-text {
  font-size: 0.9375rem;
}

.shop-thank-you .shop-checkout-summary-inner {
  display: none;
}

.shop-thank-you .shop-thank-you-promo {
  padding: var(--space-4);
}

.shop-thank-you .shop-thank-you-promo h2 {
  font-family: var(--font-heading);
  font-size: 1.4375rem;
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: normal;
}

@media (min-width: 56.25rem) {
  .shop-thank-you .shop-checkout-layout {
    grid-template-columns: minmax(0, 86fr) minmax(0, 65fr);
    column-gap: var(--prograss-space-72);
  }
  .shop-thank-you .shop-checkout-main {
    padding-top: var(--prograss-space-56);
  }
  .shop-thank-you .shop-checkout-summary {
    margin-top: var(--prograss-space-56);
  }
  .shop-thank-you .shop-checkout-main h1 {
    margin: var(--space-4) 0;
    font-size: 3.5rem;
    line-height: 1.04;
  }
  .shop-thank-you .shop-thank-you-tick {
    width: 4rem;
    height: 4rem;
    font-size: 1.875rem;
  }
  .shop-thank-you .shop-thank-you-title {
    font-size: 1.75rem;
    line-height: 1.15;
  }
  .shop-thank-you .shop-thank-you-step-number {
    flex-basis: 2.75rem;
    font-size: 1.875rem;
  }
  .shop-thank-you .shop-thank-you-step-title {
    font-size: 1.1875rem;
  }
  .shop-thank-you .shop-thank-you-step-text {
    font-size: var(--font-size);
  }
  /* The summary stands still here: the dark card under it would slide beneath a sticky one. */
  .shop-thank-you .shop-checkout-summary-inner {
    position: static;
    display: flex;
  }
  .shop-thank-you .shop-checkout-summary-inner h2 {
    font-size: 1.5rem;
  }
  .shop-thank-you .shop-thank-you-promo {
    padding: var(--prograss-space-32);
  }
  .shop-thank-you .shop-thank-you-promo h2 {
    font-size: 1.625rem;
    line-height: 1.15;
  }
}
/*
 * The page of a product ("Detail produktu – Okrasná kôra" of the Figma design), drawn by the theme's copy of its
 * view (modules/shop/frontend/views/product/view.php). The view sets the spaces and the colours with the
 * utilities; this file holds what they cannot say and what the shop's own stylesheet draws otherwise, so every
 * rule starts at `.shop-product` to win over it. On a phone the large picture runs from edge to edge and the
 * summary follows the gallery; from the md break (900px) they stand side by side, in the 688 : 520 columns of
 * the design.
 */
/*
 * The gallery: the large picture with the magnifier of the lightbox in its corner, the small ones in a row of four
 * under it, the shown one outlined in dark.
 */
.shop-product .shop-gallery {
  gap: var(--space-2);
}

.shop-product .shop-gallery-main {
  width: auto;
  margin-inline: calc(-1 * var(--container-padding));
  aspect-ratio: 390/380;
  border-radius: 0;
  background: var(--prograss-sand);
}

.shop-product .shop-gallery-thumbs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-2);
}

.shop-product .shop-gallery-thumbs button {
  width: auto;
  height: auto;
  aspect-ratio: 160/110;
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--prograss-sand);
}

.shop-product .shop-gallery-thumbs button.active {
  outline: 3px solid var(--color-heading);
  outline-offset: -3px;
}

.shop-product .shop-gallery-thumbs button:hover:not(.active) {
  opacity: 0.85;
}

.shop-product .shop-gallery-thumbs img {
  border-radius: inherit;
}

.shop-product .shop-product-badges {
  margin: 0;
}

.shop-product .shop-product-title {
  line-height: 1.09;
}

.shop-product .shop-product-short-description {
  margin: 0;
  font-size: 1rem;
}

/*
 * The options as cards: the name of a value above its description, the others in the strong line colour on the
 * ground of the page, the chosen one white and outlined in dark.
 */
.shop-product .shop-option {
  margin: 0;
}

.shop-product .shop-option-name {
  margin-bottom: var(--prograss-space-10);
  font-size: var(--prograss-text-15);
  line-height: 1.3;
}

.shop-product .shop-option-values {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}

.shop-product .shop-option-value span {
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0.1875rem;
  height: 100%;
  padding: var(--prograss-space-10) var(--prograss-space-12);
  border-color: var(--prograss-border-strong);
  background: none;
  font-size: var(--prograss-text-15);
  line-height: 1.2;
}

.shop-product .shop-option-value span:hover {
  border-color: var(--color-heading);
  background: none;
}

.shop-product .shop-option-value input:checked + span {
  border-color: var(--color-heading);
  background: var(--prograss-white);
  box-shadow: inset 0 0 0 1px var(--color-heading);
  color: var(--color-heading);
}

.shop-product .shop-option-note {
  color: var(--color-text-muted);
  font-size: var(--prograss-text-13);
  font-weight: 400;
  line-height: 1.5;
}

/*
 * The price and its note on one line: the parts of the price stand in the line itself, so its unit ("/ vrece",
 * which the script of the shop writes into the price) follows the note ("s DPH / vrece").
 */
.shop-product .shop-product-price,
.shop-product .shop-price {
  display: contents;
  font-size: inherit;
}

.shop-product .shop-product-price-line {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.shop-product .shop-price > span:first-child {
  margin-right: var(--prograss-space-10);
  color: var(--color-heading);
  font-family: var(--font-heading);
  font-size: 2rem;
  line-height: 1.2;
}

.shop-product .shop-price-sale {
  font-weight: 400;
}

.shop-product .shop-price s,
.shop-product .shop-price-unit,
.shop-product .shop-price-note {
  order: 1;
  margin: 0;
  font-size: inherit;
}

.shop-product .shop-price s {
  margin-right: var(--prograss-space-10);
}

.shop-product .shop-price-unit {
  order: 2;
  margin-left: 0.25em;
}

/* The availability says something only when the product cannot be had right away. */
.shop-product .shop-product-availability {
  order: 3;
  width: 100%;
  margin: var(--space-1) 0 0;
  font-size: var(--prograss-text-15);
}

.shop-product .shop-availability-in-stock {
  display: none;
}

/* The stepper beside the button: a white box in the strong line colour, the quantity between − and +. */
.shop-product .shop-add-to-cart {
  gap: var(--prograss-space-10);
  margin: 0;
}

.shop-product .shop-stepper {
  flex: none;
  align-items: center;
  border-color: var(--prograss-border-strong);
  background: var(--prograss-white);
  color: var(--color-heading);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
}

.shop-product .shop-stepper .form-control {
  width: 3.625rem;
  height: 3.1875rem;
  padding: 0;
  background: none;
  color: inherit;
  font: inherit;
}

/* With a unit, the quantity and the unit meet in the middle ("1 ks"). */
.shop-product .shop-stepper:has(.shop-stepper-unit) .form-control {
  width: 1.8125rem;
  text-align: right;
}

.shop-product .shop-stepper-unit {
  width: 1.8125rem;
  padding-left: 0.25em;
}

.shop-product .shop-stepper-button {
  width: 2.375rem;
  height: 3.1875rem;
  background: none;
  color: inherit;
  font-size: 1.25rem;
  font-weight: 400;
}

.shop-product .shop-add-to-cart .btn {
  flex: 1 1 auto;
}

.shop-product .shop-product-quantity-note {
  margin: calc(-1 * var(--space-2)) 0 0;
}

.shop-product .shop-product-info {
  padding: var(--prograss-space-18);
  font-size: var(--text-sm);
  line-height: 1.5;
}

.shop-product .shop-product-sku {
  margin: 0;
}

@media (min-width: 56.25rem) {
  .shop-product .shop-product-layout {
    grid-template-columns: minmax(0, 688fr) minmax(0, 520fr);
    align-items: start;
  }
  .shop-product .shop-gallery {
    gap: var(--prograss-space-14);
  }
  .shop-product .shop-gallery-main {
    margin-inline: 0;
    aspect-ratio: 688/620;
    border-radius: var(--radius-lg);
  }
  .shop-product .shop-gallery-thumbs {
    gap: var(--prograss-space-14);
  }
  .shop-product .shop-product-title {
    line-height: 1.04;
  }
  .shop-product .shop-product-short-description {
    font-size: var(--font-size);
  }
  .shop-product .shop-option-values {
    gap: var(--prograss-space-10);
  }
  .shop-product .shop-option-value span {
    gap: var(--space-1);
    padding: var(--prograss-space-12) var(--space-3);
    font-size: 1rem;
  }
  .shop-product .shop-option-note {
    font-size: var(--text-sm);
  }
  .shop-product .shop-product-price-line {
    font-size: var(--font-size);
  }
  .shop-product .shop-price > span:first-child {
    font-size: 2.5rem;
  }
  .shop-product .shop-add-to-cart {
    gap: var(--prograss-space-12);
  }
  .shop-product .shop-stepper .form-control {
    width: 4.125rem;
    height: 4rem;
  }
  .shop-product .shop-stepper:has(.shop-stepper-unit) .form-control,
  .shop-product .shop-stepper-unit {
    width: 2.0625rem;
  }
  .shop-product .shop-stepper-button {
    width: 3.0625rem;
    height: 4rem;
  }
  .shop-product .shop-product-info {
    padding: var(--prograss-space-22);
    font-size: var(--prograss-text-15);
  }
}
/*
 * The top of the page of a realization ("Detail realizácie" of the Figma design), drawn by the view of the
 * ProGrass module (modules/prograssmodul/frontend/views/realization/view.php). The view sets the layout, the
 * spaces and the colours with the utilities; this file holds only what they cannot say: the line height and the
 * letter spacing of the title, the rules around the facts, their columns and the sizes of their labels and
 * values, the size of the main photo, and of the story beside its card: the columns, the pills of the works done
 * and the padding of the card. On a phone the facts stand two by two, the photo runs from edge to edge and the
 * card follows the story; from the md break (900px) the facts stand four in a row, the photo, rounded, fills the
 * content, and the story and the card stand side by side in the 7 : 5 columns of the design. The gallery is one
 * large photo with the others in a grid of two columns, under it on a phone and beside it from the md break.
 */
.realization-title {
  line-height: 1.08;
  letter-spacing: -0.02em;
}

.realization-back {
  font-size: 1rem;
}

.realization-facts {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--prograss-border-strong);
  border-bottom: 1px solid var(--prograss-border-strong);
}

.realization-fact-label {
  font-size: 0.75rem;
}

.realization-fact-value {
  font-size: 1.0625rem;
  line-height: 1.5;
}

.realization-photo {
  margin: 0 calc(-1 * var(--container-padding));
  aspect-ratio: 390/300;
}

.realization-story-title {
  font-size: var(--prograss-text-36);
  line-height: 1.12;
  letter-spacing: -0.01em;
}

.realization-work {
  border: 1px solid var(--prograss-border-strong);
  font-size: var(--prograss-text-15);
}

.realization-shop {
  font-size: 1rem;
  font-weight: 600;
}

.realization-cta {
  padding: var(--prograss-space-26) var(--prograss-space-22);
}

.realization-cta-title {
  font-size: 1.625rem;
  line-height: 1.15;
}

.realization-gallery-head {
  margin: 0 0 var(--prograss-space-20);
}

.realization-gallery {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.realization-gallery-feature,
.realization-gallery-rest li {
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--radius-lg);
}

.realization-gallery-rest {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

@media (min-width: 56.25rem) {
  .realization-gallery {
    flex-direction: row;
  }
  .realization-gallery-feature,
  .realization-gallery-rest {
    flex: 1 1 50%;
    min-width: 0;
  }
  .realization-story {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: start;
  }
  .realization-story-title {
    line-height: 1.16;
    letter-spacing: -0.02em;
  }
  .realization-cta {
    padding: var(--prograss-space-36);
  }
  .realization-cta-title {
    font-size: 1.875rem;
  }
  .realization-title {
    line-height: 1.04;
  }
  .realization-facts {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .realization-fact-label {
    font-size: 0.8125rem;
  }
  .realization-fact-value {
    font-size: 1.25rem;
    line-height: 1.6;
  }
  .realization-photo {
    margin: 0;
    aspect-ratio: 16/9;
    border-radius: var(--radius-lg);
  }
}
/*
 * The sections of a page come in as the visitor reaches them, as if they were loading: the script of the header
 * (blocks/header/reveal.js) hides a section below the window when the page opens (`reveal`) and shows it once it
 * scrolls into the window (`is-revealed`); it fades in from a little lower, once. Without the script nothing is
 * hidden.
 */
.reveal {
  opacity: 0;
  transform: translateY(2rem);
  transition: opacity 0.8s ease-out, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal.is-revealed {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
/*
 * Utility classes in the manner of Bootstrap, generated from the maps below the way its utility API does it:
 * every class sets one property to a value of the design tokens, so the appearance settings of the site keep
 * working through them. The names follow Bootstrap (`d-flex`, `mt-3`, `text-center`); a utility marked
 * `responsive` also comes per breakpoint (`d-md-none`, `text-lg-center`), mobile first. Loaded after the
 * blocks, so a utility wins over a rule of a block.
 */
.d-none {
  display: none;
}

.d-inline {
  display: inline;
}

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

.d-block {
  display: block;
}

.d-grid {
  display: grid;
}

.d-flex {
  display: flex;
}

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

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

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

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

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

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

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

.flex-grow-0 {
  flex-grow: 0;
}

.flex-grow-1 {
  flex-grow: 1;
}

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

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

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

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

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

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

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

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

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

.gap-0 {
  gap: 0;
}

.gap-1 {
  gap: var(--space-1);
}

.gap-2 {
  gap: var(--space-2);
}

.gap-3 {
  gap: var(--space-3);
}

.gap-4 {
  gap: var(--space-4);
}

.gap-5 {
  gap: var(--space-5);
}

.gap-6 {
  gap: var(--prograss-space-6);
}

.gap-8 {
  gap: var(--space-2);
}

.gap-10 {
  gap: var(--prograss-space-10);
}

.gap-11 {
  gap: var(--prograss-space-11);
}

.gap-12 {
  gap: var(--prograss-space-12);
}

.gap-14 {
  gap: var(--prograss-space-14);
}

.gap-16 {
  gap: var(--space-3);
}

.gap-18 {
  gap: var(--prograss-space-18);
}

.gap-20 {
  gap: var(--prograss-space-20);
}

.gap-22 {
  gap: var(--prograss-space-22);
}

.gap-24 {
  gap: var(--space-4);
}

.gap-26 {
  gap: var(--prograss-space-26);
}

.gap-28 {
  gap: var(--prograss-space-28);
}

.gap-32 {
  gap: var(--prograss-space-32);
}

.gap-36 {
  gap: var(--prograss-space-36);
}

.gap-40 {
  gap: var(--prograss-space-40);
}

.gap-44 {
  gap: var(--prograss-space-44);
}

.gap-48 {
  gap: var(--space-5);
}

.gap-56 {
  gap: var(--prograss-space-56);
}

.gap-64 {
  gap: var(--prograss-space-64);
}

.gap-72 {
  gap: var(--prograss-space-72);
}

.gap-80 {
  gap: var(--prograss-space-80);
}

.gap-88 {
  gap: var(--prograss-space-88);
}

.gap-96 {
  gap: var(--prograss-space-96);
}

.gap-100 {
  gap: var(--prograss-space-100);
}

.gap-110 {
  gap: var(--prograss-space-110);
}

.row-gap-0 {
  row-gap: 0;
}

.row-gap-1 {
  row-gap: var(--space-1);
}

.row-gap-2 {
  row-gap: var(--space-2);
}

.row-gap-3 {
  row-gap: var(--space-3);
}

.row-gap-4 {
  row-gap: var(--space-4);
}

.row-gap-5 {
  row-gap: var(--space-5);
}

.row-gap-6 {
  row-gap: var(--prograss-space-6);
}

.row-gap-8 {
  row-gap: var(--space-2);
}

.row-gap-10 {
  row-gap: var(--prograss-space-10);
}

.row-gap-11 {
  row-gap: var(--prograss-space-11);
}

.row-gap-12 {
  row-gap: var(--prograss-space-12);
}

.row-gap-14 {
  row-gap: var(--prograss-space-14);
}

.row-gap-16 {
  row-gap: var(--space-3);
}

.row-gap-18 {
  row-gap: var(--prograss-space-18);
}

.row-gap-20 {
  row-gap: var(--prograss-space-20);
}

.row-gap-22 {
  row-gap: var(--prograss-space-22);
}

.row-gap-24 {
  row-gap: var(--space-4);
}

.row-gap-26 {
  row-gap: var(--prograss-space-26);
}

.row-gap-28 {
  row-gap: var(--prograss-space-28);
}

.row-gap-32 {
  row-gap: var(--prograss-space-32);
}

.row-gap-36 {
  row-gap: var(--prograss-space-36);
}

.row-gap-40 {
  row-gap: var(--prograss-space-40);
}

.row-gap-44 {
  row-gap: var(--prograss-space-44);
}

.row-gap-48 {
  row-gap: var(--space-5);
}

.row-gap-56 {
  row-gap: var(--prograss-space-56);
}

.row-gap-64 {
  row-gap: var(--prograss-space-64);
}

.row-gap-72 {
  row-gap: var(--prograss-space-72);
}

.row-gap-80 {
  row-gap: var(--prograss-space-80);
}

.row-gap-88 {
  row-gap: var(--prograss-space-88);
}

.row-gap-96 {
  row-gap: var(--prograss-space-96);
}

.row-gap-100 {
  row-gap: var(--prograss-space-100);
}

.row-gap-110 {
  row-gap: var(--prograss-space-110);
}

.column-gap-0 {
  column-gap: 0;
}

.column-gap-1 {
  column-gap: var(--space-1);
}

.column-gap-2 {
  column-gap: var(--space-2);
}

.column-gap-3 {
  column-gap: var(--space-3);
}

.column-gap-4 {
  column-gap: var(--space-4);
}

.column-gap-5 {
  column-gap: var(--space-5);
}

.column-gap-6 {
  column-gap: var(--prograss-space-6);
}

.column-gap-8 {
  column-gap: var(--space-2);
}

.column-gap-10 {
  column-gap: var(--prograss-space-10);
}

.column-gap-11 {
  column-gap: var(--prograss-space-11);
}

.column-gap-12 {
  column-gap: var(--prograss-space-12);
}

.column-gap-14 {
  column-gap: var(--prograss-space-14);
}

.column-gap-16 {
  column-gap: var(--space-3);
}

.column-gap-18 {
  column-gap: var(--prograss-space-18);
}

.column-gap-20 {
  column-gap: var(--prograss-space-20);
}

.column-gap-22 {
  column-gap: var(--prograss-space-22);
}

.column-gap-24 {
  column-gap: var(--space-4);
}

.column-gap-26 {
  column-gap: var(--prograss-space-26);
}

.column-gap-28 {
  column-gap: var(--prograss-space-28);
}

.column-gap-32 {
  column-gap: var(--prograss-space-32);
}

.column-gap-36 {
  column-gap: var(--prograss-space-36);
}

.column-gap-40 {
  column-gap: var(--prograss-space-40);
}

.column-gap-44 {
  column-gap: var(--prograss-space-44);
}

.column-gap-48 {
  column-gap: var(--space-5);
}

.column-gap-56 {
  column-gap: var(--prograss-space-56);
}

.column-gap-64 {
  column-gap: var(--prograss-space-64);
}

.column-gap-72 {
  column-gap: var(--prograss-space-72);
}

.column-gap-80 {
  column-gap: var(--prograss-space-80);
}

.column-gap-88 {
  column-gap: var(--prograss-space-88);
}

.column-gap-96 {
  column-gap: var(--prograss-space-96);
}

.column-gap-100 {
  column-gap: var(--prograss-space-100);
}

.column-gap-110 {
  column-gap: var(--prograss-space-110);
}

.m-0 {
  margin: 0;
}

.m-1 {
  margin: var(--space-1);
}

.m-2 {
  margin: var(--space-2);
}

.m-3 {
  margin: var(--space-3);
}

.m-4 {
  margin: var(--space-4);
}

.m-5 {
  margin: var(--space-5);
}

.m-6 {
  margin: var(--prograss-space-6);
}

.m-8 {
  margin: var(--space-2);
}

.m-10 {
  margin: var(--prograss-space-10);
}

.m-11 {
  margin: var(--prograss-space-11);
}

.m-12 {
  margin: var(--prograss-space-12);
}

.m-14 {
  margin: var(--prograss-space-14);
}

.m-16 {
  margin: var(--space-3);
}

.m-18 {
  margin: var(--prograss-space-18);
}

.m-20 {
  margin: var(--prograss-space-20);
}

.m-22 {
  margin: var(--prograss-space-22);
}

.m-24 {
  margin: var(--space-4);
}

.m-26 {
  margin: var(--prograss-space-26);
}

.m-28 {
  margin: var(--prograss-space-28);
}

.m-32 {
  margin: var(--prograss-space-32);
}

.m-36 {
  margin: var(--prograss-space-36);
}

.m-40 {
  margin: var(--prograss-space-40);
}

.m-44 {
  margin: var(--prograss-space-44);
}

.m-48 {
  margin: var(--space-5);
}

.m-56 {
  margin: var(--prograss-space-56);
}

.m-64 {
  margin: var(--prograss-space-64);
}

.m-72 {
  margin: var(--prograss-space-72);
}

.m-80 {
  margin: var(--prograss-space-80);
}

.m-88 {
  margin: var(--prograss-space-88);
}

.m-96 {
  margin: var(--prograss-space-96);
}

.m-100 {
  margin: var(--prograss-space-100);
}

.m-110 {
  margin: var(--prograss-space-110);
}

.m-auto {
  margin: auto;
}

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

.mx-1 {
  margin-left: var(--space-1);
  margin-right: var(--space-1);
}

.mx-2 {
  margin-left: var(--space-2);
  margin-right: var(--space-2);
}

.mx-3 {
  margin-left: var(--space-3);
  margin-right: var(--space-3);
}

.mx-4 {
  margin-left: var(--space-4);
  margin-right: var(--space-4);
}

.mx-5 {
  margin-left: var(--space-5);
  margin-right: var(--space-5);
}

.mx-6 {
  margin-left: var(--prograss-space-6);
  margin-right: var(--prograss-space-6);
}

.mx-8 {
  margin-left: var(--space-2);
  margin-right: var(--space-2);
}

.mx-10 {
  margin-left: var(--prograss-space-10);
  margin-right: var(--prograss-space-10);
}

.mx-11 {
  margin-left: var(--prograss-space-11);
  margin-right: var(--prograss-space-11);
}

.mx-12 {
  margin-left: var(--prograss-space-12);
  margin-right: var(--prograss-space-12);
}

.mx-14 {
  margin-left: var(--prograss-space-14);
  margin-right: var(--prograss-space-14);
}

.mx-16 {
  margin-left: var(--space-3);
  margin-right: var(--space-3);
}

.mx-18 {
  margin-left: var(--prograss-space-18);
  margin-right: var(--prograss-space-18);
}

.mx-20 {
  margin-left: var(--prograss-space-20);
  margin-right: var(--prograss-space-20);
}

.mx-22 {
  margin-left: var(--prograss-space-22);
  margin-right: var(--prograss-space-22);
}

.mx-24 {
  margin-left: var(--space-4);
  margin-right: var(--space-4);
}

.mx-26 {
  margin-left: var(--prograss-space-26);
  margin-right: var(--prograss-space-26);
}

.mx-28 {
  margin-left: var(--prograss-space-28);
  margin-right: var(--prograss-space-28);
}

.mx-32 {
  margin-left: var(--prograss-space-32);
  margin-right: var(--prograss-space-32);
}

.mx-36 {
  margin-left: var(--prograss-space-36);
  margin-right: var(--prograss-space-36);
}

.mx-40 {
  margin-left: var(--prograss-space-40);
  margin-right: var(--prograss-space-40);
}

.mx-44 {
  margin-left: var(--prograss-space-44);
  margin-right: var(--prograss-space-44);
}

.mx-48 {
  margin-left: var(--space-5);
  margin-right: var(--space-5);
}

.mx-56 {
  margin-left: var(--prograss-space-56);
  margin-right: var(--prograss-space-56);
}

.mx-64 {
  margin-left: var(--prograss-space-64);
  margin-right: var(--prograss-space-64);
}

.mx-72 {
  margin-left: var(--prograss-space-72);
  margin-right: var(--prograss-space-72);
}

.mx-80 {
  margin-left: var(--prograss-space-80);
  margin-right: var(--prograss-space-80);
}

.mx-88 {
  margin-left: var(--prograss-space-88);
  margin-right: var(--prograss-space-88);
}

.mx-96 {
  margin-left: var(--prograss-space-96);
  margin-right: var(--prograss-space-96);
}

.mx-100 {
  margin-left: var(--prograss-space-100);
  margin-right: var(--prograss-space-100);
}

.mx-110 {
  margin-left: var(--prograss-space-110);
  margin-right: var(--prograss-space-110);
}

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

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

.my-1 {
  margin-top: var(--space-1);
  margin-bottom: var(--space-1);
}

.my-2 {
  margin-top: var(--space-2);
  margin-bottom: var(--space-2);
}

.my-3 {
  margin-top: var(--space-3);
  margin-bottom: var(--space-3);
}

.my-4 {
  margin-top: var(--space-4);
  margin-bottom: var(--space-4);
}

.my-5 {
  margin-top: var(--space-5);
  margin-bottom: var(--space-5);
}

.my-6 {
  margin-top: var(--prograss-space-6);
  margin-bottom: var(--prograss-space-6);
}

.my-8 {
  margin-top: var(--space-2);
  margin-bottom: var(--space-2);
}

.my-10 {
  margin-top: var(--prograss-space-10);
  margin-bottom: var(--prograss-space-10);
}

.my-11 {
  margin-top: var(--prograss-space-11);
  margin-bottom: var(--prograss-space-11);
}

.my-12 {
  margin-top: var(--prograss-space-12);
  margin-bottom: var(--prograss-space-12);
}

.my-14 {
  margin-top: var(--prograss-space-14);
  margin-bottom: var(--prograss-space-14);
}

.my-16 {
  margin-top: var(--space-3);
  margin-bottom: var(--space-3);
}

.my-18 {
  margin-top: var(--prograss-space-18);
  margin-bottom: var(--prograss-space-18);
}

.my-20 {
  margin-top: var(--prograss-space-20);
  margin-bottom: var(--prograss-space-20);
}

.my-22 {
  margin-top: var(--prograss-space-22);
  margin-bottom: var(--prograss-space-22);
}

.my-24 {
  margin-top: var(--space-4);
  margin-bottom: var(--space-4);
}

.my-26 {
  margin-top: var(--prograss-space-26);
  margin-bottom: var(--prograss-space-26);
}

.my-28 {
  margin-top: var(--prograss-space-28);
  margin-bottom: var(--prograss-space-28);
}

.my-32 {
  margin-top: var(--prograss-space-32);
  margin-bottom: var(--prograss-space-32);
}

.my-36 {
  margin-top: var(--prograss-space-36);
  margin-bottom: var(--prograss-space-36);
}

.my-40 {
  margin-top: var(--prograss-space-40);
  margin-bottom: var(--prograss-space-40);
}

.my-44 {
  margin-top: var(--prograss-space-44);
  margin-bottom: var(--prograss-space-44);
}

.my-48 {
  margin-top: var(--space-5);
  margin-bottom: var(--space-5);
}

.my-56 {
  margin-top: var(--prograss-space-56);
  margin-bottom: var(--prograss-space-56);
}

.my-64 {
  margin-top: var(--prograss-space-64);
  margin-bottom: var(--prograss-space-64);
}

.my-72 {
  margin-top: var(--prograss-space-72);
  margin-bottom: var(--prograss-space-72);
}

.my-80 {
  margin-top: var(--prograss-space-80);
  margin-bottom: var(--prograss-space-80);
}

.my-88 {
  margin-top: var(--prograss-space-88);
  margin-bottom: var(--prograss-space-88);
}

.my-96 {
  margin-top: var(--prograss-space-96);
  margin-bottom: var(--prograss-space-96);
}

.my-100 {
  margin-top: var(--prograss-space-100);
  margin-bottom: var(--prograss-space-100);
}

.my-110 {
  margin-top: var(--prograss-space-110);
  margin-bottom: var(--prograss-space-110);
}

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

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

.mt-1 {
  margin-top: var(--space-1);
}

.mt-2 {
  margin-top: var(--space-2);
}

.mt-3 {
  margin-top: var(--space-3);
}

.mt-4 {
  margin-top: var(--space-4);
}

.mt-5 {
  margin-top: var(--space-5);
}

.mt-6 {
  margin-top: var(--prograss-space-6);
}

.mt-8 {
  margin-top: var(--space-2);
}

.mt-10 {
  margin-top: var(--prograss-space-10);
}

.mt-11 {
  margin-top: var(--prograss-space-11);
}

.mt-12 {
  margin-top: var(--prograss-space-12);
}

.mt-14 {
  margin-top: var(--prograss-space-14);
}

.mt-16 {
  margin-top: var(--space-3);
}

.mt-18 {
  margin-top: var(--prograss-space-18);
}

.mt-20 {
  margin-top: var(--prograss-space-20);
}

.mt-22 {
  margin-top: var(--prograss-space-22);
}

.mt-24 {
  margin-top: var(--space-4);
}

.mt-26 {
  margin-top: var(--prograss-space-26);
}

.mt-28 {
  margin-top: var(--prograss-space-28);
}

.mt-32 {
  margin-top: var(--prograss-space-32);
}

.mt-36 {
  margin-top: var(--prograss-space-36);
}

.mt-40 {
  margin-top: var(--prograss-space-40);
}

.mt-44 {
  margin-top: var(--prograss-space-44);
}

.mt-48 {
  margin-top: var(--space-5);
}

.mt-56 {
  margin-top: var(--prograss-space-56);
}

.mt-64 {
  margin-top: var(--prograss-space-64);
}

.mt-72 {
  margin-top: var(--prograss-space-72);
}

.mt-80 {
  margin-top: var(--prograss-space-80);
}

.mt-88 {
  margin-top: var(--prograss-space-88);
}

.mt-96 {
  margin-top: var(--prograss-space-96);
}

.mt-100 {
  margin-top: var(--prograss-space-100);
}

.mt-110 {
  margin-top: var(--prograss-space-110);
}

.mt-auto {
  margin-top: auto;
}

.me-0 {
  margin-right: 0;
}

.me-1 {
  margin-right: var(--space-1);
}

.me-2 {
  margin-right: var(--space-2);
}

.me-3 {
  margin-right: var(--space-3);
}

.me-4 {
  margin-right: var(--space-4);
}

.me-5 {
  margin-right: var(--space-5);
}

.me-6 {
  margin-right: var(--prograss-space-6);
}

.me-8 {
  margin-right: var(--space-2);
}

.me-10 {
  margin-right: var(--prograss-space-10);
}

.me-11 {
  margin-right: var(--prograss-space-11);
}

.me-12 {
  margin-right: var(--prograss-space-12);
}

.me-14 {
  margin-right: var(--prograss-space-14);
}

.me-16 {
  margin-right: var(--space-3);
}

.me-18 {
  margin-right: var(--prograss-space-18);
}

.me-20 {
  margin-right: var(--prograss-space-20);
}

.me-22 {
  margin-right: var(--prograss-space-22);
}

.me-24 {
  margin-right: var(--space-4);
}

.me-26 {
  margin-right: var(--prograss-space-26);
}

.me-28 {
  margin-right: var(--prograss-space-28);
}

.me-32 {
  margin-right: var(--prograss-space-32);
}

.me-36 {
  margin-right: var(--prograss-space-36);
}

.me-40 {
  margin-right: var(--prograss-space-40);
}

.me-44 {
  margin-right: var(--prograss-space-44);
}

.me-48 {
  margin-right: var(--space-5);
}

.me-56 {
  margin-right: var(--prograss-space-56);
}

.me-64 {
  margin-right: var(--prograss-space-64);
}

.me-72 {
  margin-right: var(--prograss-space-72);
}

.me-80 {
  margin-right: var(--prograss-space-80);
}

.me-88 {
  margin-right: var(--prograss-space-88);
}

.me-96 {
  margin-right: var(--prograss-space-96);
}

.me-100 {
  margin-right: var(--prograss-space-100);
}

.me-110 {
  margin-right: var(--prograss-space-110);
}

.me-auto {
  margin-right: auto;
}

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

.mb-1 {
  margin-bottom: var(--space-1);
}

.mb-2 {
  margin-bottom: var(--space-2);
}

.mb-3 {
  margin-bottom: var(--space-3);
}

.mb-4 {
  margin-bottom: var(--space-4);
}

.mb-5 {
  margin-bottom: var(--space-5);
}

.mb-6 {
  margin-bottom: var(--prograss-space-6);
}

.mb-8 {
  margin-bottom: var(--space-2);
}

.mb-10 {
  margin-bottom: var(--prograss-space-10);
}

.mb-11 {
  margin-bottom: var(--prograss-space-11);
}

.mb-12 {
  margin-bottom: var(--prograss-space-12);
}

.mb-14 {
  margin-bottom: var(--prograss-space-14);
}

.mb-16 {
  margin-bottom: var(--space-3);
}

.mb-18 {
  margin-bottom: var(--prograss-space-18);
}

.mb-20 {
  margin-bottom: var(--prograss-space-20);
}

.mb-22 {
  margin-bottom: var(--prograss-space-22);
}

.mb-24 {
  margin-bottom: var(--space-4);
}

.mb-26 {
  margin-bottom: var(--prograss-space-26);
}

.mb-28 {
  margin-bottom: var(--prograss-space-28);
}

.mb-32 {
  margin-bottom: var(--prograss-space-32);
}

.mb-36 {
  margin-bottom: var(--prograss-space-36);
}

.mb-40 {
  margin-bottom: var(--prograss-space-40);
}

.mb-44 {
  margin-bottom: var(--prograss-space-44);
}

.mb-48 {
  margin-bottom: var(--space-5);
}

.mb-56 {
  margin-bottom: var(--prograss-space-56);
}

.mb-64 {
  margin-bottom: var(--prograss-space-64);
}

.mb-72 {
  margin-bottom: var(--prograss-space-72);
}

.mb-80 {
  margin-bottom: var(--prograss-space-80);
}

.mb-88 {
  margin-bottom: var(--prograss-space-88);
}

.mb-96 {
  margin-bottom: var(--prograss-space-96);
}

.mb-100 {
  margin-bottom: var(--prograss-space-100);
}

.mb-110 {
  margin-bottom: var(--prograss-space-110);
}

.mb-auto {
  margin-bottom: auto;
}

.ms-0 {
  margin-left: 0;
}

.ms-1 {
  margin-left: var(--space-1);
}

.ms-2 {
  margin-left: var(--space-2);
}

.ms-3 {
  margin-left: var(--space-3);
}

.ms-4 {
  margin-left: var(--space-4);
}

.ms-5 {
  margin-left: var(--space-5);
}

.ms-6 {
  margin-left: var(--prograss-space-6);
}

.ms-8 {
  margin-left: var(--space-2);
}

.ms-10 {
  margin-left: var(--prograss-space-10);
}

.ms-11 {
  margin-left: var(--prograss-space-11);
}

.ms-12 {
  margin-left: var(--prograss-space-12);
}

.ms-14 {
  margin-left: var(--prograss-space-14);
}

.ms-16 {
  margin-left: var(--space-3);
}

.ms-18 {
  margin-left: var(--prograss-space-18);
}

.ms-20 {
  margin-left: var(--prograss-space-20);
}

.ms-22 {
  margin-left: var(--prograss-space-22);
}

.ms-24 {
  margin-left: var(--space-4);
}

.ms-26 {
  margin-left: var(--prograss-space-26);
}

.ms-28 {
  margin-left: var(--prograss-space-28);
}

.ms-32 {
  margin-left: var(--prograss-space-32);
}

.ms-36 {
  margin-left: var(--prograss-space-36);
}

.ms-40 {
  margin-left: var(--prograss-space-40);
}

.ms-44 {
  margin-left: var(--prograss-space-44);
}

.ms-48 {
  margin-left: var(--space-5);
}

.ms-56 {
  margin-left: var(--prograss-space-56);
}

.ms-64 {
  margin-left: var(--prograss-space-64);
}

.ms-72 {
  margin-left: var(--prograss-space-72);
}

.ms-80 {
  margin-left: var(--prograss-space-80);
}

.ms-88 {
  margin-left: var(--prograss-space-88);
}

.ms-96 {
  margin-left: var(--prograss-space-96);
}

.ms-100 {
  margin-left: var(--prograss-space-100);
}

.ms-110 {
  margin-left: var(--prograss-space-110);
}

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

.p-0 {
  padding: 0;
}

.p-1 {
  padding: var(--space-1);
}

.p-2 {
  padding: var(--space-2);
}

.p-3 {
  padding: var(--space-3);
}

.p-4 {
  padding: var(--space-4);
}

.p-5 {
  padding: var(--space-5);
}

.p-6 {
  padding: var(--prograss-space-6);
}

.p-8 {
  padding: var(--space-2);
}

.p-10 {
  padding: var(--prograss-space-10);
}

.p-11 {
  padding: var(--prograss-space-11);
}

.p-12 {
  padding: var(--prograss-space-12);
}

.p-14 {
  padding: var(--prograss-space-14);
}

.p-16 {
  padding: var(--space-3);
}

.p-18 {
  padding: var(--prograss-space-18);
}

.p-20 {
  padding: var(--prograss-space-20);
}

.p-22 {
  padding: var(--prograss-space-22);
}

.p-24 {
  padding: var(--space-4);
}

.p-26 {
  padding: var(--prograss-space-26);
}

.p-28 {
  padding: var(--prograss-space-28);
}

.p-32 {
  padding: var(--prograss-space-32);
}

.p-36 {
  padding: var(--prograss-space-36);
}

.p-40 {
  padding: var(--prograss-space-40);
}

.p-44 {
  padding: var(--prograss-space-44);
}

.p-48 {
  padding: var(--space-5);
}

.p-56 {
  padding: var(--prograss-space-56);
}

.p-64 {
  padding: var(--prograss-space-64);
}

.p-72 {
  padding: var(--prograss-space-72);
}

.p-80 {
  padding: var(--prograss-space-80);
}

.p-88 {
  padding: var(--prograss-space-88);
}

.p-96 {
  padding: var(--prograss-space-96);
}

.p-100 {
  padding: var(--prograss-space-100);
}

.p-110 {
  padding: var(--prograss-space-110);
}

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

.px-1 {
  padding-left: var(--space-1);
  padding-right: var(--space-1);
}

.px-2 {
  padding-left: var(--space-2);
  padding-right: var(--space-2);
}

.px-3 {
  padding-left: var(--space-3);
  padding-right: var(--space-3);
}

.px-4 {
  padding-left: var(--space-4);
  padding-right: var(--space-4);
}

.px-5 {
  padding-left: var(--space-5);
  padding-right: var(--space-5);
}

.px-6 {
  padding-left: var(--prograss-space-6);
  padding-right: var(--prograss-space-6);
}

.px-8 {
  padding-left: var(--space-2);
  padding-right: var(--space-2);
}

.px-10 {
  padding-left: var(--prograss-space-10);
  padding-right: var(--prograss-space-10);
}

.px-11 {
  padding-left: var(--prograss-space-11);
  padding-right: var(--prograss-space-11);
}

.px-12 {
  padding-left: var(--prograss-space-12);
  padding-right: var(--prograss-space-12);
}

.px-14 {
  padding-left: var(--prograss-space-14);
  padding-right: var(--prograss-space-14);
}

.px-16 {
  padding-left: var(--space-3);
  padding-right: var(--space-3);
}

.px-18 {
  padding-left: var(--prograss-space-18);
  padding-right: var(--prograss-space-18);
}

.px-20 {
  padding-left: var(--prograss-space-20);
  padding-right: var(--prograss-space-20);
}

.px-22 {
  padding-left: var(--prograss-space-22);
  padding-right: var(--prograss-space-22);
}

.px-24 {
  padding-left: var(--space-4);
  padding-right: var(--space-4);
}

.px-26 {
  padding-left: var(--prograss-space-26);
  padding-right: var(--prograss-space-26);
}

.px-28 {
  padding-left: var(--prograss-space-28);
  padding-right: var(--prograss-space-28);
}

.px-32 {
  padding-left: var(--prograss-space-32);
  padding-right: var(--prograss-space-32);
}

.px-36 {
  padding-left: var(--prograss-space-36);
  padding-right: var(--prograss-space-36);
}

.px-40 {
  padding-left: var(--prograss-space-40);
  padding-right: var(--prograss-space-40);
}

.px-44 {
  padding-left: var(--prograss-space-44);
  padding-right: var(--prograss-space-44);
}

.px-48 {
  padding-left: var(--space-5);
  padding-right: var(--space-5);
}

.px-56 {
  padding-left: var(--prograss-space-56);
  padding-right: var(--prograss-space-56);
}

.px-64 {
  padding-left: var(--prograss-space-64);
  padding-right: var(--prograss-space-64);
}

.px-72 {
  padding-left: var(--prograss-space-72);
  padding-right: var(--prograss-space-72);
}

.px-80 {
  padding-left: var(--prograss-space-80);
  padding-right: var(--prograss-space-80);
}

.px-88 {
  padding-left: var(--prograss-space-88);
  padding-right: var(--prograss-space-88);
}

.px-96 {
  padding-left: var(--prograss-space-96);
  padding-right: var(--prograss-space-96);
}

.px-100 {
  padding-left: var(--prograss-space-100);
  padding-right: var(--prograss-space-100);
}

.px-110 {
  padding-left: var(--prograss-space-110);
  padding-right: var(--prograss-space-110);
}

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

.py-1 {
  padding-top: var(--space-1);
  padding-bottom: var(--space-1);
}

.py-2 {
  padding-top: var(--space-2);
  padding-bottom: var(--space-2);
}

.py-3 {
  padding-top: var(--space-3);
  padding-bottom: var(--space-3);
}

.py-4 {
  padding-top: var(--space-4);
  padding-bottom: var(--space-4);
}

.py-5 {
  padding-top: var(--space-5);
  padding-bottom: var(--space-5);
}

.py-6 {
  padding-top: var(--prograss-space-6);
  padding-bottom: var(--prograss-space-6);
}

.py-8 {
  padding-top: var(--space-2);
  padding-bottom: var(--space-2);
}

.py-10 {
  padding-top: var(--prograss-space-10);
  padding-bottom: var(--prograss-space-10);
}

.py-11 {
  padding-top: var(--prograss-space-11);
  padding-bottom: var(--prograss-space-11);
}

.py-12 {
  padding-top: var(--prograss-space-12);
  padding-bottom: var(--prograss-space-12);
}

.py-14 {
  padding-top: var(--prograss-space-14);
  padding-bottom: var(--prograss-space-14);
}

.py-16 {
  padding-top: var(--space-3);
  padding-bottom: var(--space-3);
}

.py-18 {
  padding-top: var(--prograss-space-18);
  padding-bottom: var(--prograss-space-18);
}

.py-20 {
  padding-top: var(--prograss-space-20);
  padding-bottom: var(--prograss-space-20);
}

.py-22 {
  padding-top: var(--prograss-space-22);
  padding-bottom: var(--prograss-space-22);
}

.py-24 {
  padding-top: var(--space-4);
  padding-bottom: var(--space-4);
}

.py-26 {
  padding-top: var(--prograss-space-26);
  padding-bottom: var(--prograss-space-26);
}

.py-28 {
  padding-top: var(--prograss-space-28);
  padding-bottom: var(--prograss-space-28);
}

.py-32 {
  padding-top: var(--prograss-space-32);
  padding-bottom: var(--prograss-space-32);
}

.py-36 {
  padding-top: var(--prograss-space-36);
  padding-bottom: var(--prograss-space-36);
}

.py-40 {
  padding-top: var(--prograss-space-40);
  padding-bottom: var(--prograss-space-40);
}

.py-44 {
  padding-top: var(--prograss-space-44);
  padding-bottom: var(--prograss-space-44);
}

.py-48 {
  padding-top: var(--space-5);
  padding-bottom: var(--space-5);
}

.py-56 {
  padding-top: var(--prograss-space-56);
  padding-bottom: var(--prograss-space-56);
}

.py-64 {
  padding-top: var(--prograss-space-64);
  padding-bottom: var(--prograss-space-64);
}

.py-72 {
  padding-top: var(--prograss-space-72);
  padding-bottom: var(--prograss-space-72);
}

.py-80 {
  padding-top: var(--prograss-space-80);
  padding-bottom: var(--prograss-space-80);
}

.py-88 {
  padding-top: var(--prograss-space-88);
  padding-bottom: var(--prograss-space-88);
}

.py-96 {
  padding-top: var(--prograss-space-96);
  padding-bottom: var(--prograss-space-96);
}

.py-100 {
  padding-top: var(--prograss-space-100);
  padding-bottom: var(--prograss-space-100);
}

.py-110 {
  padding-top: var(--prograss-space-110);
  padding-bottom: var(--prograss-space-110);
}

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

.pt-1 {
  padding-top: var(--space-1);
}

.pt-2 {
  padding-top: var(--space-2);
}

.pt-3 {
  padding-top: var(--space-3);
}

.pt-4 {
  padding-top: var(--space-4);
}

.pt-5 {
  padding-top: var(--space-5);
}

.pt-6 {
  padding-top: var(--prograss-space-6);
}

.pt-8 {
  padding-top: var(--space-2);
}

.pt-10 {
  padding-top: var(--prograss-space-10);
}

.pt-11 {
  padding-top: var(--prograss-space-11);
}

.pt-12 {
  padding-top: var(--prograss-space-12);
}

.pt-14 {
  padding-top: var(--prograss-space-14);
}

.pt-16 {
  padding-top: var(--space-3);
}

.pt-18 {
  padding-top: var(--prograss-space-18);
}

.pt-20 {
  padding-top: var(--prograss-space-20);
}

.pt-22 {
  padding-top: var(--prograss-space-22);
}

.pt-24 {
  padding-top: var(--space-4);
}

.pt-26 {
  padding-top: var(--prograss-space-26);
}

.pt-28 {
  padding-top: var(--prograss-space-28);
}

.pt-32 {
  padding-top: var(--prograss-space-32);
}

.pt-36 {
  padding-top: var(--prograss-space-36);
}

.pt-40 {
  padding-top: var(--prograss-space-40);
}

.pt-44 {
  padding-top: var(--prograss-space-44);
}

.pt-48 {
  padding-top: var(--space-5);
}

.pt-56 {
  padding-top: var(--prograss-space-56);
}

.pt-64 {
  padding-top: var(--prograss-space-64);
}

.pt-72 {
  padding-top: var(--prograss-space-72);
}

.pt-80 {
  padding-top: var(--prograss-space-80);
}

.pt-88 {
  padding-top: var(--prograss-space-88);
}

.pt-96 {
  padding-top: var(--prograss-space-96);
}

.pt-100 {
  padding-top: var(--prograss-space-100);
}

.pt-110 {
  padding-top: var(--prograss-space-110);
}

.pe-0 {
  padding-right: 0;
}

.pe-1 {
  padding-right: var(--space-1);
}

.pe-2 {
  padding-right: var(--space-2);
}

.pe-3 {
  padding-right: var(--space-3);
}

.pe-4 {
  padding-right: var(--space-4);
}

.pe-5 {
  padding-right: var(--space-5);
}

.pe-6 {
  padding-right: var(--prograss-space-6);
}

.pe-8 {
  padding-right: var(--space-2);
}

.pe-10 {
  padding-right: var(--prograss-space-10);
}

.pe-11 {
  padding-right: var(--prograss-space-11);
}

.pe-12 {
  padding-right: var(--prograss-space-12);
}

.pe-14 {
  padding-right: var(--prograss-space-14);
}

.pe-16 {
  padding-right: var(--space-3);
}

.pe-18 {
  padding-right: var(--prograss-space-18);
}

.pe-20 {
  padding-right: var(--prograss-space-20);
}

.pe-22 {
  padding-right: var(--prograss-space-22);
}

.pe-24 {
  padding-right: var(--space-4);
}

.pe-26 {
  padding-right: var(--prograss-space-26);
}

.pe-28 {
  padding-right: var(--prograss-space-28);
}

.pe-32 {
  padding-right: var(--prograss-space-32);
}

.pe-36 {
  padding-right: var(--prograss-space-36);
}

.pe-40 {
  padding-right: var(--prograss-space-40);
}

.pe-44 {
  padding-right: var(--prograss-space-44);
}

.pe-48 {
  padding-right: var(--space-5);
}

.pe-56 {
  padding-right: var(--prograss-space-56);
}

.pe-64 {
  padding-right: var(--prograss-space-64);
}

.pe-72 {
  padding-right: var(--prograss-space-72);
}

.pe-80 {
  padding-right: var(--prograss-space-80);
}

.pe-88 {
  padding-right: var(--prograss-space-88);
}

.pe-96 {
  padding-right: var(--prograss-space-96);
}

.pe-100 {
  padding-right: var(--prograss-space-100);
}

.pe-110 {
  padding-right: var(--prograss-space-110);
}

.pb-0 {
  padding-bottom: 0;
}

.pb-1 {
  padding-bottom: var(--space-1);
}

.pb-2 {
  padding-bottom: var(--space-2);
}

.pb-3 {
  padding-bottom: var(--space-3);
}

.pb-4 {
  padding-bottom: var(--space-4);
}

.pb-5 {
  padding-bottom: var(--space-5);
}

.pb-6 {
  padding-bottom: var(--prograss-space-6);
}

.pb-8 {
  padding-bottom: var(--space-2);
}

.pb-10 {
  padding-bottom: var(--prograss-space-10);
}

.pb-11 {
  padding-bottom: var(--prograss-space-11);
}

.pb-12 {
  padding-bottom: var(--prograss-space-12);
}

.pb-14 {
  padding-bottom: var(--prograss-space-14);
}

.pb-16 {
  padding-bottom: var(--space-3);
}

.pb-18 {
  padding-bottom: var(--prograss-space-18);
}

.pb-20 {
  padding-bottom: var(--prograss-space-20);
}

.pb-22 {
  padding-bottom: var(--prograss-space-22);
}

.pb-24 {
  padding-bottom: var(--space-4);
}

.pb-26 {
  padding-bottom: var(--prograss-space-26);
}

.pb-28 {
  padding-bottom: var(--prograss-space-28);
}

.pb-32 {
  padding-bottom: var(--prograss-space-32);
}

.pb-36 {
  padding-bottom: var(--prograss-space-36);
}

.pb-40 {
  padding-bottom: var(--prograss-space-40);
}

.pb-44 {
  padding-bottom: var(--prograss-space-44);
}

.pb-48 {
  padding-bottom: var(--space-5);
}

.pb-56 {
  padding-bottom: var(--prograss-space-56);
}

.pb-64 {
  padding-bottom: var(--prograss-space-64);
}

.pb-72 {
  padding-bottom: var(--prograss-space-72);
}

.pb-80 {
  padding-bottom: var(--prograss-space-80);
}

.pb-88 {
  padding-bottom: var(--prograss-space-88);
}

.pb-96 {
  padding-bottom: var(--prograss-space-96);
}

.pb-100 {
  padding-bottom: var(--prograss-space-100);
}

.pb-110 {
  padding-bottom: var(--prograss-space-110);
}

.ps-0 {
  padding-left: 0;
}

.ps-1 {
  padding-left: var(--space-1);
}

.ps-2 {
  padding-left: var(--space-2);
}

.ps-3 {
  padding-left: var(--space-3);
}

.ps-4 {
  padding-left: var(--space-4);
}

.ps-5 {
  padding-left: var(--space-5);
}

.ps-6 {
  padding-left: var(--prograss-space-6);
}

.ps-8 {
  padding-left: var(--space-2);
}

.ps-10 {
  padding-left: var(--prograss-space-10);
}

.ps-11 {
  padding-left: var(--prograss-space-11);
}

.ps-12 {
  padding-left: var(--prograss-space-12);
}

.ps-14 {
  padding-left: var(--prograss-space-14);
}

.ps-16 {
  padding-left: var(--space-3);
}

.ps-18 {
  padding-left: var(--prograss-space-18);
}

.ps-20 {
  padding-left: var(--prograss-space-20);
}

.ps-22 {
  padding-left: var(--prograss-space-22);
}

.ps-24 {
  padding-left: var(--space-4);
}

.ps-26 {
  padding-left: var(--prograss-space-26);
}

.ps-28 {
  padding-left: var(--prograss-space-28);
}

.ps-32 {
  padding-left: var(--prograss-space-32);
}

.ps-36 {
  padding-left: var(--prograss-space-36);
}

.ps-40 {
  padding-left: var(--prograss-space-40);
}

.ps-44 {
  padding-left: var(--prograss-space-44);
}

.ps-48 {
  padding-left: var(--space-5);
}

.ps-56 {
  padding-left: var(--prograss-space-56);
}

.ps-64 {
  padding-left: var(--prograss-space-64);
}

.ps-72 {
  padding-left: var(--prograss-space-72);
}

.ps-80 {
  padding-left: var(--prograss-space-80);
}

.ps-88 {
  padding-left: var(--prograss-space-88);
}

.ps-96 {
  padding-left: var(--prograss-space-96);
}

.ps-100 {
  padding-left: var(--prograss-space-100);
}

.ps-110 {
  padding-left: var(--prograss-space-110);
}

.w-25 {
  width: 25%;
}

.w-50 {
  width: 50%;
}

.w-75 {
  width: 75%;
}

.w-100 {
  width: 100%;
}

.w-auto {
  width: auto;
}

.h-100 {
  height: 100%;
}

.h-auto {
  height: auto;
}

.position-static {
  position: static;
}

.position-relative {
  position: relative;
}

.position-absolute {
  position: absolute;
}

.overflow-hidden {
  overflow: hidden;
}

.overflow-visible {
  overflow: visible;
}

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

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

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

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

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

.text-uppercase {
  text-transform: uppercase;
}

.text-lowercase {
  text-transform: lowercase;
}

.list-none {
  list-style: none;
}

.text-decoration-none {
  text-decoration: none;
}

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

.border {
  border: 1px solid var(--color-border);
}

.border-top {
  border-top: 1px solid var(--color-border);
}

.border-bottom {
  border-bottom: 1px solid var(--color-border);
}

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

.lh-1 {
  line-height: 1;
}

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

.lh-md {
  line-height: 1.5;
}

.lh-base {
  line-height: var(--line-height);
}

.fs-13 {
  font-size: var(--prograss-text-13);
}

.fs-sm {
  font-size: var(--text-sm);
}

.fs-15 {
  font-size: var(--prograss-text-15);
}

.fs-base {
  font-size: var(--font-size);
}

.fs-lg {
  font-size: var(--text-lg);
}

.fs-19 {
  font-size: var(--prograss-text-19);
}

.fs-xl {
  font-size: var(--text-xl);
}

.fs-2xl {
  font-size: var(--text-2xl);
}

.fs-3xl {
  font-size: var(--text-3xl);
}

.fs-36 {
  font-size: var(--prograss-text-36);
}

.fs-40 {
  font-size: var(--prograss-text-40);
}

.fs-44 {
  font-size: var(--prograss-text-44);
}

.fs-48 {
  font-size: var(--prograss-text-48);
}

.fs-64 {
  font-size: var(--prograss-text-64);
}

.fs-4xl {
  font-size: var(--text-4xl);
}

.fs-5xl {
  font-size: var(--text-5xl);
}

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

.fw-medium {
  font-weight: 500;
}

.fw-semibold {
  font-weight: 600;
}

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

.ff-body {
  font-family: var(--font-body);
}

.ff-heading {
  font-family: var(--font-heading);
}

.text-body {
  color: var(--color-text);
}

.text-muted {
  color: var(--color-text-muted);
}

.text-heading {
  color: var(--color-heading);
}

.text-primary {
  color: var(--color-primary);
}

.text-secondary {
  color: var(--color-secondary);
}

.text-contrast {
  color: var(--color-primary-contrast);
}

.text-white {
  color: var(--prograss-white);
}

.text-on-dark {
  color: var(--prograss-on-dark);
}

.text-on-dark-soft {
  color: var(--prograss-on-dark-soft);
}

.text-bark-light {
  color: var(--prograss-bark-light);
}

.text-faint {
  color: var(--prograss-faint);
}

.bg-background {
  background-color: var(--color-background);
}

.bg-surface {
  background-color: var(--color-surface);
}

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

.bg-dark {
  background-color: var(--prograss-dark);
}

.bg-darker {
  background-color: var(--prograss-darker);
}

.bg-beige {
  background-color: var(--prograss-beige);
}

.bg-sand {
  background-color: var(--prograss-sand);
}

.bg-moss {
  background-color: var(--prograss-moss);
}

.bg-on-dark {
  background-color: var(--prograss-on-dark);
}

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

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

.rounded-sm {
  border-radius: var(--radius-sm);
}

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

.rounded-pill {
  border-radius: var(--prograss-pill);
}

@media (min-width: 36rem) {
  .d-sm-none {
    display: none;
  }
  .d-sm-inline {
    display: inline;
  }
  .d-sm-inline-block {
    display: inline-block;
  }
  .d-sm-block {
    display: block;
  }
  .d-sm-grid {
    display: grid;
  }
  .d-sm-flex {
    display: flex;
  }
  .d-sm-inline-flex {
    display: inline-flex;
  }
  .flex-sm-row {
    flex-direction: row;
  }
  .flex-sm-column {
    flex-direction: column;
  }
  .flex-sm-row-reverse {
    flex-direction: row-reverse;
  }
  .flex-sm-column-reverse {
    flex-direction: column-reverse;
  }
  .justify-content-sm-start {
    justify-content: flex-start;
  }
  .justify-content-sm-end {
    justify-content: flex-end;
  }
  .justify-content-sm-center {
    justify-content: center;
  }
  .justify-content-sm-between {
    justify-content: space-between;
  }
  .align-items-sm-start {
    align-items: flex-start;
  }
  .align-items-sm-end {
    align-items: flex-end;
  }
  .align-items-sm-center {
    align-items: center;
  }
  .align-items-sm-baseline {
    align-items: baseline;
  }
  .align-items-sm-stretch {
    align-items: stretch;
  }
  .gap-sm-0 {
    gap: 0;
  }
  .gap-sm-1 {
    gap: var(--space-1);
  }
  .gap-sm-2 {
    gap: var(--space-2);
  }
  .gap-sm-3 {
    gap: var(--space-3);
  }
  .gap-sm-4 {
    gap: var(--space-4);
  }
  .gap-sm-5 {
    gap: var(--space-5);
  }
  .gap-sm-6 {
    gap: var(--prograss-space-6);
  }
  .gap-sm-8 {
    gap: var(--space-2);
  }
  .gap-sm-10 {
    gap: var(--prograss-space-10);
  }
  .gap-sm-11 {
    gap: var(--prograss-space-11);
  }
  .gap-sm-12 {
    gap: var(--prograss-space-12);
  }
  .gap-sm-14 {
    gap: var(--prograss-space-14);
  }
  .gap-sm-16 {
    gap: var(--space-3);
  }
  .gap-sm-18 {
    gap: var(--prograss-space-18);
  }
  .gap-sm-20 {
    gap: var(--prograss-space-20);
  }
  .gap-sm-22 {
    gap: var(--prograss-space-22);
  }
  .gap-sm-24 {
    gap: var(--space-4);
  }
  .gap-sm-26 {
    gap: var(--prograss-space-26);
  }
  .gap-sm-28 {
    gap: var(--prograss-space-28);
  }
  .gap-sm-32 {
    gap: var(--prograss-space-32);
  }
  .gap-sm-36 {
    gap: var(--prograss-space-36);
  }
  .gap-sm-40 {
    gap: var(--prograss-space-40);
  }
  .gap-sm-44 {
    gap: var(--prograss-space-44);
  }
  .gap-sm-48 {
    gap: var(--space-5);
  }
  .gap-sm-56 {
    gap: var(--prograss-space-56);
  }
  .gap-sm-64 {
    gap: var(--prograss-space-64);
  }
  .gap-sm-72 {
    gap: var(--prograss-space-72);
  }
  .gap-sm-80 {
    gap: var(--prograss-space-80);
  }
  .gap-sm-88 {
    gap: var(--prograss-space-88);
  }
  .gap-sm-96 {
    gap: var(--prograss-space-96);
  }
  .gap-sm-100 {
    gap: var(--prograss-space-100);
  }
  .gap-sm-110 {
    gap: var(--prograss-space-110);
  }
  .row-gap-sm-0 {
    row-gap: 0;
  }
  .row-gap-sm-1 {
    row-gap: var(--space-1);
  }
  .row-gap-sm-2 {
    row-gap: var(--space-2);
  }
  .row-gap-sm-3 {
    row-gap: var(--space-3);
  }
  .row-gap-sm-4 {
    row-gap: var(--space-4);
  }
  .row-gap-sm-5 {
    row-gap: var(--space-5);
  }
  .row-gap-sm-6 {
    row-gap: var(--prograss-space-6);
  }
  .row-gap-sm-8 {
    row-gap: var(--space-2);
  }
  .row-gap-sm-10 {
    row-gap: var(--prograss-space-10);
  }
  .row-gap-sm-11 {
    row-gap: var(--prograss-space-11);
  }
  .row-gap-sm-12 {
    row-gap: var(--prograss-space-12);
  }
  .row-gap-sm-14 {
    row-gap: var(--prograss-space-14);
  }
  .row-gap-sm-16 {
    row-gap: var(--space-3);
  }
  .row-gap-sm-18 {
    row-gap: var(--prograss-space-18);
  }
  .row-gap-sm-20 {
    row-gap: var(--prograss-space-20);
  }
  .row-gap-sm-22 {
    row-gap: var(--prograss-space-22);
  }
  .row-gap-sm-24 {
    row-gap: var(--space-4);
  }
  .row-gap-sm-26 {
    row-gap: var(--prograss-space-26);
  }
  .row-gap-sm-28 {
    row-gap: var(--prograss-space-28);
  }
  .row-gap-sm-32 {
    row-gap: var(--prograss-space-32);
  }
  .row-gap-sm-36 {
    row-gap: var(--prograss-space-36);
  }
  .row-gap-sm-40 {
    row-gap: var(--prograss-space-40);
  }
  .row-gap-sm-44 {
    row-gap: var(--prograss-space-44);
  }
  .row-gap-sm-48 {
    row-gap: var(--space-5);
  }
  .row-gap-sm-56 {
    row-gap: var(--prograss-space-56);
  }
  .row-gap-sm-64 {
    row-gap: var(--prograss-space-64);
  }
  .row-gap-sm-72 {
    row-gap: var(--prograss-space-72);
  }
  .row-gap-sm-80 {
    row-gap: var(--prograss-space-80);
  }
  .row-gap-sm-88 {
    row-gap: var(--prograss-space-88);
  }
  .row-gap-sm-96 {
    row-gap: var(--prograss-space-96);
  }
  .row-gap-sm-100 {
    row-gap: var(--prograss-space-100);
  }
  .row-gap-sm-110 {
    row-gap: var(--prograss-space-110);
  }
  .column-gap-sm-0 {
    column-gap: 0;
  }
  .column-gap-sm-1 {
    column-gap: var(--space-1);
  }
  .column-gap-sm-2 {
    column-gap: var(--space-2);
  }
  .column-gap-sm-3 {
    column-gap: var(--space-3);
  }
  .column-gap-sm-4 {
    column-gap: var(--space-4);
  }
  .column-gap-sm-5 {
    column-gap: var(--space-5);
  }
  .column-gap-sm-6 {
    column-gap: var(--prograss-space-6);
  }
  .column-gap-sm-8 {
    column-gap: var(--space-2);
  }
  .column-gap-sm-10 {
    column-gap: var(--prograss-space-10);
  }
  .column-gap-sm-11 {
    column-gap: var(--prograss-space-11);
  }
  .column-gap-sm-12 {
    column-gap: var(--prograss-space-12);
  }
  .column-gap-sm-14 {
    column-gap: var(--prograss-space-14);
  }
  .column-gap-sm-16 {
    column-gap: var(--space-3);
  }
  .column-gap-sm-18 {
    column-gap: var(--prograss-space-18);
  }
  .column-gap-sm-20 {
    column-gap: var(--prograss-space-20);
  }
  .column-gap-sm-22 {
    column-gap: var(--prograss-space-22);
  }
  .column-gap-sm-24 {
    column-gap: var(--space-4);
  }
  .column-gap-sm-26 {
    column-gap: var(--prograss-space-26);
  }
  .column-gap-sm-28 {
    column-gap: var(--prograss-space-28);
  }
  .column-gap-sm-32 {
    column-gap: var(--prograss-space-32);
  }
  .column-gap-sm-36 {
    column-gap: var(--prograss-space-36);
  }
  .column-gap-sm-40 {
    column-gap: var(--prograss-space-40);
  }
  .column-gap-sm-44 {
    column-gap: var(--prograss-space-44);
  }
  .column-gap-sm-48 {
    column-gap: var(--space-5);
  }
  .column-gap-sm-56 {
    column-gap: var(--prograss-space-56);
  }
  .column-gap-sm-64 {
    column-gap: var(--prograss-space-64);
  }
  .column-gap-sm-72 {
    column-gap: var(--prograss-space-72);
  }
  .column-gap-sm-80 {
    column-gap: var(--prograss-space-80);
  }
  .column-gap-sm-88 {
    column-gap: var(--prograss-space-88);
  }
  .column-gap-sm-96 {
    column-gap: var(--prograss-space-96);
  }
  .column-gap-sm-100 {
    column-gap: var(--prograss-space-100);
  }
  .column-gap-sm-110 {
    column-gap: var(--prograss-space-110);
  }
  .m-sm-0 {
    margin: 0;
  }
  .m-sm-1 {
    margin: var(--space-1);
  }
  .m-sm-2 {
    margin: var(--space-2);
  }
  .m-sm-3 {
    margin: var(--space-3);
  }
  .m-sm-4 {
    margin: var(--space-4);
  }
  .m-sm-5 {
    margin: var(--space-5);
  }
  .m-sm-6 {
    margin: var(--prograss-space-6);
  }
  .m-sm-8 {
    margin: var(--space-2);
  }
  .m-sm-10 {
    margin: var(--prograss-space-10);
  }
  .m-sm-11 {
    margin: var(--prograss-space-11);
  }
  .m-sm-12 {
    margin: var(--prograss-space-12);
  }
  .m-sm-14 {
    margin: var(--prograss-space-14);
  }
  .m-sm-16 {
    margin: var(--space-3);
  }
  .m-sm-18 {
    margin: var(--prograss-space-18);
  }
  .m-sm-20 {
    margin: var(--prograss-space-20);
  }
  .m-sm-22 {
    margin: var(--prograss-space-22);
  }
  .m-sm-24 {
    margin: var(--space-4);
  }
  .m-sm-26 {
    margin: var(--prograss-space-26);
  }
  .m-sm-28 {
    margin: var(--prograss-space-28);
  }
  .m-sm-32 {
    margin: var(--prograss-space-32);
  }
  .m-sm-36 {
    margin: var(--prograss-space-36);
  }
  .m-sm-40 {
    margin: var(--prograss-space-40);
  }
  .m-sm-44 {
    margin: var(--prograss-space-44);
  }
  .m-sm-48 {
    margin: var(--space-5);
  }
  .m-sm-56 {
    margin: var(--prograss-space-56);
  }
  .m-sm-64 {
    margin: var(--prograss-space-64);
  }
  .m-sm-72 {
    margin: var(--prograss-space-72);
  }
  .m-sm-80 {
    margin: var(--prograss-space-80);
  }
  .m-sm-88 {
    margin: var(--prograss-space-88);
  }
  .m-sm-96 {
    margin: var(--prograss-space-96);
  }
  .m-sm-100 {
    margin: var(--prograss-space-100);
  }
  .m-sm-110 {
    margin: var(--prograss-space-110);
  }
  .m-sm-auto {
    margin: auto;
  }
  .mx-sm-0 {
    margin-left: 0;
    margin-right: 0;
  }
  .mx-sm-1 {
    margin-left: var(--space-1);
    margin-right: var(--space-1);
  }
  .mx-sm-2 {
    margin-left: var(--space-2);
    margin-right: var(--space-2);
  }
  .mx-sm-3 {
    margin-left: var(--space-3);
    margin-right: var(--space-3);
  }
  .mx-sm-4 {
    margin-left: var(--space-4);
    margin-right: var(--space-4);
  }
  .mx-sm-5 {
    margin-left: var(--space-5);
    margin-right: var(--space-5);
  }
  .mx-sm-6 {
    margin-left: var(--prograss-space-6);
    margin-right: var(--prograss-space-6);
  }
  .mx-sm-8 {
    margin-left: var(--space-2);
    margin-right: var(--space-2);
  }
  .mx-sm-10 {
    margin-left: var(--prograss-space-10);
    margin-right: var(--prograss-space-10);
  }
  .mx-sm-11 {
    margin-left: var(--prograss-space-11);
    margin-right: var(--prograss-space-11);
  }
  .mx-sm-12 {
    margin-left: var(--prograss-space-12);
    margin-right: var(--prograss-space-12);
  }
  .mx-sm-14 {
    margin-left: var(--prograss-space-14);
    margin-right: var(--prograss-space-14);
  }
  .mx-sm-16 {
    margin-left: var(--space-3);
    margin-right: var(--space-3);
  }
  .mx-sm-18 {
    margin-left: var(--prograss-space-18);
    margin-right: var(--prograss-space-18);
  }
  .mx-sm-20 {
    margin-left: var(--prograss-space-20);
    margin-right: var(--prograss-space-20);
  }
  .mx-sm-22 {
    margin-left: var(--prograss-space-22);
    margin-right: var(--prograss-space-22);
  }
  .mx-sm-24 {
    margin-left: var(--space-4);
    margin-right: var(--space-4);
  }
  .mx-sm-26 {
    margin-left: var(--prograss-space-26);
    margin-right: var(--prograss-space-26);
  }
  .mx-sm-28 {
    margin-left: var(--prograss-space-28);
    margin-right: var(--prograss-space-28);
  }
  .mx-sm-32 {
    margin-left: var(--prograss-space-32);
    margin-right: var(--prograss-space-32);
  }
  .mx-sm-36 {
    margin-left: var(--prograss-space-36);
    margin-right: var(--prograss-space-36);
  }
  .mx-sm-40 {
    margin-left: var(--prograss-space-40);
    margin-right: var(--prograss-space-40);
  }
  .mx-sm-44 {
    margin-left: var(--prograss-space-44);
    margin-right: var(--prograss-space-44);
  }
  .mx-sm-48 {
    margin-left: var(--space-5);
    margin-right: var(--space-5);
  }
  .mx-sm-56 {
    margin-left: var(--prograss-space-56);
    margin-right: var(--prograss-space-56);
  }
  .mx-sm-64 {
    margin-left: var(--prograss-space-64);
    margin-right: var(--prograss-space-64);
  }
  .mx-sm-72 {
    margin-left: var(--prograss-space-72);
    margin-right: var(--prograss-space-72);
  }
  .mx-sm-80 {
    margin-left: var(--prograss-space-80);
    margin-right: var(--prograss-space-80);
  }
  .mx-sm-88 {
    margin-left: var(--prograss-space-88);
    margin-right: var(--prograss-space-88);
  }
  .mx-sm-96 {
    margin-left: var(--prograss-space-96);
    margin-right: var(--prograss-space-96);
  }
  .mx-sm-100 {
    margin-left: var(--prograss-space-100);
    margin-right: var(--prograss-space-100);
  }
  .mx-sm-110 {
    margin-left: var(--prograss-space-110);
    margin-right: var(--prograss-space-110);
  }
  .mx-sm-auto {
    margin-left: auto;
    margin-right: auto;
  }
  .my-sm-0 {
    margin-top: 0;
    margin-bottom: 0;
  }
  .my-sm-1 {
    margin-top: var(--space-1);
    margin-bottom: var(--space-1);
  }
  .my-sm-2 {
    margin-top: var(--space-2);
    margin-bottom: var(--space-2);
  }
  .my-sm-3 {
    margin-top: var(--space-3);
    margin-bottom: var(--space-3);
  }
  .my-sm-4 {
    margin-top: var(--space-4);
    margin-bottom: var(--space-4);
  }
  .my-sm-5 {
    margin-top: var(--space-5);
    margin-bottom: var(--space-5);
  }
  .my-sm-6 {
    margin-top: var(--prograss-space-6);
    margin-bottom: var(--prograss-space-6);
  }
  .my-sm-8 {
    margin-top: var(--space-2);
    margin-bottom: var(--space-2);
  }
  .my-sm-10 {
    margin-top: var(--prograss-space-10);
    margin-bottom: var(--prograss-space-10);
  }
  .my-sm-11 {
    margin-top: var(--prograss-space-11);
    margin-bottom: var(--prograss-space-11);
  }
  .my-sm-12 {
    margin-top: var(--prograss-space-12);
    margin-bottom: var(--prograss-space-12);
  }
  .my-sm-14 {
    margin-top: var(--prograss-space-14);
    margin-bottom: var(--prograss-space-14);
  }
  .my-sm-16 {
    margin-top: var(--space-3);
    margin-bottom: var(--space-3);
  }
  .my-sm-18 {
    margin-top: var(--prograss-space-18);
    margin-bottom: var(--prograss-space-18);
  }
  .my-sm-20 {
    margin-top: var(--prograss-space-20);
    margin-bottom: var(--prograss-space-20);
  }
  .my-sm-22 {
    margin-top: var(--prograss-space-22);
    margin-bottom: var(--prograss-space-22);
  }
  .my-sm-24 {
    margin-top: var(--space-4);
    margin-bottom: var(--space-4);
  }
  .my-sm-26 {
    margin-top: var(--prograss-space-26);
    margin-bottom: var(--prograss-space-26);
  }
  .my-sm-28 {
    margin-top: var(--prograss-space-28);
    margin-bottom: var(--prograss-space-28);
  }
  .my-sm-32 {
    margin-top: var(--prograss-space-32);
    margin-bottom: var(--prograss-space-32);
  }
  .my-sm-36 {
    margin-top: var(--prograss-space-36);
    margin-bottom: var(--prograss-space-36);
  }
  .my-sm-40 {
    margin-top: var(--prograss-space-40);
    margin-bottom: var(--prograss-space-40);
  }
  .my-sm-44 {
    margin-top: var(--prograss-space-44);
    margin-bottom: var(--prograss-space-44);
  }
  .my-sm-48 {
    margin-top: var(--space-5);
    margin-bottom: var(--space-5);
  }
  .my-sm-56 {
    margin-top: var(--prograss-space-56);
    margin-bottom: var(--prograss-space-56);
  }
  .my-sm-64 {
    margin-top: var(--prograss-space-64);
    margin-bottom: var(--prograss-space-64);
  }
  .my-sm-72 {
    margin-top: var(--prograss-space-72);
    margin-bottom: var(--prograss-space-72);
  }
  .my-sm-80 {
    margin-top: var(--prograss-space-80);
    margin-bottom: var(--prograss-space-80);
  }
  .my-sm-88 {
    margin-top: var(--prograss-space-88);
    margin-bottom: var(--prograss-space-88);
  }
  .my-sm-96 {
    margin-top: var(--prograss-space-96);
    margin-bottom: var(--prograss-space-96);
  }
  .my-sm-100 {
    margin-top: var(--prograss-space-100);
    margin-bottom: var(--prograss-space-100);
  }
  .my-sm-110 {
    margin-top: var(--prograss-space-110);
    margin-bottom: var(--prograss-space-110);
  }
  .my-sm-auto {
    margin-top: auto;
    margin-bottom: auto;
  }
  .mt-sm-0 {
    margin-top: 0;
  }
  .mt-sm-1 {
    margin-top: var(--space-1);
  }
  .mt-sm-2 {
    margin-top: var(--space-2);
  }
  .mt-sm-3 {
    margin-top: var(--space-3);
  }
  .mt-sm-4 {
    margin-top: var(--space-4);
  }
  .mt-sm-5 {
    margin-top: var(--space-5);
  }
  .mt-sm-6 {
    margin-top: var(--prograss-space-6);
  }
  .mt-sm-8 {
    margin-top: var(--space-2);
  }
  .mt-sm-10 {
    margin-top: var(--prograss-space-10);
  }
  .mt-sm-11 {
    margin-top: var(--prograss-space-11);
  }
  .mt-sm-12 {
    margin-top: var(--prograss-space-12);
  }
  .mt-sm-14 {
    margin-top: var(--prograss-space-14);
  }
  .mt-sm-16 {
    margin-top: var(--space-3);
  }
  .mt-sm-18 {
    margin-top: var(--prograss-space-18);
  }
  .mt-sm-20 {
    margin-top: var(--prograss-space-20);
  }
  .mt-sm-22 {
    margin-top: var(--prograss-space-22);
  }
  .mt-sm-24 {
    margin-top: var(--space-4);
  }
  .mt-sm-26 {
    margin-top: var(--prograss-space-26);
  }
  .mt-sm-28 {
    margin-top: var(--prograss-space-28);
  }
  .mt-sm-32 {
    margin-top: var(--prograss-space-32);
  }
  .mt-sm-36 {
    margin-top: var(--prograss-space-36);
  }
  .mt-sm-40 {
    margin-top: var(--prograss-space-40);
  }
  .mt-sm-44 {
    margin-top: var(--prograss-space-44);
  }
  .mt-sm-48 {
    margin-top: var(--space-5);
  }
  .mt-sm-56 {
    margin-top: var(--prograss-space-56);
  }
  .mt-sm-64 {
    margin-top: var(--prograss-space-64);
  }
  .mt-sm-72 {
    margin-top: var(--prograss-space-72);
  }
  .mt-sm-80 {
    margin-top: var(--prograss-space-80);
  }
  .mt-sm-88 {
    margin-top: var(--prograss-space-88);
  }
  .mt-sm-96 {
    margin-top: var(--prograss-space-96);
  }
  .mt-sm-100 {
    margin-top: var(--prograss-space-100);
  }
  .mt-sm-110 {
    margin-top: var(--prograss-space-110);
  }
  .mt-sm-auto {
    margin-top: auto;
  }
  .me-sm-0 {
    margin-right: 0;
  }
  .me-sm-1 {
    margin-right: var(--space-1);
  }
  .me-sm-2 {
    margin-right: var(--space-2);
  }
  .me-sm-3 {
    margin-right: var(--space-3);
  }
  .me-sm-4 {
    margin-right: var(--space-4);
  }
  .me-sm-5 {
    margin-right: var(--space-5);
  }
  .me-sm-6 {
    margin-right: var(--prograss-space-6);
  }
  .me-sm-8 {
    margin-right: var(--space-2);
  }
  .me-sm-10 {
    margin-right: var(--prograss-space-10);
  }
  .me-sm-11 {
    margin-right: var(--prograss-space-11);
  }
  .me-sm-12 {
    margin-right: var(--prograss-space-12);
  }
  .me-sm-14 {
    margin-right: var(--prograss-space-14);
  }
  .me-sm-16 {
    margin-right: var(--space-3);
  }
  .me-sm-18 {
    margin-right: var(--prograss-space-18);
  }
  .me-sm-20 {
    margin-right: var(--prograss-space-20);
  }
  .me-sm-22 {
    margin-right: var(--prograss-space-22);
  }
  .me-sm-24 {
    margin-right: var(--space-4);
  }
  .me-sm-26 {
    margin-right: var(--prograss-space-26);
  }
  .me-sm-28 {
    margin-right: var(--prograss-space-28);
  }
  .me-sm-32 {
    margin-right: var(--prograss-space-32);
  }
  .me-sm-36 {
    margin-right: var(--prograss-space-36);
  }
  .me-sm-40 {
    margin-right: var(--prograss-space-40);
  }
  .me-sm-44 {
    margin-right: var(--prograss-space-44);
  }
  .me-sm-48 {
    margin-right: var(--space-5);
  }
  .me-sm-56 {
    margin-right: var(--prograss-space-56);
  }
  .me-sm-64 {
    margin-right: var(--prograss-space-64);
  }
  .me-sm-72 {
    margin-right: var(--prograss-space-72);
  }
  .me-sm-80 {
    margin-right: var(--prograss-space-80);
  }
  .me-sm-88 {
    margin-right: var(--prograss-space-88);
  }
  .me-sm-96 {
    margin-right: var(--prograss-space-96);
  }
  .me-sm-100 {
    margin-right: var(--prograss-space-100);
  }
  .me-sm-110 {
    margin-right: var(--prograss-space-110);
  }
  .me-sm-auto {
    margin-right: auto;
  }
  .mb-sm-0 {
    margin-bottom: 0;
  }
  .mb-sm-1 {
    margin-bottom: var(--space-1);
  }
  .mb-sm-2 {
    margin-bottom: var(--space-2);
  }
  .mb-sm-3 {
    margin-bottom: var(--space-3);
  }
  .mb-sm-4 {
    margin-bottom: var(--space-4);
  }
  .mb-sm-5 {
    margin-bottom: var(--space-5);
  }
  .mb-sm-6 {
    margin-bottom: var(--prograss-space-6);
  }
  .mb-sm-8 {
    margin-bottom: var(--space-2);
  }
  .mb-sm-10 {
    margin-bottom: var(--prograss-space-10);
  }
  .mb-sm-11 {
    margin-bottom: var(--prograss-space-11);
  }
  .mb-sm-12 {
    margin-bottom: var(--prograss-space-12);
  }
  .mb-sm-14 {
    margin-bottom: var(--prograss-space-14);
  }
  .mb-sm-16 {
    margin-bottom: var(--space-3);
  }
  .mb-sm-18 {
    margin-bottom: var(--prograss-space-18);
  }
  .mb-sm-20 {
    margin-bottom: var(--prograss-space-20);
  }
  .mb-sm-22 {
    margin-bottom: var(--prograss-space-22);
  }
  .mb-sm-24 {
    margin-bottom: var(--space-4);
  }
  .mb-sm-26 {
    margin-bottom: var(--prograss-space-26);
  }
  .mb-sm-28 {
    margin-bottom: var(--prograss-space-28);
  }
  .mb-sm-32 {
    margin-bottom: var(--prograss-space-32);
  }
  .mb-sm-36 {
    margin-bottom: var(--prograss-space-36);
  }
  .mb-sm-40 {
    margin-bottom: var(--prograss-space-40);
  }
  .mb-sm-44 {
    margin-bottom: var(--prograss-space-44);
  }
  .mb-sm-48 {
    margin-bottom: var(--space-5);
  }
  .mb-sm-56 {
    margin-bottom: var(--prograss-space-56);
  }
  .mb-sm-64 {
    margin-bottom: var(--prograss-space-64);
  }
  .mb-sm-72 {
    margin-bottom: var(--prograss-space-72);
  }
  .mb-sm-80 {
    margin-bottom: var(--prograss-space-80);
  }
  .mb-sm-88 {
    margin-bottom: var(--prograss-space-88);
  }
  .mb-sm-96 {
    margin-bottom: var(--prograss-space-96);
  }
  .mb-sm-100 {
    margin-bottom: var(--prograss-space-100);
  }
  .mb-sm-110 {
    margin-bottom: var(--prograss-space-110);
  }
  .mb-sm-auto {
    margin-bottom: auto;
  }
  .ms-sm-0 {
    margin-left: 0;
  }
  .ms-sm-1 {
    margin-left: var(--space-1);
  }
  .ms-sm-2 {
    margin-left: var(--space-2);
  }
  .ms-sm-3 {
    margin-left: var(--space-3);
  }
  .ms-sm-4 {
    margin-left: var(--space-4);
  }
  .ms-sm-5 {
    margin-left: var(--space-5);
  }
  .ms-sm-6 {
    margin-left: var(--prograss-space-6);
  }
  .ms-sm-8 {
    margin-left: var(--space-2);
  }
  .ms-sm-10 {
    margin-left: var(--prograss-space-10);
  }
  .ms-sm-11 {
    margin-left: var(--prograss-space-11);
  }
  .ms-sm-12 {
    margin-left: var(--prograss-space-12);
  }
  .ms-sm-14 {
    margin-left: var(--prograss-space-14);
  }
  .ms-sm-16 {
    margin-left: var(--space-3);
  }
  .ms-sm-18 {
    margin-left: var(--prograss-space-18);
  }
  .ms-sm-20 {
    margin-left: var(--prograss-space-20);
  }
  .ms-sm-22 {
    margin-left: var(--prograss-space-22);
  }
  .ms-sm-24 {
    margin-left: var(--space-4);
  }
  .ms-sm-26 {
    margin-left: var(--prograss-space-26);
  }
  .ms-sm-28 {
    margin-left: var(--prograss-space-28);
  }
  .ms-sm-32 {
    margin-left: var(--prograss-space-32);
  }
  .ms-sm-36 {
    margin-left: var(--prograss-space-36);
  }
  .ms-sm-40 {
    margin-left: var(--prograss-space-40);
  }
  .ms-sm-44 {
    margin-left: var(--prograss-space-44);
  }
  .ms-sm-48 {
    margin-left: var(--space-5);
  }
  .ms-sm-56 {
    margin-left: var(--prograss-space-56);
  }
  .ms-sm-64 {
    margin-left: var(--prograss-space-64);
  }
  .ms-sm-72 {
    margin-left: var(--prograss-space-72);
  }
  .ms-sm-80 {
    margin-left: var(--prograss-space-80);
  }
  .ms-sm-88 {
    margin-left: var(--prograss-space-88);
  }
  .ms-sm-96 {
    margin-left: var(--prograss-space-96);
  }
  .ms-sm-100 {
    margin-left: var(--prograss-space-100);
  }
  .ms-sm-110 {
    margin-left: var(--prograss-space-110);
  }
  .ms-sm-auto {
    margin-left: auto;
  }
  .p-sm-0 {
    padding: 0;
  }
  .p-sm-1 {
    padding: var(--space-1);
  }
  .p-sm-2 {
    padding: var(--space-2);
  }
  .p-sm-3 {
    padding: var(--space-3);
  }
  .p-sm-4 {
    padding: var(--space-4);
  }
  .p-sm-5 {
    padding: var(--space-5);
  }
  .p-sm-6 {
    padding: var(--prograss-space-6);
  }
  .p-sm-8 {
    padding: var(--space-2);
  }
  .p-sm-10 {
    padding: var(--prograss-space-10);
  }
  .p-sm-11 {
    padding: var(--prograss-space-11);
  }
  .p-sm-12 {
    padding: var(--prograss-space-12);
  }
  .p-sm-14 {
    padding: var(--prograss-space-14);
  }
  .p-sm-16 {
    padding: var(--space-3);
  }
  .p-sm-18 {
    padding: var(--prograss-space-18);
  }
  .p-sm-20 {
    padding: var(--prograss-space-20);
  }
  .p-sm-22 {
    padding: var(--prograss-space-22);
  }
  .p-sm-24 {
    padding: var(--space-4);
  }
  .p-sm-26 {
    padding: var(--prograss-space-26);
  }
  .p-sm-28 {
    padding: var(--prograss-space-28);
  }
  .p-sm-32 {
    padding: var(--prograss-space-32);
  }
  .p-sm-36 {
    padding: var(--prograss-space-36);
  }
  .p-sm-40 {
    padding: var(--prograss-space-40);
  }
  .p-sm-44 {
    padding: var(--prograss-space-44);
  }
  .p-sm-48 {
    padding: var(--space-5);
  }
  .p-sm-56 {
    padding: var(--prograss-space-56);
  }
  .p-sm-64 {
    padding: var(--prograss-space-64);
  }
  .p-sm-72 {
    padding: var(--prograss-space-72);
  }
  .p-sm-80 {
    padding: var(--prograss-space-80);
  }
  .p-sm-88 {
    padding: var(--prograss-space-88);
  }
  .p-sm-96 {
    padding: var(--prograss-space-96);
  }
  .p-sm-100 {
    padding: var(--prograss-space-100);
  }
  .p-sm-110 {
    padding: var(--prograss-space-110);
  }
  .px-sm-0 {
    padding-left: 0;
    padding-right: 0;
  }
  .px-sm-1 {
    padding-left: var(--space-1);
    padding-right: var(--space-1);
  }
  .px-sm-2 {
    padding-left: var(--space-2);
    padding-right: var(--space-2);
  }
  .px-sm-3 {
    padding-left: var(--space-3);
    padding-right: var(--space-3);
  }
  .px-sm-4 {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }
  .px-sm-5 {
    padding-left: var(--space-5);
    padding-right: var(--space-5);
  }
  .px-sm-6 {
    padding-left: var(--prograss-space-6);
    padding-right: var(--prograss-space-6);
  }
  .px-sm-8 {
    padding-left: var(--space-2);
    padding-right: var(--space-2);
  }
  .px-sm-10 {
    padding-left: var(--prograss-space-10);
    padding-right: var(--prograss-space-10);
  }
  .px-sm-11 {
    padding-left: var(--prograss-space-11);
    padding-right: var(--prograss-space-11);
  }
  .px-sm-12 {
    padding-left: var(--prograss-space-12);
    padding-right: var(--prograss-space-12);
  }
  .px-sm-14 {
    padding-left: var(--prograss-space-14);
    padding-right: var(--prograss-space-14);
  }
  .px-sm-16 {
    padding-left: var(--space-3);
    padding-right: var(--space-3);
  }
  .px-sm-18 {
    padding-left: var(--prograss-space-18);
    padding-right: var(--prograss-space-18);
  }
  .px-sm-20 {
    padding-left: var(--prograss-space-20);
    padding-right: var(--prograss-space-20);
  }
  .px-sm-22 {
    padding-left: var(--prograss-space-22);
    padding-right: var(--prograss-space-22);
  }
  .px-sm-24 {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }
  .px-sm-26 {
    padding-left: var(--prograss-space-26);
    padding-right: var(--prograss-space-26);
  }
  .px-sm-28 {
    padding-left: var(--prograss-space-28);
    padding-right: var(--prograss-space-28);
  }
  .px-sm-32 {
    padding-left: var(--prograss-space-32);
    padding-right: var(--prograss-space-32);
  }
  .px-sm-36 {
    padding-left: var(--prograss-space-36);
    padding-right: var(--prograss-space-36);
  }
  .px-sm-40 {
    padding-left: var(--prograss-space-40);
    padding-right: var(--prograss-space-40);
  }
  .px-sm-44 {
    padding-left: var(--prograss-space-44);
    padding-right: var(--prograss-space-44);
  }
  .px-sm-48 {
    padding-left: var(--space-5);
    padding-right: var(--space-5);
  }
  .px-sm-56 {
    padding-left: var(--prograss-space-56);
    padding-right: var(--prograss-space-56);
  }
  .px-sm-64 {
    padding-left: var(--prograss-space-64);
    padding-right: var(--prograss-space-64);
  }
  .px-sm-72 {
    padding-left: var(--prograss-space-72);
    padding-right: var(--prograss-space-72);
  }
  .px-sm-80 {
    padding-left: var(--prograss-space-80);
    padding-right: var(--prograss-space-80);
  }
  .px-sm-88 {
    padding-left: var(--prograss-space-88);
    padding-right: var(--prograss-space-88);
  }
  .px-sm-96 {
    padding-left: var(--prograss-space-96);
    padding-right: var(--prograss-space-96);
  }
  .px-sm-100 {
    padding-left: var(--prograss-space-100);
    padding-right: var(--prograss-space-100);
  }
  .px-sm-110 {
    padding-left: var(--prograss-space-110);
    padding-right: var(--prograss-space-110);
  }
  .py-sm-0 {
    padding-top: 0;
    padding-bottom: 0;
  }
  .py-sm-1 {
    padding-top: var(--space-1);
    padding-bottom: var(--space-1);
  }
  .py-sm-2 {
    padding-top: var(--space-2);
    padding-bottom: var(--space-2);
  }
  .py-sm-3 {
    padding-top: var(--space-3);
    padding-bottom: var(--space-3);
  }
  .py-sm-4 {
    padding-top: var(--space-4);
    padding-bottom: var(--space-4);
  }
  .py-sm-5 {
    padding-top: var(--space-5);
    padding-bottom: var(--space-5);
  }
  .py-sm-6 {
    padding-top: var(--prograss-space-6);
    padding-bottom: var(--prograss-space-6);
  }
  .py-sm-8 {
    padding-top: var(--space-2);
    padding-bottom: var(--space-2);
  }
  .py-sm-10 {
    padding-top: var(--prograss-space-10);
    padding-bottom: var(--prograss-space-10);
  }
  .py-sm-11 {
    padding-top: var(--prograss-space-11);
    padding-bottom: var(--prograss-space-11);
  }
  .py-sm-12 {
    padding-top: var(--prograss-space-12);
    padding-bottom: var(--prograss-space-12);
  }
  .py-sm-14 {
    padding-top: var(--prograss-space-14);
    padding-bottom: var(--prograss-space-14);
  }
  .py-sm-16 {
    padding-top: var(--space-3);
    padding-bottom: var(--space-3);
  }
  .py-sm-18 {
    padding-top: var(--prograss-space-18);
    padding-bottom: var(--prograss-space-18);
  }
  .py-sm-20 {
    padding-top: var(--prograss-space-20);
    padding-bottom: var(--prograss-space-20);
  }
  .py-sm-22 {
    padding-top: var(--prograss-space-22);
    padding-bottom: var(--prograss-space-22);
  }
  .py-sm-24 {
    padding-top: var(--space-4);
    padding-bottom: var(--space-4);
  }
  .py-sm-26 {
    padding-top: var(--prograss-space-26);
    padding-bottom: var(--prograss-space-26);
  }
  .py-sm-28 {
    padding-top: var(--prograss-space-28);
    padding-bottom: var(--prograss-space-28);
  }
  .py-sm-32 {
    padding-top: var(--prograss-space-32);
    padding-bottom: var(--prograss-space-32);
  }
  .py-sm-36 {
    padding-top: var(--prograss-space-36);
    padding-bottom: var(--prograss-space-36);
  }
  .py-sm-40 {
    padding-top: var(--prograss-space-40);
    padding-bottom: var(--prograss-space-40);
  }
  .py-sm-44 {
    padding-top: var(--prograss-space-44);
    padding-bottom: var(--prograss-space-44);
  }
  .py-sm-48 {
    padding-top: var(--space-5);
    padding-bottom: var(--space-5);
  }
  .py-sm-56 {
    padding-top: var(--prograss-space-56);
    padding-bottom: var(--prograss-space-56);
  }
  .py-sm-64 {
    padding-top: var(--prograss-space-64);
    padding-bottom: var(--prograss-space-64);
  }
  .py-sm-72 {
    padding-top: var(--prograss-space-72);
    padding-bottom: var(--prograss-space-72);
  }
  .py-sm-80 {
    padding-top: var(--prograss-space-80);
    padding-bottom: var(--prograss-space-80);
  }
  .py-sm-88 {
    padding-top: var(--prograss-space-88);
    padding-bottom: var(--prograss-space-88);
  }
  .py-sm-96 {
    padding-top: var(--prograss-space-96);
    padding-bottom: var(--prograss-space-96);
  }
  .py-sm-100 {
    padding-top: var(--prograss-space-100);
    padding-bottom: var(--prograss-space-100);
  }
  .py-sm-110 {
    padding-top: var(--prograss-space-110);
    padding-bottom: var(--prograss-space-110);
  }
  .pt-sm-0 {
    padding-top: 0;
  }
  .pt-sm-1 {
    padding-top: var(--space-1);
  }
  .pt-sm-2 {
    padding-top: var(--space-2);
  }
  .pt-sm-3 {
    padding-top: var(--space-3);
  }
  .pt-sm-4 {
    padding-top: var(--space-4);
  }
  .pt-sm-5 {
    padding-top: var(--space-5);
  }
  .pt-sm-6 {
    padding-top: var(--prograss-space-6);
  }
  .pt-sm-8 {
    padding-top: var(--space-2);
  }
  .pt-sm-10 {
    padding-top: var(--prograss-space-10);
  }
  .pt-sm-11 {
    padding-top: var(--prograss-space-11);
  }
  .pt-sm-12 {
    padding-top: var(--prograss-space-12);
  }
  .pt-sm-14 {
    padding-top: var(--prograss-space-14);
  }
  .pt-sm-16 {
    padding-top: var(--space-3);
  }
  .pt-sm-18 {
    padding-top: var(--prograss-space-18);
  }
  .pt-sm-20 {
    padding-top: var(--prograss-space-20);
  }
  .pt-sm-22 {
    padding-top: var(--prograss-space-22);
  }
  .pt-sm-24 {
    padding-top: var(--space-4);
  }
  .pt-sm-26 {
    padding-top: var(--prograss-space-26);
  }
  .pt-sm-28 {
    padding-top: var(--prograss-space-28);
  }
  .pt-sm-32 {
    padding-top: var(--prograss-space-32);
  }
  .pt-sm-36 {
    padding-top: var(--prograss-space-36);
  }
  .pt-sm-40 {
    padding-top: var(--prograss-space-40);
  }
  .pt-sm-44 {
    padding-top: var(--prograss-space-44);
  }
  .pt-sm-48 {
    padding-top: var(--space-5);
  }
  .pt-sm-56 {
    padding-top: var(--prograss-space-56);
  }
  .pt-sm-64 {
    padding-top: var(--prograss-space-64);
  }
  .pt-sm-72 {
    padding-top: var(--prograss-space-72);
  }
  .pt-sm-80 {
    padding-top: var(--prograss-space-80);
  }
  .pt-sm-88 {
    padding-top: var(--prograss-space-88);
  }
  .pt-sm-96 {
    padding-top: var(--prograss-space-96);
  }
  .pt-sm-100 {
    padding-top: var(--prograss-space-100);
  }
  .pt-sm-110 {
    padding-top: var(--prograss-space-110);
  }
  .pe-sm-0 {
    padding-right: 0;
  }
  .pe-sm-1 {
    padding-right: var(--space-1);
  }
  .pe-sm-2 {
    padding-right: var(--space-2);
  }
  .pe-sm-3 {
    padding-right: var(--space-3);
  }
  .pe-sm-4 {
    padding-right: var(--space-4);
  }
  .pe-sm-5 {
    padding-right: var(--space-5);
  }
  .pe-sm-6 {
    padding-right: var(--prograss-space-6);
  }
  .pe-sm-8 {
    padding-right: var(--space-2);
  }
  .pe-sm-10 {
    padding-right: var(--prograss-space-10);
  }
  .pe-sm-11 {
    padding-right: var(--prograss-space-11);
  }
  .pe-sm-12 {
    padding-right: var(--prograss-space-12);
  }
  .pe-sm-14 {
    padding-right: var(--prograss-space-14);
  }
  .pe-sm-16 {
    padding-right: var(--space-3);
  }
  .pe-sm-18 {
    padding-right: var(--prograss-space-18);
  }
  .pe-sm-20 {
    padding-right: var(--prograss-space-20);
  }
  .pe-sm-22 {
    padding-right: var(--prograss-space-22);
  }
  .pe-sm-24 {
    padding-right: var(--space-4);
  }
  .pe-sm-26 {
    padding-right: var(--prograss-space-26);
  }
  .pe-sm-28 {
    padding-right: var(--prograss-space-28);
  }
  .pe-sm-32 {
    padding-right: var(--prograss-space-32);
  }
  .pe-sm-36 {
    padding-right: var(--prograss-space-36);
  }
  .pe-sm-40 {
    padding-right: var(--prograss-space-40);
  }
  .pe-sm-44 {
    padding-right: var(--prograss-space-44);
  }
  .pe-sm-48 {
    padding-right: var(--space-5);
  }
  .pe-sm-56 {
    padding-right: var(--prograss-space-56);
  }
  .pe-sm-64 {
    padding-right: var(--prograss-space-64);
  }
  .pe-sm-72 {
    padding-right: var(--prograss-space-72);
  }
  .pe-sm-80 {
    padding-right: var(--prograss-space-80);
  }
  .pe-sm-88 {
    padding-right: var(--prograss-space-88);
  }
  .pe-sm-96 {
    padding-right: var(--prograss-space-96);
  }
  .pe-sm-100 {
    padding-right: var(--prograss-space-100);
  }
  .pe-sm-110 {
    padding-right: var(--prograss-space-110);
  }
  .pb-sm-0 {
    padding-bottom: 0;
  }
  .pb-sm-1 {
    padding-bottom: var(--space-1);
  }
  .pb-sm-2 {
    padding-bottom: var(--space-2);
  }
  .pb-sm-3 {
    padding-bottom: var(--space-3);
  }
  .pb-sm-4 {
    padding-bottom: var(--space-4);
  }
  .pb-sm-5 {
    padding-bottom: var(--space-5);
  }
  .pb-sm-6 {
    padding-bottom: var(--prograss-space-6);
  }
  .pb-sm-8 {
    padding-bottom: var(--space-2);
  }
  .pb-sm-10 {
    padding-bottom: var(--prograss-space-10);
  }
  .pb-sm-11 {
    padding-bottom: var(--prograss-space-11);
  }
  .pb-sm-12 {
    padding-bottom: var(--prograss-space-12);
  }
  .pb-sm-14 {
    padding-bottom: var(--prograss-space-14);
  }
  .pb-sm-16 {
    padding-bottom: var(--space-3);
  }
  .pb-sm-18 {
    padding-bottom: var(--prograss-space-18);
  }
  .pb-sm-20 {
    padding-bottom: var(--prograss-space-20);
  }
  .pb-sm-22 {
    padding-bottom: var(--prograss-space-22);
  }
  .pb-sm-24 {
    padding-bottom: var(--space-4);
  }
  .pb-sm-26 {
    padding-bottom: var(--prograss-space-26);
  }
  .pb-sm-28 {
    padding-bottom: var(--prograss-space-28);
  }
  .pb-sm-32 {
    padding-bottom: var(--prograss-space-32);
  }
  .pb-sm-36 {
    padding-bottom: var(--prograss-space-36);
  }
  .pb-sm-40 {
    padding-bottom: var(--prograss-space-40);
  }
  .pb-sm-44 {
    padding-bottom: var(--prograss-space-44);
  }
  .pb-sm-48 {
    padding-bottom: var(--space-5);
  }
  .pb-sm-56 {
    padding-bottom: var(--prograss-space-56);
  }
  .pb-sm-64 {
    padding-bottom: var(--prograss-space-64);
  }
  .pb-sm-72 {
    padding-bottom: var(--prograss-space-72);
  }
  .pb-sm-80 {
    padding-bottom: var(--prograss-space-80);
  }
  .pb-sm-88 {
    padding-bottom: var(--prograss-space-88);
  }
  .pb-sm-96 {
    padding-bottom: var(--prograss-space-96);
  }
  .pb-sm-100 {
    padding-bottom: var(--prograss-space-100);
  }
  .pb-sm-110 {
    padding-bottom: var(--prograss-space-110);
  }
  .ps-sm-0 {
    padding-left: 0;
  }
  .ps-sm-1 {
    padding-left: var(--space-1);
  }
  .ps-sm-2 {
    padding-left: var(--space-2);
  }
  .ps-sm-3 {
    padding-left: var(--space-3);
  }
  .ps-sm-4 {
    padding-left: var(--space-4);
  }
  .ps-sm-5 {
    padding-left: var(--space-5);
  }
  .ps-sm-6 {
    padding-left: var(--prograss-space-6);
  }
  .ps-sm-8 {
    padding-left: var(--space-2);
  }
  .ps-sm-10 {
    padding-left: var(--prograss-space-10);
  }
  .ps-sm-11 {
    padding-left: var(--prograss-space-11);
  }
  .ps-sm-12 {
    padding-left: var(--prograss-space-12);
  }
  .ps-sm-14 {
    padding-left: var(--prograss-space-14);
  }
  .ps-sm-16 {
    padding-left: var(--space-3);
  }
  .ps-sm-18 {
    padding-left: var(--prograss-space-18);
  }
  .ps-sm-20 {
    padding-left: var(--prograss-space-20);
  }
  .ps-sm-22 {
    padding-left: var(--prograss-space-22);
  }
  .ps-sm-24 {
    padding-left: var(--space-4);
  }
  .ps-sm-26 {
    padding-left: var(--prograss-space-26);
  }
  .ps-sm-28 {
    padding-left: var(--prograss-space-28);
  }
  .ps-sm-32 {
    padding-left: var(--prograss-space-32);
  }
  .ps-sm-36 {
    padding-left: var(--prograss-space-36);
  }
  .ps-sm-40 {
    padding-left: var(--prograss-space-40);
  }
  .ps-sm-44 {
    padding-left: var(--prograss-space-44);
  }
  .ps-sm-48 {
    padding-left: var(--space-5);
  }
  .ps-sm-56 {
    padding-left: var(--prograss-space-56);
  }
  .ps-sm-64 {
    padding-left: var(--prograss-space-64);
  }
  .ps-sm-72 {
    padding-left: var(--prograss-space-72);
  }
  .ps-sm-80 {
    padding-left: var(--prograss-space-80);
  }
  .ps-sm-88 {
    padding-left: var(--prograss-space-88);
  }
  .ps-sm-96 {
    padding-left: var(--prograss-space-96);
  }
  .ps-sm-100 {
    padding-left: var(--prograss-space-100);
  }
  .ps-sm-110 {
    padding-left: var(--prograss-space-110);
  }
  .w-sm-25 {
    width: 25%;
  }
  .w-sm-50 {
    width: 50%;
  }
  .w-sm-75 {
    width: 75%;
  }
  .w-sm-100 {
    width: 100%;
  }
  .w-sm-auto {
    width: auto;
  }
  .text-sm-start {
    text-align: start;
  }
  .text-sm-center {
    text-align: center;
  }
  .text-sm-end {
    text-align: end;
  }
  .fs-sm-13 {
    font-size: var(--prograss-text-13);
  }
  .fs-sm-sm {
    font-size: var(--text-sm);
  }
  .fs-sm-15 {
    font-size: var(--prograss-text-15);
  }
  .fs-sm-base {
    font-size: var(--font-size);
  }
  .fs-sm-lg {
    font-size: var(--text-lg);
  }
  .fs-sm-19 {
    font-size: var(--prograss-text-19);
  }
  .fs-sm-xl {
    font-size: var(--text-xl);
  }
  .fs-sm-2xl {
    font-size: var(--text-2xl);
  }
  .fs-sm-3xl {
    font-size: var(--text-3xl);
  }
  .fs-sm-36 {
    font-size: var(--prograss-text-36);
  }
  .fs-sm-40 {
    font-size: var(--prograss-text-40);
  }
  .fs-sm-44 {
    font-size: var(--prograss-text-44);
  }
  .fs-sm-48 {
    font-size: var(--prograss-text-48);
  }
  .fs-sm-64 {
    font-size: var(--prograss-text-64);
  }
  .fs-sm-4xl {
    font-size: var(--text-4xl);
  }
  .fs-sm-5xl {
    font-size: var(--text-5xl);
  }
  .rounded-sm {
    border-radius: var(--radius);
  }
  .rounded-sm-0 {
    border-radius: 0;
  }
  .rounded-sm-sm {
    border-radius: var(--radius-sm);
  }
  .rounded-sm-lg {
    border-radius: var(--radius-lg);
  }
  .rounded-sm-pill {
    border-radius: var(--prograss-pill);
  }
}
@media (min-width: 56.25rem) {
  .d-md-none {
    display: none;
  }
  .d-md-inline {
    display: inline;
  }
  .d-md-inline-block {
    display: inline-block;
  }
  .d-md-block {
    display: block;
  }
  .d-md-grid {
    display: grid;
  }
  .d-md-flex {
    display: flex;
  }
  .d-md-inline-flex {
    display: inline-flex;
  }
  .flex-md-row {
    flex-direction: row;
  }
  .flex-md-column {
    flex-direction: column;
  }
  .flex-md-row-reverse {
    flex-direction: row-reverse;
  }
  .flex-md-column-reverse {
    flex-direction: column-reverse;
  }
  .justify-content-md-start {
    justify-content: flex-start;
  }
  .justify-content-md-end {
    justify-content: flex-end;
  }
  .justify-content-md-center {
    justify-content: center;
  }
  .justify-content-md-between {
    justify-content: space-between;
  }
  .align-items-md-start {
    align-items: flex-start;
  }
  .align-items-md-end {
    align-items: flex-end;
  }
  .align-items-md-center {
    align-items: center;
  }
  .align-items-md-baseline {
    align-items: baseline;
  }
  .align-items-md-stretch {
    align-items: stretch;
  }
  .gap-md-0 {
    gap: 0;
  }
  .gap-md-1 {
    gap: var(--space-1);
  }
  .gap-md-2 {
    gap: var(--space-2);
  }
  .gap-md-3 {
    gap: var(--space-3);
  }
  .gap-md-4 {
    gap: var(--space-4);
  }
  .gap-md-5 {
    gap: var(--space-5);
  }
  .gap-md-6 {
    gap: var(--prograss-space-6);
  }
  .gap-md-8 {
    gap: var(--space-2);
  }
  .gap-md-10 {
    gap: var(--prograss-space-10);
  }
  .gap-md-11 {
    gap: var(--prograss-space-11);
  }
  .gap-md-12 {
    gap: var(--prograss-space-12);
  }
  .gap-md-14 {
    gap: var(--prograss-space-14);
  }
  .gap-md-16 {
    gap: var(--space-3);
  }
  .gap-md-18 {
    gap: var(--prograss-space-18);
  }
  .gap-md-20 {
    gap: var(--prograss-space-20);
  }
  .gap-md-22 {
    gap: var(--prograss-space-22);
  }
  .gap-md-24 {
    gap: var(--space-4);
  }
  .gap-md-26 {
    gap: var(--prograss-space-26);
  }
  .gap-md-28 {
    gap: var(--prograss-space-28);
  }
  .gap-md-32 {
    gap: var(--prograss-space-32);
  }
  .gap-md-36 {
    gap: var(--prograss-space-36);
  }
  .gap-md-40 {
    gap: var(--prograss-space-40);
  }
  .gap-md-44 {
    gap: var(--prograss-space-44);
  }
  .gap-md-48 {
    gap: var(--space-5);
  }
  .gap-md-56 {
    gap: var(--prograss-space-56);
  }
  .gap-md-64 {
    gap: var(--prograss-space-64);
  }
  .gap-md-72 {
    gap: var(--prograss-space-72);
  }
  .gap-md-80 {
    gap: var(--prograss-space-80);
  }
  .gap-md-88 {
    gap: var(--prograss-space-88);
  }
  .gap-md-96 {
    gap: var(--prograss-space-96);
  }
  .gap-md-100 {
    gap: var(--prograss-space-100);
  }
  .gap-md-110 {
    gap: var(--prograss-space-110);
  }
  .row-gap-md-0 {
    row-gap: 0;
  }
  .row-gap-md-1 {
    row-gap: var(--space-1);
  }
  .row-gap-md-2 {
    row-gap: var(--space-2);
  }
  .row-gap-md-3 {
    row-gap: var(--space-3);
  }
  .row-gap-md-4 {
    row-gap: var(--space-4);
  }
  .row-gap-md-5 {
    row-gap: var(--space-5);
  }
  .row-gap-md-6 {
    row-gap: var(--prograss-space-6);
  }
  .row-gap-md-8 {
    row-gap: var(--space-2);
  }
  .row-gap-md-10 {
    row-gap: var(--prograss-space-10);
  }
  .row-gap-md-11 {
    row-gap: var(--prograss-space-11);
  }
  .row-gap-md-12 {
    row-gap: var(--prograss-space-12);
  }
  .row-gap-md-14 {
    row-gap: var(--prograss-space-14);
  }
  .row-gap-md-16 {
    row-gap: var(--space-3);
  }
  .row-gap-md-18 {
    row-gap: var(--prograss-space-18);
  }
  .row-gap-md-20 {
    row-gap: var(--prograss-space-20);
  }
  .row-gap-md-22 {
    row-gap: var(--prograss-space-22);
  }
  .row-gap-md-24 {
    row-gap: var(--space-4);
  }
  .row-gap-md-26 {
    row-gap: var(--prograss-space-26);
  }
  .row-gap-md-28 {
    row-gap: var(--prograss-space-28);
  }
  .row-gap-md-32 {
    row-gap: var(--prograss-space-32);
  }
  .row-gap-md-36 {
    row-gap: var(--prograss-space-36);
  }
  .row-gap-md-40 {
    row-gap: var(--prograss-space-40);
  }
  .row-gap-md-44 {
    row-gap: var(--prograss-space-44);
  }
  .row-gap-md-48 {
    row-gap: var(--space-5);
  }
  .row-gap-md-56 {
    row-gap: var(--prograss-space-56);
  }
  .row-gap-md-64 {
    row-gap: var(--prograss-space-64);
  }
  .row-gap-md-72 {
    row-gap: var(--prograss-space-72);
  }
  .row-gap-md-80 {
    row-gap: var(--prograss-space-80);
  }
  .row-gap-md-88 {
    row-gap: var(--prograss-space-88);
  }
  .row-gap-md-96 {
    row-gap: var(--prograss-space-96);
  }
  .row-gap-md-100 {
    row-gap: var(--prograss-space-100);
  }
  .row-gap-md-110 {
    row-gap: var(--prograss-space-110);
  }
  .column-gap-md-0 {
    column-gap: 0;
  }
  .column-gap-md-1 {
    column-gap: var(--space-1);
  }
  .column-gap-md-2 {
    column-gap: var(--space-2);
  }
  .column-gap-md-3 {
    column-gap: var(--space-3);
  }
  .column-gap-md-4 {
    column-gap: var(--space-4);
  }
  .column-gap-md-5 {
    column-gap: var(--space-5);
  }
  .column-gap-md-6 {
    column-gap: var(--prograss-space-6);
  }
  .column-gap-md-8 {
    column-gap: var(--space-2);
  }
  .column-gap-md-10 {
    column-gap: var(--prograss-space-10);
  }
  .column-gap-md-11 {
    column-gap: var(--prograss-space-11);
  }
  .column-gap-md-12 {
    column-gap: var(--prograss-space-12);
  }
  .column-gap-md-14 {
    column-gap: var(--prograss-space-14);
  }
  .column-gap-md-16 {
    column-gap: var(--space-3);
  }
  .column-gap-md-18 {
    column-gap: var(--prograss-space-18);
  }
  .column-gap-md-20 {
    column-gap: var(--prograss-space-20);
  }
  .column-gap-md-22 {
    column-gap: var(--prograss-space-22);
  }
  .column-gap-md-24 {
    column-gap: var(--space-4);
  }
  .column-gap-md-26 {
    column-gap: var(--prograss-space-26);
  }
  .column-gap-md-28 {
    column-gap: var(--prograss-space-28);
  }
  .column-gap-md-32 {
    column-gap: var(--prograss-space-32);
  }
  .column-gap-md-36 {
    column-gap: var(--prograss-space-36);
  }
  .column-gap-md-40 {
    column-gap: var(--prograss-space-40);
  }
  .column-gap-md-44 {
    column-gap: var(--prograss-space-44);
  }
  .column-gap-md-48 {
    column-gap: var(--space-5);
  }
  .column-gap-md-56 {
    column-gap: var(--prograss-space-56);
  }
  .column-gap-md-64 {
    column-gap: var(--prograss-space-64);
  }
  .column-gap-md-72 {
    column-gap: var(--prograss-space-72);
  }
  .column-gap-md-80 {
    column-gap: var(--prograss-space-80);
  }
  .column-gap-md-88 {
    column-gap: var(--prograss-space-88);
  }
  .column-gap-md-96 {
    column-gap: var(--prograss-space-96);
  }
  .column-gap-md-100 {
    column-gap: var(--prograss-space-100);
  }
  .column-gap-md-110 {
    column-gap: var(--prograss-space-110);
  }
  .m-md-0 {
    margin: 0;
  }
  .m-md-1 {
    margin: var(--space-1);
  }
  .m-md-2 {
    margin: var(--space-2);
  }
  .m-md-3 {
    margin: var(--space-3);
  }
  .m-md-4 {
    margin: var(--space-4);
  }
  .m-md-5 {
    margin: var(--space-5);
  }
  .m-md-6 {
    margin: var(--prograss-space-6);
  }
  .m-md-8 {
    margin: var(--space-2);
  }
  .m-md-10 {
    margin: var(--prograss-space-10);
  }
  .m-md-11 {
    margin: var(--prograss-space-11);
  }
  .m-md-12 {
    margin: var(--prograss-space-12);
  }
  .m-md-14 {
    margin: var(--prograss-space-14);
  }
  .m-md-16 {
    margin: var(--space-3);
  }
  .m-md-18 {
    margin: var(--prograss-space-18);
  }
  .m-md-20 {
    margin: var(--prograss-space-20);
  }
  .m-md-22 {
    margin: var(--prograss-space-22);
  }
  .m-md-24 {
    margin: var(--space-4);
  }
  .m-md-26 {
    margin: var(--prograss-space-26);
  }
  .m-md-28 {
    margin: var(--prograss-space-28);
  }
  .m-md-32 {
    margin: var(--prograss-space-32);
  }
  .m-md-36 {
    margin: var(--prograss-space-36);
  }
  .m-md-40 {
    margin: var(--prograss-space-40);
  }
  .m-md-44 {
    margin: var(--prograss-space-44);
  }
  .m-md-48 {
    margin: var(--space-5);
  }
  .m-md-56 {
    margin: var(--prograss-space-56);
  }
  .m-md-64 {
    margin: var(--prograss-space-64);
  }
  .m-md-72 {
    margin: var(--prograss-space-72);
  }
  .m-md-80 {
    margin: var(--prograss-space-80);
  }
  .m-md-88 {
    margin: var(--prograss-space-88);
  }
  .m-md-96 {
    margin: var(--prograss-space-96);
  }
  .m-md-100 {
    margin: var(--prograss-space-100);
  }
  .m-md-110 {
    margin: var(--prograss-space-110);
  }
  .m-md-auto {
    margin: auto;
  }
  .mx-md-0 {
    margin-left: 0;
    margin-right: 0;
  }
  .mx-md-1 {
    margin-left: var(--space-1);
    margin-right: var(--space-1);
  }
  .mx-md-2 {
    margin-left: var(--space-2);
    margin-right: var(--space-2);
  }
  .mx-md-3 {
    margin-left: var(--space-3);
    margin-right: var(--space-3);
  }
  .mx-md-4 {
    margin-left: var(--space-4);
    margin-right: var(--space-4);
  }
  .mx-md-5 {
    margin-left: var(--space-5);
    margin-right: var(--space-5);
  }
  .mx-md-6 {
    margin-left: var(--prograss-space-6);
    margin-right: var(--prograss-space-6);
  }
  .mx-md-8 {
    margin-left: var(--space-2);
    margin-right: var(--space-2);
  }
  .mx-md-10 {
    margin-left: var(--prograss-space-10);
    margin-right: var(--prograss-space-10);
  }
  .mx-md-11 {
    margin-left: var(--prograss-space-11);
    margin-right: var(--prograss-space-11);
  }
  .mx-md-12 {
    margin-left: var(--prograss-space-12);
    margin-right: var(--prograss-space-12);
  }
  .mx-md-14 {
    margin-left: var(--prograss-space-14);
    margin-right: var(--prograss-space-14);
  }
  .mx-md-16 {
    margin-left: var(--space-3);
    margin-right: var(--space-3);
  }
  .mx-md-18 {
    margin-left: var(--prograss-space-18);
    margin-right: var(--prograss-space-18);
  }
  .mx-md-20 {
    margin-left: var(--prograss-space-20);
    margin-right: var(--prograss-space-20);
  }
  .mx-md-22 {
    margin-left: var(--prograss-space-22);
    margin-right: var(--prograss-space-22);
  }
  .mx-md-24 {
    margin-left: var(--space-4);
    margin-right: var(--space-4);
  }
  .mx-md-26 {
    margin-left: var(--prograss-space-26);
    margin-right: var(--prograss-space-26);
  }
  .mx-md-28 {
    margin-left: var(--prograss-space-28);
    margin-right: var(--prograss-space-28);
  }
  .mx-md-32 {
    margin-left: var(--prograss-space-32);
    margin-right: var(--prograss-space-32);
  }
  .mx-md-36 {
    margin-left: var(--prograss-space-36);
    margin-right: var(--prograss-space-36);
  }
  .mx-md-40 {
    margin-left: var(--prograss-space-40);
    margin-right: var(--prograss-space-40);
  }
  .mx-md-44 {
    margin-left: var(--prograss-space-44);
    margin-right: var(--prograss-space-44);
  }
  .mx-md-48 {
    margin-left: var(--space-5);
    margin-right: var(--space-5);
  }
  .mx-md-56 {
    margin-left: var(--prograss-space-56);
    margin-right: var(--prograss-space-56);
  }
  .mx-md-64 {
    margin-left: var(--prograss-space-64);
    margin-right: var(--prograss-space-64);
  }
  .mx-md-72 {
    margin-left: var(--prograss-space-72);
    margin-right: var(--prograss-space-72);
  }
  .mx-md-80 {
    margin-left: var(--prograss-space-80);
    margin-right: var(--prograss-space-80);
  }
  .mx-md-88 {
    margin-left: var(--prograss-space-88);
    margin-right: var(--prograss-space-88);
  }
  .mx-md-96 {
    margin-left: var(--prograss-space-96);
    margin-right: var(--prograss-space-96);
  }
  .mx-md-100 {
    margin-left: var(--prograss-space-100);
    margin-right: var(--prograss-space-100);
  }
  .mx-md-110 {
    margin-left: var(--prograss-space-110);
    margin-right: var(--prograss-space-110);
  }
  .mx-md-auto {
    margin-left: auto;
    margin-right: auto;
  }
  .my-md-0 {
    margin-top: 0;
    margin-bottom: 0;
  }
  .my-md-1 {
    margin-top: var(--space-1);
    margin-bottom: var(--space-1);
  }
  .my-md-2 {
    margin-top: var(--space-2);
    margin-bottom: var(--space-2);
  }
  .my-md-3 {
    margin-top: var(--space-3);
    margin-bottom: var(--space-3);
  }
  .my-md-4 {
    margin-top: var(--space-4);
    margin-bottom: var(--space-4);
  }
  .my-md-5 {
    margin-top: var(--space-5);
    margin-bottom: var(--space-5);
  }
  .my-md-6 {
    margin-top: var(--prograss-space-6);
    margin-bottom: var(--prograss-space-6);
  }
  .my-md-8 {
    margin-top: var(--space-2);
    margin-bottom: var(--space-2);
  }
  .my-md-10 {
    margin-top: var(--prograss-space-10);
    margin-bottom: var(--prograss-space-10);
  }
  .my-md-11 {
    margin-top: var(--prograss-space-11);
    margin-bottom: var(--prograss-space-11);
  }
  .my-md-12 {
    margin-top: var(--prograss-space-12);
    margin-bottom: var(--prograss-space-12);
  }
  .my-md-14 {
    margin-top: var(--prograss-space-14);
    margin-bottom: var(--prograss-space-14);
  }
  .my-md-16 {
    margin-top: var(--space-3);
    margin-bottom: var(--space-3);
  }
  .my-md-18 {
    margin-top: var(--prograss-space-18);
    margin-bottom: var(--prograss-space-18);
  }
  .my-md-20 {
    margin-top: var(--prograss-space-20);
    margin-bottom: var(--prograss-space-20);
  }
  .my-md-22 {
    margin-top: var(--prograss-space-22);
    margin-bottom: var(--prograss-space-22);
  }
  .my-md-24 {
    margin-top: var(--space-4);
    margin-bottom: var(--space-4);
  }
  .my-md-26 {
    margin-top: var(--prograss-space-26);
    margin-bottom: var(--prograss-space-26);
  }
  .my-md-28 {
    margin-top: var(--prograss-space-28);
    margin-bottom: var(--prograss-space-28);
  }
  .my-md-32 {
    margin-top: var(--prograss-space-32);
    margin-bottom: var(--prograss-space-32);
  }
  .my-md-36 {
    margin-top: var(--prograss-space-36);
    margin-bottom: var(--prograss-space-36);
  }
  .my-md-40 {
    margin-top: var(--prograss-space-40);
    margin-bottom: var(--prograss-space-40);
  }
  .my-md-44 {
    margin-top: var(--prograss-space-44);
    margin-bottom: var(--prograss-space-44);
  }
  .my-md-48 {
    margin-top: var(--space-5);
    margin-bottom: var(--space-5);
  }
  .my-md-56 {
    margin-top: var(--prograss-space-56);
    margin-bottom: var(--prograss-space-56);
  }
  .my-md-64 {
    margin-top: var(--prograss-space-64);
    margin-bottom: var(--prograss-space-64);
  }
  .my-md-72 {
    margin-top: var(--prograss-space-72);
    margin-bottom: var(--prograss-space-72);
  }
  .my-md-80 {
    margin-top: var(--prograss-space-80);
    margin-bottom: var(--prograss-space-80);
  }
  .my-md-88 {
    margin-top: var(--prograss-space-88);
    margin-bottom: var(--prograss-space-88);
  }
  .my-md-96 {
    margin-top: var(--prograss-space-96);
    margin-bottom: var(--prograss-space-96);
  }
  .my-md-100 {
    margin-top: var(--prograss-space-100);
    margin-bottom: var(--prograss-space-100);
  }
  .my-md-110 {
    margin-top: var(--prograss-space-110);
    margin-bottom: var(--prograss-space-110);
  }
  .my-md-auto {
    margin-top: auto;
    margin-bottom: auto;
  }
  .mt-md-0 {
    margin-top: 0;
  }
  .mt-md-1 {
    margin-top: var(--space-1);
  }
  .mt-md-2 {
    margin-top: var(--space-2);
  }
  .mt-md-3 {
    margin-top: var(--space-3);
  }
  .mt-md-4 {
    margin-top: var(--space-4);
  }
  .mt-md-5 {
    margin-top: var(--space-5);
  }
  .mt-md-6 {
    margin-top: var(--prograss-space-6);
  }
  .mt-md-8 {
    margin-top: var(--space-2);
  }
  .mt-md-10 {
    margin-top: var(--prograss-space-10);
  }
  .mt-md-11 {
    margin-top: var(--prograss-space-11);
  }
  .mt-md-12 {
    margin-top: var(--prograss-space-12);
  }
  .mt-md-14 {
    margin-top: var(--prograss-space-14);
  }
  .mt-md-16 {
    margin-top: var(--space-3);
  }
  .mt-md-18 {
    margin-top: var(--prograss-space-18);
  }
  .mt-md-20 {
    margin-top: var(--prograss-space-20);
  }
  .mt-md-22 {
    margin-top: var(--prograss-space-22);
  }
  .mt-md-24 {
    margin-top: var(--space-4);
  }
  .mt-md-26 {
    margin-top: var(--prograss-space-26);
  }
  .mt-md-28 {
    margin-top: var(--prograss-space-28);
  }
  .mt-md-32 {
    margin-top: var(--prograss-space-32);
  }
  .mt-md-36 {
    margin-top: var(--prograss-space-36);
  }
  .mt-md-40 {
    margin-top: var(--prograss-space-40);
  }
  .mt-md-44 {
    margin-top: var(--prograss-space-44);
  }
  .mt-md-48 {
    margin-top: var(--space-5);
  }
  .mt-md-56 {
    margin-top: var(--prograss-space-56);
  }
  .mt-md-64 {
    margin-top: var(--prograss-space-64);
  }
  .mt-md-72 {
    margin-top: var(--prograss-space-72);
  }
  .mt-md-80 {
    margin-top: var(--prograss-space-80);
  }
  .mt-md-88 {
    margin-top: var(--prograss-space-88);
  }
  .mt-md-96 {
    margin-top: var(--prograss-space-96);
  }
  .mt-md-100 {
    margin-top: var(--prograss-space-100);
  }
  .mt-md-110 {
    margin-top: var(--prograss-space-110);
  }
  .mt-md-auto {
    margin-top: auto;
  }
  .me-md-0 {
    margin-right: 0;
  }
  .me-md-1 {
    margin-right: var(--space-1);
  }
  .me-md-2 {
    margin-right: var(--space-2);
  }
  .me-md-3 {
    margin-right: var(--space-3);
  }
  .me-md-4 {
    margin-right: var(--space-4);
  }
  .me-md-5 {
    margin-right: var(--space-5);
  }
  .me-md-6 {
    margin-right: var(--prograss-space-6);
  }
  .me-md-8 {
    margin-right: var(--space-2);
  }
  .me-md-10 {
    margin-right: var(--prograss-space-10);
  }
  .me-md-11 {
    margin-right: var(--prograss-space-11);
  }
  .me-md-12 {
    margin-right: var(--prograss-space-12);
  }
  .me-md-14 {
    margin-right: var(--prograss-space-14);
  }
  .me-md-16 {
    margin-right: var(--space-3);
  }
  .me-md-18 {
    margin-right: var(--prograss-space-18);
  }
  .me-md-20 {
    margin-right: var(--prograss-space-20);
  }
  .me-md-22 {
    margin-right: var(--prograss-space-22);
  }
  .me-md-24 {
    margin-right: var(--space-4);
  }
  .me-md-26 {
    margin-right: var(--prograss-space-26);
  }
  .me-md-28 {
    margin-right: var(--prograss-space-28);
  }
  .me-md-32 {
    margin-right: var(--prograss-space-32);
  }
  .me-md-36 {
    margin-right: var(--prograss-space-36);
  }
  .me-md-40 {
    margin-right: var(--prograss-space-40);
  }
  .me-md-44 {
    margin-right: var(--prograss-space-44);
  }
  .me-md-48 {
    margin-right: var(--space-5);
  }
  .me-md-56 {
    margin-right: var(--prograss-space-56);
  }
  .me-md-64 {
    margin-right: var(--prograss-space-64);
  }
  .me-md-72 {
    margin-right: var(--prograss-space-72);
  }
  .me-md-80 {
    margin-right: var(--prograss-space-80);
  }
  .me-md-88 {
    margin-right: var(--prograss-space-88);
  }
  .me-md-96 {
    margin-right: var(--prograss-space-96);
  }
  .me-md-100 {
    margin-right: var(--prograss-space-100);
  }
  .me-md-110 {
    margin-right: var(--prograss-space-110);
  }
  .me-md-auto {
    margin-right: auto;
  }
  .mb-md-0 {
    margin-bottom: 0;
  }
  .mb-md-1 {
    margin-bottom: var(--space-1);
  }
  .mb-md-2 {
    margin-bottom: var(--space-2);
  }
  .mb-md-3 {
    margin-bottom: var(--space-3);
  }
  .mb-md-4 {
    margin-bottom: var(--space-4);
  }
  .mb-md-5 {
    margin-bottom: var(--space-5);
  }
  .mb-md-6 {
    margin-bottom: var(--prograss-space-6);
  }
  .mb-md-8 {
    margin-bottom: var(--space-2);
  }
  .mb-md-10 {
    margin-bottom: var(--prograss-space-10);
  }
  .mb-md-11 {
    margin-bottom: var(--prograss-space-11);
  }
  .mb-md-12 {
    margin-bottom: var(--prograss-space-12);
  }
  .mb-md-14 {
    margin-bottom: var(--prograss-space-14);
  }
  .mb-md-16 {
    margin-bottom: var(--space-3);
  }
  .mb-md-18 {
    margin-bottom: var(--prograss-space-18);
  }
  .mb-md-20 {
    margin-bottom: var(--prograss-space-20);
  }
  .mb-md-22 {
    margin-bottom: var(--prograss-space-22);
  }
  .mb-md-24 {
    margin-bottom: var(--space-4);
  }
  .mb-md-26 {
    margin-bottom: var(--prograss-space-26);
  }
  .mb-md-28 {
    margin-bottom: var(--prograss-space-28);
  }
  .mb-md-32 {
    margin-bottom: var(--prograss-space-32);
  }
  .mb-md-36 {
    margin-bottom: var(--prograss-space-36);
  }
  .mb-md-40 {
    margin-bottom: var(--prograss-space-40);
  }
  .mb-md-44 {
    margin-bottom: var(--prograss-space-44);
  }
  .mb-md-48 {
    margin-bottom: var(--space-5);
  }
  .mb-md-56 {
    margin-bottom: var(--prograss-space-56);
  }
  .mb-md-64 {
    margin-bottom: var(--prograss-space-64);
  }
  .mb-md-72 {
    margin-bottom: var(--prograss-space-72);
  }
  .mb-md-80 {
    margin-bottom: var(--prograss-space-80);
  }
  .mb-md-88 {
    margin-bottom: var(--prograss-space-88);
  }
  .mb-md-96 {
    margin-bottom: var(--prograss-space-96);
  }
  .mb-md-100 {
    margin-bottom: var(--prograss-space-100);
  }
  .mb-md-110 {
    margin-bottom: var(--prograss-space-110);
  }
  .mb-md-auto {
    margin-bottom: auto;
  }
  .ms-md-0 {
    margin-left: 0;
  }
  .ms-md-1 {
    margin-left: var(--space-1);
  }
  .ms-md-2 {
    margin-left: var(--space-2);
  }
  .ms-md-3 {
    margin-left: var(--space-3);
  }
  .ms-md-4 {
    margin-left: var(--space-4);
  }
  .ms-md-5 {
    margin-left: var(--space-5);
  }
  .ms-md-6 {
    margin-left: var(--prograss-space-6);
  }
  .ms-md-8 {
    margin-left: var(--space-2);
  }
  .ms-md-10 {
    margin-left: var(--prograss-space-10);
  }
  .ms-md-11 {
    margin-left: var(--prograss-space-11);
  }
  .ms-md-12 {
    margin-left: var(--prograss-space-12);
  }
  .ms-md-14 {
    margin-left: var(--prograss-space-14);
  }
  .ms-md-16 {
    margin-left: var(--space-3);
  }
  .ms-md-18 {
    margin-left: var(--prograss-space-18);
  }
  .ms-md-20 {
    margin-left: var(--prograss-space-20);
  }
  .ms-md-22 {
    margin-left: var(--prograss-space-22);
  }
  .ms-md-24 {
    margin-left: var(--space-4);
  }
  .ms-md-26 {
    margin-left: var(--prograss-space-26);
  }
  .ms-md-28 {
    margin-left: var(--prograss-space-28);
  }
  .ms-md-32 {
    margin-left: var(--prograss-space-32);
  }
  .ms-md-36 {
    margin-left: var(--prograss-space-36);
  }
  .ms-md-40 {
    margin-left: var(--prograss-space-40);
  }
  .ms-md-44 {
    margin-left: var(--prograss-space-44);
  }
  .ms-md-48 {
    margin-left: var(--space-5);
  }
  .ms-md-56 {
    margin-left: var(--prograss-space-56);
  }
  .ms-md-64 {
    margin-left: var(--prograss-space-64);
  }
  .ms-md-72 {
    margin-left: var(--prograss-space-72);
  }
  .ms-md-80 {
    margin-left: var(--prograss-space-80);
  }
  .ms-md-88 {
    margin-left: var(--prograss-space-88);
  }
  .ms-md-96 {
    margin-left: var(--prograss-space-96);
  }
  .ms-md-100 {
    margin-left: var(--prograss-space-100);
  }
  .ms-md-110 {
    margin-left: var(--prograss-space-110);
  }
  .ms-md-auto {
    margin-left: auto;
  }
  .p-md-0 {
    padding: 0;
  }
  .p-md-1 {
    padding: var(--space-1);
  }
  .p-md-2 {
    padding: var(--space-2);
  }
  .p-md-3 {
    padding: var(--space-3);
  }
  .p-md-4 {
    padding: var(--space-4);
  }
  .p-md-5 {
    padding: var(--space-5);
  }
  .p-md-6 {
    padding: var(--prograss-space-6);
  }
  .p-md-8 {
    padding: var(--space-2);
  }
  .p-md-10 {
    padding: var(--prograss-space-10);
  }
  .p-md-11 {
    padding: var(--prograss-space-11);
  }
  .p-md-12 {
    padding: var(--prograss-space-12);
  }
  .p-md-14 {
    padding: var(--prograss-space-14);
  }
  .p-md-16 {
    padding: var(--space-3);
  }
  .p-md-18 {
    padding: var(--prograss-space-18);
  }
  .p-md-20 {
    padding: var(--prograss-space-20);
  }
  .p-md-22 {
    padding: var(--prograss-space-22);
  }
  .p-md-24 {
    padding: var(--space-4);
  }
  .p-md-26 {
    padding: var(--prograss-space-26);
  }
  .p-md-28 {
    padding: var(--prograss-space-28);
  }
  .p-md-32 {
    padding: var(--prograss-space-32);
  }
  .p-md-36 {
    padding: var(--prograss-space-36);
  }
  .p-md-40 {
    padding: var(--prograss-space-40);
  }
  .p-md-44 {
    padding: var(--prograss-space-44);
  }
  .p-md-48 {
    padding: var(--space-5);
  }
  .p-md-56 {
    padding: var(--prograss-space-56);
  }
  .p-md-64 {
    padding: var(--prograss-space-64);
  }
  .p-md-72 {
    padding: var(--prograss-space-72);
  }
  .p-md-80 {
    padding: var(--prograss-space-80);
  }
  .p-md-88 {
    padding: var(--prograss-space-88);
  }
  .p-md-96 {
    padding: var(--prograss-space-96);
  }
  .p-md-100 {
    padding: var(--prograss-space-100);
  }
  .p-md-110 {
    padding: var(--prograss-space-110);
  }
  .px-md-0 {
    padding-left: 0;
    padding-right: 0;
  }
  .px-md-1 {
    padding-left: var(--space-1);
    padding-right: var(--space-1);
  }
  .px-md-2 {
    padding-left: var(--space-2);
    padding-right: var(--space-2);
  }
  .px-md-3 {
    padding-left: var(--space-3);
    padding-right: var(--space-3);
  }
  .px-md-4 {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }
  .px-md-5 {
    padding-left: var(--space-5);
    padding-right: var(--space-5);
  }
  .px-md-6 {
    padding-left: var(--prograss-space-6);
    padding-right: var(--prograss-space-6);
  }
  .px-md-8 {
    padding-left: var(--space-2);
    padding-right: var(--space-2);
  }
  .px-md-10 {
    padding-left: var(--prograss-space-10);
    padding-right: var(--prograss-space-10);
  }
  .px-md-11 {
    padding-left: var(--prograss-space-11);
    padding-right: var(--prograss-space-11);
  }
  .px-md-12 {
    padding-left: var(--prograss-space-12);
    padding-right: var(--prograss-space-12);
  }
  .px-md-14 {
    padding-left: var(--prograss-space-14);
    padding-right: var(--prograss-space-14);
  }
  .px-md-16 {
    padding-left: var(--space-3);
    padding-right: var(--space-3);
  }
  .px-md-18 {
    padding-left: var(--prograss-space-18);
    padding-right: var(--prograss-space-18);
  }
  .px-md-20 {
    padding-left: var(--prograss-space-20);
    padding-right: var(--prograss-space-20);
  }
  .px-md-22 {
    padding-left: var(--prograss-space-22);
    padding-right: var(--prograss-space-22);
  }
  .px-md-24 {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }
  .px-md-26 {
    padding-left: var(--prograss-space-26);
    padding-right: var(--prograss-space-26);
  }
  .px-md-28 {
    padding-left: var(--prograss-space-28);
    padding-right: var(--prograss-space-28);
  }
  .px-md-32 {
    padding-left: var(--prograss-space-32);
    padding-right: var(--prograss-space-32);
  }
  .px-md-36 {
    padding-left: var(--prograss-space-36);
    padding-right: var(--prograss-space-36);
  }
  .px-md-40 {
    padding-left: var(--prograss-space-40);
    padding-right: var(--prograss-space-40);
  }
  .px-md-44 {
    padding-left: var(--prograss-space-44);
    padding-right: var(--prograss-space-44);
  }
  .px-md-48 {
    padding-left: var(--space-5);
    padding-right: var(--space-5);
  }
  .px-md-56 {
    padding-left: var(--prograss-space-56);
    padding-right: var(--prograss-space-56);
  }
  .px-md-64 {
    padding-left: var(--prograss-space-64);
    padding-right: var(--prograss-space-64);
  }
  .px-md-72 {
    padding-left: var(--prograss-space-72);
    padding-right: var(--prograss-space-72);
  }
  .px-md-80 {
    padding-left: var(--prograss-space-80);
    padding-right: var(--prograss-space-80);
  }
  .px-md-88 {
    padding-left: var(--prograss-space-88);
    padding-right: var(--prograss-space-88);
  }
  .px-md-96 {
    padding-left: var(--prograss-space-96);
    padding-right: var(--prograss-space-96);
  }
  .px-md-100 {
    padding-left: var(--prograss-space-100);
    padding-right: var(--prograss-space-100);
  }
  .px-md-110 {
    padding-left: var(--prograss-space-110);
    padding-right: var(--prograss-space-110);
  }
  .py-md-0 {
    padding-top: 0;
    padding-bottom: 0;
  }
  .py-md-1 {
    padding-top: var(--space-1);
    padding-bottom: var(--space-1);
  }
  .py-md-2 {
    padding-top: var(--space-2);
    padding-bottom: var(--space-2);
  }
  .py-md-3 {
    padding-top: var(--space-3);
    padding-bottom: var(--space-3);
  }
  .py-md-4 {
    padding-top: var(--space-4);
    padding-bottom: var(--space-4);
  }
  .py-md-5 {
    padding-top: var(--space-5);
    padding-bottom: var(--space-5);
  }
  .py-md-6 {
    padding-top: var(--prograss-space-6);
    padding-bottom: var(--prograss-space-6);
  }
  .py-md-8 {
    padding-top: var(--space-2);
    padding-bottom: var(--space-2);
  }
  .py-md-10 {
    padding-top: var(--prograss-space-10);
    padding-bottom: var(--prograss-space-10);
  }
  .py-md-11 {
    padding-top: var(--prograss-space-11);
    padding-bottom: var(--prograss-space-11);
  }
  .py-md-12 {
    padding-top: var(--prograss-space-12);
    padding-bottom: var(--prograss-space-12);
  }
  .py-md-14 {
    padding-top: var(--prograss-space-14);
    padding-bottom: var(--prograss-space-14);
  }
  .py-md-16 {
    padding-top: var(--space-3);
    padding-bottom: var(--space-3);
  }
  .py-md-18 {
    padding-top: var(--prograss-space-18);
    padding-bottom: var(--prograss-space-18);
  }
  .py-md-20 {
    padding-top: var(--prograss-space-20);
    padding-bottom: var(--prograss-space-20);
  }
  .py-md-22 {
    padding-top: var(--prograss-space-22);
    padding-bottom: var(--prograss-space-22);
  }
  .py-md-24 {
    padding-top: var(--space-4);
    padding-bottom: var(--space-4);
  }
  .py-md-26 {
    padding-top: var(--prograss-space-26);
    padding-bottom: var(--prograss-space-26);
  }
  .py-md-28 {
    padding-top: var(--prograss-space-28);
    padding-bottom: var(--prograss-space-28);
  }
  .py-md-32 {
    padding-top: var(--prograss-space-32);
    padding-bottom: var(--prograss-space-32);
  }
  .py-md-36 {
    padding-top: var(--prograss-space-36);
    padding-bottom: var(--prograss-space-36);
  }
  .py-md-40 {
    padding-top: var(--prograss-space-40);
    padding-bottom: var(--prograss-space-40);
  }
  .py-md-44 {
    padding-top: var(--prograss-space-44);
    padding-bottom: var(--prograss-space-44);
  }
  .py-md-48 {
    padding-top: var(--space-5);
    padding-bottom: var(--space-5);
  }
  .py-md-56 {
    padding-top: var(--prograss-space-56);
    padding-bottom: var(--prograss-space-56);
  }
  .py-md-64 {
    padding-top: var(--prograss-space-64);
    padding-bottom: var(--prograss-space-64);
  }
  .py-md-72 {
    padding-top: var(--prograss-space-72);
    padding-bottom: var(--prograss-space-72);
  }
  .py-md-80 {
    padding-top: var(--prograss-space-80);
    padding-bottom: var(--prograss-space-80);
  }
  .py-md-88 {
    padding-top: var(--prograss-space-88);
    padding-bottom: var(--prograss-space-88);
  }
  .py-md-96 {
    padding-top: var(--prograss-space-96);
    padding-bottom: var(--prograss-space-96);
  }
  .py-md-100 {
    padding-top: var(--prograss-space-100);
    padding-bottom: var(--prograss-space-100);
  }
  .py-md-110 {
    padding-top: var(--prograss-space-110);
    padding-bottom: var(--prograss-space-110);
  }
  .pt-md-0 {
    padding-top: 0;
  }
  .pt-md-1 {
    padding-top: var(--space-1);
  }
  .pt-md-2 {
    padding-top: var(--space-2);
  }
  .pt-md-3 {
    padding-top: var(--space-3);
  }
  .pt-md-4 {
    padding-top: var(--space-4);
  }
  .pt-md-5 {
    padding-top: var(--space-5);
  }
  .pt-md-6 {
    padding-top: var(--prograss-space-6);
  }
  .pt-md-8 {
    padding-top: var(--space-2);
  }
  .pt-md-10 {
    padding-top: var(--prograss-space-10);
  }
  .pt-md-11 {
    padding-top: var(--prograss-space-11);
  }
  .pt-md-12 {
    padding-top: var(--prograss-space-12);
  }
  .pt-md-14 {
    padding-top: var(--prograss-space-14);
  }
  .pt-md-16 {
    padding-top: var(--space-3);
  }
  .pt-md-18 {
    padding-top: var(--prograss-space-18);
  }
  .pt-md-20 {
    padding-top: var(--prograss-space-20);
  }
  .pt-md-22 {
    padding-top: var(--prograss-space-22);
  }
  .pt-md-24 {
    padding-top: var(--space-4);
  }
  .pt-md-26 {
    padding-top: var(--prograss-space-26);
  }
  .pt-md-28 {
    padding-top: var(--prograss-space-28);
  }
  .pt-md-32 {
    padding-top: var(--prograss-space-32);
  }
  .pt-md-36 {
    padding-top: var(--prograss-space-36);
  }
  .pt-md-40 {
    padding-top: var(--prograss-space-40);
  }
  .pt-md-44 {
    padding-top: var(--prograss-space-44);
  }
  .pt-md-48 {
    padding-top: var(--space-5);
  }
  .pt-md-56 {
    padding-top: var(--prograss-space-56);
  }
  .pt-md-64 {
    padding-top: var(--prograss-space-64);
  }
  .pt-md-72 {
    padding-top: var(--prograss-space-72);
  }
  .pt-md-80 {
    padding-top: var(--prograss-space-80);
  }
  .pt-md-88 {
    padding-top: var(--prograss-space-88);
  }
  .pt-md-96 {
    padding-top: var(--prograss-space-96);
  }
  .pt-md-100 {
    padding-top: var(--prograss-space-100);
  }
  .pt-md-110 {
    padding-top: var(--prograss-space-110);
  }
  .pe-md-0 {
    padding-right: 0;
  }
  .pe-md-1 {
    padding-right: var(--space-1);
  }
  .pe-md-2 {
    padding-right: var(--space-2);
  }
  .pe-md-3 {
    padding-right: var(--space-3);
  }
  .pe-md-4 {
    padding-right: var(--space-4);
  }
  .pe-md-5 {
    padding-right: var(--space-5);
  }
  .pe-md-6 {
    padding-right: var(--prograss-space-6);
  }
  .pe-md-8 {
    padding-right: var(--space-2);
  }
  .pe-md-10 {
    padding-right: var(--prograss-space-10);
  }
  .pe-md-11 {
    padding-right: var(--prograss-space-11);
  }
  .pe-md-12 {
    padding-right: var(--prograss-space-12);
  }
  .pe-md-14 {
    padding-right: var(--prograss-space-14);
  }
  .pe-md-16 {
    padding-right: var(--space-3);
  }
  .pe-md-18 {
    padding-right: var(--prograss-space-18);
  }
  .pe-md-20 {
    padding-right: var(--prograss-space-20);
  }
  .pe-md-22 {
    padding-right: var(--prograss-space-22);
  }
  .pe-md-24 {
    padding-right: var(--space-4);
  }
  .pe-md-26 {
    padding-right: var(--prograss-space-26);
  }
  .pe-md-28 {
    padding-right: var(--prograss-space-28);
  }
  .pe-md-32 {
    padding-right: var(--prograss-space-32);
  }
  .pe-md-36 {
    padding-right: var(--prograss-space-36);
  }
  .pe-md-40 {
    padding-right: var(--prograss-space-40);
  }
  .pe-md-44 {
    padding-right: var(--prograss-space-44);
  }
  .pe-md-48 {
    padding-right: var(--space-5);
  }
  .pe-md-56 {
    padding-right: var(--prograss-space-56);
  }
  .pe-md-64 {
    padding-right: var(--prograss-space-64);
  }
  .pe-md-72 {
    padding-right: var(--prograss-space-72);
  }
  .pe-md-80 {
    padding-right: var(--prograss-space-80);
  }
  .pe-md-88 {
    padding-right: var(--prograss-space-88);
  }
  .pe-md-96 {
    padding-right: var(--prograss-space-96);
  }
  .pe-md-100 {
    padding-right: var(--prograss-space-100);
  }
  .pe-md-110 {
    padding-right: var(--prograss-space-110);
  }
  .pb-md-0 {
    padding-bottom: 0;
  }
  .pb-md-1 {
    padding-bottom: var(--space-1);
  }
  .pb-md-2 {
    padding-bottom: var(--space-2);
  }
  .pb-md-3 {
    padding-bottom: var(--space-3);
  }
  .pb-md-4 {
    padding-bottom: var(--space-4);
  }
  .pb-md-5 {
    padding-bottom: var(--space-5);
  }
  .pb-md-6 {
    padding-bottom: var(--prograss-space-6);
  }
  .pb-md-8 {
    padding-bottom: var(--space-2);
  }
  .pb-md-10 {
    padding-bottom: var(--prograss-space-10);
  }
  .pb-md-11 {
    padding-bottom: var(--prograss-space-11);
  }
  .pb-md-12 {
    padding-bottom: var(--prograss-space-12);
  }
  .pb-md-14 {
    padding-bottom: var(--prograss-space-14);
  }
  .pb-md-16 {
    padding-bottom: var(--space-3);
  }
  .pb-md-18 {
    padding-bottom: var(--prograss-space-18);
  }
  .pb-md-20 {
    padding-bottom: var(--prograss-space-20);
  }
  .pb-md-22 {
    padding-bottom: var(--prograss-space-22);
  }
  .pb-md-24 {
    padding-bottom: var(--space-4);
  }
  .pb-md-26 {
    padding-bottom: var(--prograss-space-26);
  }
  .pb-md-28 {
    padding-bottom: var(--prograss-space-28);
  }
  .pb-md-32 {
    padding-bottom: var(--prograss-space-32);
  }
  .pb-md-36 {
    padding-bottom: var(--prograss-space-36);
  }
  .pb-md-40 {
    padding-bottom: var(--prograss-space-40);
  }
  .pb-md-44 {
    padding-bottom: var(--prograss-space-44);
  }
  .pb-md-48 {
    padding-bottom: var(--space-5);
  }
  .pb-md-56 {
    padding-bottom: var(--prograss-space-56);
  }
  .pb-md-64 {
    padding-bottom: var(--prograss-space-64);
  }
  .pb-md-72 {
    padding-bottom: var(--prograss-space-72);
  }
  .pb-md-80 {
    padding-bottom: var(--prograss-space-80);
  }
  .pb-md-88 {
    padding-bottom: var(--prograss-space-88);
  }
  .pb-md-96 {
    padding-bottom: var(--prograss-space-96);
  }
  .pb-md-100 {
    padding-bottom: var(--prograss-space-100);
  }
  .pb-md-110 {
    padding-bottom: var(--prograss-space-110);
  }
  .ps-md-0 {
    padding-left: 0;
  }
  .ps-md-1 {
    padding-left: var(--space-1);
  }
  .ps-md-2 {
    padding-left: var(--space-2);
  }
  .ps-md-3 {
    padding-left: var(--space-3);
  }
  .ps-md-4 {
    padding-left: var(--space-4);
  }
  .ps-md-5 {
    padding-left: var(--space-5);
  }
  .ps-md-6 {
    padding-left: var(--prograss-space-6);
  }
  .ps-md-8 {
    padding-left: var(--space-2);
  }
  .ps-md-10 {
    padding-left: var(--prograss-space-10);
  }
  .ps-md-11 {
    padding-left: var(--prograss-space-11);
  }
  .ps-md-12 {
    padding-left: var(--prograss-space-12);
  }
  .ps-md-14 {
    padding-left: var(--prograss-space-14);
  }
  .ps-md-16 {
    padding-left: var(--space-3);
  }
  .ps-md-18 {
    padding-left: var(--prograss-space-18);
  }
  .ps-md-20 {
    padding-left: var(--prograss-space-20);
  }
  .ps-md-22 {
    padding-left: var(--prograss-space-22);
  }
  .ps-md-24 {
    padding-left: var(--space-4);
  }
  .ps-md-26 {
    padding-left: var(--prograss-space-26);
  }
  .ps-md-28 {
    padding-left: var(--prograss-space-28);
  }
  .ps-md-32 {
    padding-left: var(--prograss-space-32);
  }
  .ps-md-36 {
    padding-left: var(--prograss-space-36);
  }
  .ps-md-40 {
    padding-left: var(--prograss-space-40);
  }
  .ps-md-44 {
    padding-left: var(--prograss-space-44);
  }
  .ps-md-48 {
    padding-left: var(--space-5);
  }
  .ps-md-56 {
    padding-left: var(--prograss-space-56);
  }
  .ps-md-64 {
    padding-left: var(--prograss-space-64);
  }
  .ps-md-72 {
    padding-left: var(--prograss-space-72);
  }
  .ps-md-80 {
    padding-left: var(--prograss-space-80);
  }
  .ps-md-88 {
    padding-left: var(--prograss-space-88);
  }
  .ps-md-96 {
    padding-left: var(--prograss-space-96);
  }
  .ps-md-100 {
    padding-left: var(--prograss-space-100);
  }
  .ps-md-110 {
    padding-left: var(--prograss-space-110);
  }
  .w-md-25 {
    width: 25%;
  }
  .w-md-50 {
    width: 50%;
  }
  .w-md-75 {
    width: 75%;
  }
  .w-md-100 {
    width: 100%;
  }
  .w-md-auto {
    width: auto;
  }
  .text-md-start {
    text-align: start;
  }
  .text-md-center {
    text-align: center;
  }
  .text-md-end {
    text-align: end;
  }
  .fs-md-13 {
    font-size: var(--prograss-text-13);
  }
  .fs-md-sm {
    font-size: var(--text-sm);
  }
  .fs-md-15 {
    font-size: var(--prograss-text-15);
  }
  .fs-md-base {
    font-size: var(--font-size);
  }
  .fs-md-lg {
    font-size: var(--text-lg);
  }
  .fs-md-19 {
    font-size: var(--prograss-text-19);
  }
  .fs-md-xl {
    font-size: var(--text-xl);
  }
  .fs-md-2xl {
    font-size: var(--text-2xl);
  }
  .fs-md-3xl {
    font-size: var(--text-3xl);
  }
  .fs-md-36 {
    font-size: var(--prograss-text-36);
  }
  .fs-md-40 {
    font-size: var(--prograss-text-40);
  }
  .fs-md-44 {
    font-size: var(--prograss-text-44);
  }
  .fs-md-48 {
    font-size: var(--prograss-text-48);
  }
  .fs-md-64 {
    font-size: var(--prograss-text-64);
  }
  .fs-md-4xl {
    font-size: var(--text-4xl);
  }
  .fs-md-5xl {
    font-size: var(--text-5xl);
  }
  .rounded-md {
    border-radius: var(--radius);
  }
  .rounded-md-0 {
    border-radius: 0;
  }
  .rounded-md-sm {
    border-radius: var(--radius-sm);
  }
  .rounded-md-lg {
    border-radius: var(--radius-lg);
  }
  .rounded-md-pill {
    border-radius: var(--prograss-pill);
  }
}
@media (min-width: 67.5rem) {
  .d-lg-none {
    display: none;
  }
  .d-lg-inline {
    display: inline;
  }
  .d-lg-inline-block {
    display: inline-block;
  }
  .d-lg-block {
    display: block;
  }
  .d-lg-grid {
    display: grid;
  }
  .d-lg-flex {
    display: flex;
  }
  .d-lg-inline-flex {
    display: inline-flex;
  }
  .flex-lg-row {
    flex-direction: row;
  }
  .flex-lg-column {
    flex-direction: column;
  }
  .flex-lg-row-reverse {
    flex-direction: row-reverse;
  }
  .flex-lg-column-reverse {
    flex-direction: column-reverse;
  }
  .justify-content-lg-start {
    justify-content: flex-start;
  }
  .justify-content-lg-end {
    justify-content: flex-end;
  }
  .justify-content-lg-center {
    justify-content: center;
  }
  .justify-content-lg-between {
    justify-content: space-between;
  }
  .align-items-lg-start {
    align-items: flex-start;
  }
  .align-items-lg-end {
    align-items: flex-end;
  }
  .align-items-lg-center {
    align-items: center;
  }
  .align-items-lg-baseline {
    align-items: baseline;
  }
  .align-items-lg-stretch {
    align-items: stretch;
  }
  .gap-lg-0 {
    gap: 0;
  }
  .gap-lg-1 {
    gap: var(--space-1);
  }
  .gap-lg-2 {
    gap: var(--space-2);
  }
  .gap-lg-3 {
    gap: var(--space-3);
  }
  .gap-lg-4 {
    gap: var(--space-4);
  }
  .gap-lg-5 {
    gap: var(--space-5);
  }
  .gap-lg-6 {
    gap: var(--prograss-space-6);
  }
  .gap-lg-8 {
    gap: var(--space-2);
  }
  .gap-lg-10 {
    gap: var(--prograss-space-10);
  }
  .gap-lg-11 {
    gap: var(--prograss-space-11);
  }
  .gap-lg-12 {
    gap: var(--prograss-space-12);
  }
  .gap-lg-14 {
    gap: var(--prograss-space-14);
  }
  .gap-lg-16 {
    gap: var(--space-3);
  }
  .gap-lg-18 {
    gap: var(--prograss-space-18);
  }
  .gap-lg-20 {
    gap: var(--prograss-space-20);
  }
  .gap-lg-22 {
    gap: var(--prograss-space-22);
  }
  .gap-lg-24 {
    gap: var(--space-4);
  }
  .gap-lg-26 {
    gap: var(--prograss-space-26);
  }
  .gap-lg-28 {
    gap: var(--prograss-space-28);
  }
  .gap-lg-32 {
    gap: var(--prograss-space-32);
  }
  .gap-lg-36 {
    gap: var(--prograss-space-36);
  }
  .gap-lg-40 {
    gap: var(--prograss-space-40);
  }
  .gap-lg-44 {
    gap: var(--prograss-space-44);
  }
  .gap-lg-48 {
    gap: var(--space-5);
  }
  .gap-lg-56 {
    gap: var(--prograss-space-56);
  }
  .gap-lg-64 {
    gap: var(--prograss-space-64);
  }
  .gap-lg-72 {
    gap: var(--prograss-space-72);
  }
  .gap-lg-80 {
    gap: var(--prograss-space-80);
  }
  .gap-lg-88 {
    gap: var(--prograss-space-88);
  }
  .gap-lg-96 {
    gap: var(--prograss-space-96);
  }
  .gap-lg-100 {
    gap: var(--prograss-space-100);
  }
  .gap-lg-110 {
    gap: var(--prograss-space-110);
  }
  .row-gap-lg-0 {
    row-gap: 0;
  }
  .row-gap-lg-1 {
    row-gap: var(--space-1);
  }
  .row-gap-lg-2 {
    row-gap: var(--space-2);
  }
  .row-gap-lg-3 {
    row-gap: var(--space-3);
  }
  .row-gap-lg-4 {
    row-gap: var(--space-4);
  }
  .row-gap-lg-5 {
    row-gap: var(--space-5);
  }
  .row-gap-lg-6 {
    row-gap: var(--prograss-space-6);
  }
  .row-gap-lg-8 {
    row-gap: var(--space-2);
  }
  .row-gap-lg-10 {
    row-gap: var(--prograss-space-10);
  }
  .row-gap-lg-11 {
    row-gap: var(--prograss-space-11);
  }
  .row-gap-lg-12 {
    row-gap: var(--prograss-space-12);
  }
  .row-gap-lg-14 {
    row-gap: var(--prograss-space-14);
  }
  .row-gap-lg-16 {
    row-gap: var(--space-3);
  }
  .row-gap-lg-18 {
    row-gap: var(--prograss-space-18);
  }
  .row-gap-lg-20 {
    row-gap: var(--prograss-space-20);
  }
  .row-gap-lg-22 {
    row-gap: var(--prograss-space-22);
  }
  .row-gap-lg-24 {
    row-gap: var(--space-4);
  }
  .row-gap-lg-26 {
    row-gap: var(--prograss-space-26);
  }
  .row-gap-lg-28 {
    row-gap: var(--prograss-space-28);
  }
  .row-gap-lg-32 {
    row-gap: var(--prograss-space-32);
  }
  .row-gap-lg-36 {
    row-gap: var(--prograss-space-36);
  }
  .row-gap-lg-40 {
    row-gap: var(--prograss-space-40);
  }
  .row-gap-lg-44 {
    row-gap: var(--prograss-space-44);
  }
  .row-gap-lg-48 {
    row-gap: var(--space-5);
  }
  .row-gap-lg-56 {
    row-gap: var(--prograss-space-56);
  }
  .row-gap-lg-64 {
    row-gap: var(--prograss-space-64);
  }
  .row-gap-lg-72 {
    row-gap: var(--prograss-space-72);
  }
  .row-gap-lg-80 {
    row-gap: var(--prograss-space-80);
  }
  .row-gap-lg-88 {
    row-gap: var(--prograss-space-88);
  }
  .row-gap-lg-96 {
    row-gap: var(--prograss-space-96);
  }
  .row-gap-lg-100 {
    row-gap: var(--prograss-space-100);
  }
  .row-gap-lg-110 {
    row-gap: var(--prograss-space-110);
  }
  .column-gap-lg-0 {
    column-gap: 0;
  }
  .column-gap-lg-1 {
    column-gap: var(--space-1);
  }
  .column-gap-lg-2 {
    column-gap: var(--space-2);
  }
  .column-gap-lg-3 {
    column-gap: var(--space-3);
  }
  .column-gap-lg-4 {
    column-gap: var(--space-4);
  }
  .column-gap-lg-5 {
    column-gap: var(--space-5);
  }
  .column-gap-lg-6 {
    column-gap: var(--prograss-space-6);
  }
  .column-gap-lg-8 {
    column-gap: var(--space-2);
  }
  .column-gap-lg-10 {
    column-gap: var(--prograss-space-10);
  }
  .column-gap-lg-11 {
    column-gap: var(--prograss-space-11);
  }
  .column-gap-lg-12 {
    column-gap: var(--prograss-space-12);
  }
  .column-gap-lg-14 {
    column-gap: var(--prograss-space-14);
  }
  .column-gap-lg-16 {
    column-gap: var(--space-3);
  }
  .column-gap-lg-18 {
    column-gap: var(--prograss-space-18);
  }
  .column-gap-lg-20 {
    column-gap: var(--prograss-space-20);
  }
  .column-gap-lg-22 {
    column-gap: var(--prograss-space-22);
  }
  .column-gap-lg-24 {
    column-gap: var(--space-4);
  }
  .column-gap-lg-26 {
    column-gap: var(--prograss-space-26);
  }
  .column-gap-lg-28 {
    column-gap: var(--prograss-space-28);
  }
  .column-gap-lg-32 {
    column-gap: var(--prograss-space-32);
  }
  .column-gap-lg-36 {
    column-gap: var(--prograss-space-36);
  }
  .column-gap-lg-40 {
    column-gap: var(--prograss-space-40);
  }
  .column-gap-lg-44 {
    column-gap: var(--prograss-space-44);
  }
  .column-gap-lg-48 {
    column-gap: var(--space-5);
  }
  .column-gap-lg-56 {
    column-gap: var(--prograss-space-56);
  }
  .column-gap-lg-64 {
    column-gap: var(--prograss-space-64);
  }
  .column-gap-lg-72 {
    column-gap: var(--prograss-space-72);
  }
  .column-gap-lg-80 {
    column-gap: var(--prograss-space-80);
  }
  .column-gap-lg-88 {
    column-gap: var(--prograss-space-88);
  }
  .column-gap-lg-96 {
    column-gap: var(--prograss-space-96);
  }
  .column-gap-lg-100 {
    column-gap: var(--prograss-space-100);
  }
  .column-gap-lg-110 {
    column-gap: var(--prograss-space-110);
  }
  .m-lg-0 {
    margin: 0;
  }
  .m-lg-1 {
    margin: var(--space-1);
  }
  .m-lg-2 {
    margin: var(--space-2);
  }
  .m-lg-3 {
    margin: var(--space-3);
  }
  .m-lg-4 {
    margin: var(--space-4);
  }
  .m-lg-5 {
    margin: var(--space-5);
  }
  .m-lg-6 {
    margin: var(--prograss-space-6);
  }
  .m-lg-8 {
    margin: var(--space-2);
  }
  .m-lg-10 {
    margin: var(--prograss-space-10);
  }
  .m-lg-11 {
    margin: var(--prograss-space-11);
  }
  .m-lg-12 {
    margin: var(--prograss-space-12);
  }
  .m-lg-14 {
    margin: var(--prograss-space-14);
  }
  .m-lg-16 {
    margin: var(--space-3);
  }
  .m-lg-18 {
    margin: var(--prograss-space-18);
  }
  .m-lg-20 {
    margin: var(--prograss-space-20);
  }
  .m-lg-22 {
    margin: var(--prograss-space-22);
  }
  .m-lg-24 {
    margin: var(--space-4);
  }
  .m-lg-26 {
    margin: var(--prograss-space-26);
  }
  .m-lg-28 {
    margin: var(--prograss-space-28);
  }
  .m-lg-32 {
    margin: var(--prograss-space-32);
  }
  .m-lg-36 {
    margin: var(--prograss-space-36);
  }
  .m-lg-40 {
    margin: var(--prograss-space-40);
  }
  .m-lg-44 {
    margin: var(--prograss-space-44);
  }
  .m-lg-48 {
    margin: var(--space-5);
  }
  .m-lg-56 {
    margin: var(--prograss-space-56);
  }
  .m-lg-64 {
    margin: var(--prograss-space-64);
  }
  .m-lg-72 {
    margin: var(--prograss-space-72);
  }
  .m-lg-80 {
    margin: var(--prograss-space-80);
  }
  .m-lg-88 {
    margin: var(--prograss-space-88);
  }
  .m-lg-96 {
    margin: var(--prograss-space-96);
  }
  .m-lg-100 {
    margin: var(--prograss-space-100);
  }
  .m-lg-110 {
    margin: var(--prograss-space-110);
  }
  .m-lg-auto {
    margin: auto;
  }
  .mx-lg-0 {
    margin-left: 0;
    margin-right: 0;
  }
  .mx-lg-1 {
    margin-left: var(--space-1);
    margin-right: var(--space-1);
  }
  .mx-lg-2 {
    margin-left: var(--space-2);
    margin-right: var(--space-2);
  }
  .mx-lg-3 {
    margin-left: var(--space-3);
    margin-right: var(--space-3);
  }
  .mx-lg-4 {
    margin-left: var(--space-4);
    margin-right: var(--space-4);
  }
  .mx-lg-5 {
    margin-left: var(--space-5);
    margin-right: var(--space-5);
  }
  .mx-lg-6 {
    margin-left: var(--prograss-space-6);
    margin-right: var(--prograss-space-6);
  }
  .mx-lg-8 {
    margin-left: var(--space-2);
    margin-right: var(--space-2);
  }
  .mx-lg-10 {
    margin-left: var(--prograss-space-10);
    margin-right: var(--prograss-space-10);
  }
  .mx-lg-11 {
    margin-left: var(--prograss-space-11);
    margin-right: var(--prograss-space-11);
  }
  .mx-lg-12 {
    margin-left: var(--prograss-space-12);
    margin-right: var(--prograss-space-12);
  }
  .mx-lg-14 {
    margin-left: var(--prograss-space-14);
    margin-right: var(--prograss-space-14);
  }
  .mx-lg-16 {
    margin-left: var(--space-3);
    margin-right: var(--space-3);
  }
  .mx-lg-18 {
    margin-left: var(--prograss-space-18);
    margin-right: var(--prograss-space-18);
  }
  .mx-lg-20 {
    margin-left: var(--prograss-space-20);
    margin-right: var(--prograss-space-20);
  }
  .mx-lg-22 {
    margin-left: var(--prograss-space-22);
    margin-right: var(--prograss-space-22);
  }
  .mx-lg-24 {
    margin-left: var(--space-4);
    margin-right: var(--space-4);
  }
  .mx-lg-26 {
    margin-left: var(--prograss-space-26);
    margin-right: var(--prograss-space-26);
  }
  .mx-lg-28 {
    margin-left: var(--prograss-space-28);
    margin-right: var(--prograss-space-28);
  }
  .mx-lg-32 {
    margin-left: var(--prograss-space-32);
    margin-right: var(--prograss-space-32);
  }
  .mx-lg-36 {
    margin-left: var(--prograss-space-36);
    margin-right: var(--prograss-space-36);
  }
  .mx-lg-40 {
    margin-left: var(--prograss-space-40);
    margin-right: var(--prograss-space-40);
  }
  .mx-lg-44 {
    margin-left: var(--prograss-space-44);
    margin-right: var(--prograss-space-44);
  }
  .mx-lg-48 {
    margin-left: var(--space-5);
    margin-right: var(--space-5);
  }
  .mx-lg-56 {
    margin-left: var(--prograss-space-56);
    margin-right: var(--prograss-space-56);
  }
  .mx-lg-64 {
    margin-left: var(--prograss-space-64);
    margin-right: var(--prograss-space-64);
  }
  .mx-lg-72 {
    margin-left: var(--prograss-space-72);
    margin-right: var(--prograss-space-72);
  }
  .mx-lg-80 {
    margin-left: var(--prograss-space-80);
    margin-right: var(--prograss-space-80);
  }
  .mx-lg-88 {
    margin-left: var(--prograss-space-88);
    margin-right: var(--prograss-space-88);
  }
  .mx-lg-96 {
    margin-left: var(--prograss-space-96);
    margin-right: var(--prograss-space-96);
  }
  .mx-lg-100 {
    margin-left: var(--prograss-space-100);
    margin-right: var(--prograss-space-100);
  }
  .mx-lg-110 {
    margin-left: var(--prograss-space-110);
    margin-right: var(--prograss-space-110);
  }
  .mx-lg-auto {
    margin-left: auto;
    margin-right: auto;
  }
  .my-lg-0 {
    margin-top: 0;
    margin-bottom: 0;
  }
  .my-lg-1 {
    margin-top: var(--space-1);
    margin-bottom: var(--space-1);
  }
  .my-lg-2 {
    margin-top: var(--space-2);
    margin-bottom: var(--space-2);
  }
  .my-lg-3 {
    margin-top: var(--space-3);
    margin-bottom: var(--space-3);
  }
  .my-lg-4 {
    margin-top: var(--space-4);
    margin-bottom: var(--space-4);
  }
  .my-lg-5 {
    margin-top: var(--space-5);
    margin-bottom: var(--space-5);
  }
  .my-lg-6 {
    margin-top: var(--prograss-space-6);
    margin-bottom: var(--prograss-space-6);
  }
  .my-lg-8 {
    margin-top: var(--space-2);
    margin-bottom: var(--space-2);
  }
  .my-lg-10 {
    margin-top: var(--prograss-space-10);
    margin-bottom: var(--prograss-space-10);
  }
  .my-lg-11 {
    margin-top: var(--prograss-space-11);
    margin-bottom: var(--prograss-space-11);
  }
  .my-lg-12 {
    margin-top: var(--prograss-space-12);
    margin-bottom: var(--prograss-space-12);
  }
  .my-lg-14 {
    margin-top: var(--prograss-space-14);
    margin-bottom: var(--prograss-space-14);
  }
  .my-lg-16 {
    margin-top: var(--space-3);
    margin-bottom: var(--space-3);
  }
  .my-lg-18 {
    margin-top: var(--prograss-space-18);
    margin-bottom: var(--prograss-space-18);
  }
  .my-lg-20 {
    margin-top: var(--prograss-space-20);
    margin-bottom: var(--prograss-space-20);
  }
  .my-lg-22 {
    margin-top: var(--prograss-space-22);
    margin-bottom: var(--prograss-space-22);
  }
  .my-lg-24 {
    margin-top: var(--space-4);
    margin-bottom: var(--space-4);
  }
  .my-lg-26 {
    margin-top: var(--prograss-space-26);
    margin-bottom: var(--prograss-space-26);
  }
  .my-lg-28 {
    margin-top: var(--prograss-space-28);
    margin-bottom: var(--prograss-space-28);
  }
  .my-lg-32 {
    margin-top: var(--prograss-space-32);
    margin-bottom: var(--prograss-space-32);
  }
  .my-lg-36 {
    margin-top: var(--prograss-space-36);
    margin-bottom: var(--prograss-space-36);
  }
  .my-lg-40 {
    margin-top: var(--prograss-space-40);
    margin-bottom: var(--prograss-space-40);
  }
  .my-lg-44 {
    margin-top: var(--prograss-space-44);
    margin-bottom: var(--prograss-space-44);
  }
  .my-lg-48 {
    margin-top: var(--space-5);
    margin-bottom: var(--space-5);
  }
  .my-lg-56 {
    margin-top: var(--prograss-space-56);
    margin-bottom: var(--prograss-space-56);
  }
  .my-lg-64 {
    margin-top: var(--prograss-space-64);
    margin-bottom: var(--prograss-space-64);
  }
  .my-lg-72 {
    margin-top: var(--prograss-space-72);
    margin-bottom: var(--prograss-space-72);
  }
  .my-lg-80 {
    margin-top: var(--prograss-space-80);
    margin-bottom: var(--prograss-space-80);
  }
  .my-lg-88 {
    margin-top: var(--prograss-space-88);
    margin-bottom: var(--prograss-space-88);
  }
  .my-lg-96 {
    margin-top: var(--prograss-space-96);
    margin-bottom: var(--prograss-space-96);
  }
  .my-lg-100 {
    margin-top: var(--prograss-space-100);
    margin-bottom: var(--prograss-space-100);
  }
  .my-lg-110 {
    margin-top: var(--prograss-space-110);
    margin-bottom: var(--prograss-space-110);
  }
  .my-lg-auto {
    margin-top: auto;
    margin-bottom: auto;
  }
  .mt-lg-0 {
    margin-top: 0;
  }
  .mt-lg-1 {
    margin-top: var(--space-1);
  }
  .mt-lg-2 {
    margin-top: var(--space-2);
  }
  .mt-lg-3 {
    margin-top: var(--space-3);
  }
  .mt-lg-4 {
    margin-top: var(--space-4);
  }
  .mt-lg-5 {
    margin-top: var(--space-5);
  }
  .mt-lg-6 {
    margin-top: var(--prograss-space-6);
  }
  .mt-lg-8 {
    margin-top: var(--space-2);
  }
  .mt-lg-10 {
    margin-top: var(--prograss-space-10);
  }
  .mt-lg-11 {
    margin-top: var(--prograss-space-11);
  }
  .mt-lg-12 {
    margin-top: var(--prograss-space-12);
  }
  .mt-lg-14 {
    margin-top: var(--prograss-space-14);
  }
  .mt-lg-16 {
    margin-top: var(--space-3);
  }
  .mt-lg-18 {
    margin-top: var(--prograss-space-18);
  }
  .mt-lg-20 {
    margin-top: var(--prograss-space-20);
  }
  .mt-lg-22 {
    margin-top: var(--prograss-space-22);
  }
  .mt-lg-24 {
    margin-top: var(--space-4);
  }
  .mt-lg-26 {
    margin-top: var(--prograss-space-26);
  }
  .mt-lg-28 {
    margin-top: var(--prograss-space-28);
  }
  .mt-lg-32 {
    margin-top: var(--prograss-space-32);
  }
  .mt-lg-36 {
    margin-top: var(--prograss-space-36);
  }
  .mt-lg-40 {
    margin-top: var(--prograss-space-40);
  }
  .mt-lg-44 {
    margin-top: var(--prograss-space-44);
  }
  .mt-lg-48 {
    margin-top: var(--space-5);
  }
  .mt-lg-56 {
    margin-top: var(--prograss-space-56);
  }
  .mt-lg-64 {
    margin-top: var(--prograss-space-64);
  }
  .mt-lg-72 {
    margin-top: var(--prograss-space-72);
  }
  .mt-lg-80 {
    margin-top: var(--prograss-space-80);
  }
  .mt-lg-88 {
    margin-top: var(--prograss-space-88);
  }
  .mt-lg-96 {
    margin-top: var(--prograss-space-96);
  }
  .mt-lg-100 {
    margin-top: var(--prograss-space-100);
  }
  .mt-lg-110 {
    margin-top: var(--prograss-space-110);
  }
  .mt-lg-auto {
    margin-top: auto;
  }
  .me-lg-0 {
    margin-right: 0;
  }
  .me-lg-1 {
    margin-right: var(--space-1);
  }
  .me-lg-2 {
    margin-right: var(--space-2);
  }
  .me-lg-3 {
    margin-right: var(--space-3);
  }
  .me-lg-4 {
    margin-right: var(--space-4);
  }
  .me-lg-5 {
    margin-right: var(--space-5);
  }
  .me-lg-6 {
    margin-right: var(--prograss-space-6);
  }
  .me-lg-8 {
    margin-right: var(--space-2);
  }
  .me-lg-10 {
    margin-right: var(--prograss-space-10);
  }
  .me-lg-11 {
    margin-right: var(--prograss-space-11);
  }
  .me-lg-12 {
    margin-right: var(--prograss-space-12);
  }
  .me-lg-14 {
    margin-right: var(--prograss-space-14);
  }
  .me-lg-16 {
    margin-right: var(--space-3);
  }
  .me-lg-18 {
    margin-right: var(--prograss-space-18);
  }
  .me-lg-20 {
    margin-right: var(--prograss-space-20);
  }
  .me-lg-22 {
    margin-right: var(--prograss-space-22);
  }
  .me-lg-24 {
    margin-right: var(--space-4);
  }
  .me-lg-26 {
    margin-right: var(--prograss-space-26);
  }
  .me-lg-28 {
    margin-right: var(--prograss-space-28);
  }
  .me-lg-32 {
    margin-right: var(--prograss-space-32);
  }
  .me-lg-36 {
    margin-right: var(--prograss-space-36);
  }
  .me-lg-40 {
    margin-right: var(--prograss-space-40);
  }
  .me-lg-44 {
    margin-right: var(--prograss-space-44);
  }
  .me-lg-48 {
    margin-right: var(--space-5);
  }
  .me-lg-56 {
    margin-right: var(--prograss-space-56);
  }
  .me-lg-64 {
    margin-right: var(--prograss-space-64);
  }
  .me-lg-72 {
    margin-right: var(--prograss-space-72);
  }
  .me-lg-80 {
    margin-right: var(--prograss-space-80);
  }
  .me-lg-88 {
    margin-right: var(--prograss-space-88);
  }
  .me-lg-96 {
    margin-right: var(--prograss-space-96);
  }
  .me-lg-100 {
    margin-right: var(--prograss-space-100);
  }
  .me-lg-110 {
    margin-right: var(--prograss-space-110);
  }
  .me-lg-auto {
    margin-right: auto;
  }
  .mb-lg-0 {
    margin-bottom: 0;
  }
  .mb-lg-1 {
    margin-bottom: var(--space-1);
  }
  .mb-lg-2 {
    margin-bottom: var(--space-2);
  }
  .mb-lg-3 {
    margin-bottom: var(--space-3);
  }
  .mb-lg-4 {
    margin-bottom: var(--space-4);
  }
  .mb-lg-5 {
    margin-bottom: var(--space-5);
  }
  .mb-lg-6 {
    margin-bottom: var(--prograss-space-6);
  }
  .mb-lg-8 {
    margin-bottom: var(--space-2);
  }
  .mb-lg-10 {
    margin-bottom: var(--prograss-space-10);
  }
  .mb-lg-11 {
    margin-bottom: var(--prograss-space-11);
  }
  .mb-lg-12 {
    margin-bottom: var(--prograss-space-12);
  }
  .mb-lg-14 {
    margin-bottom: var(--prograss-space-14);
  }
  .mb-lg-16 {
    margin-bottom: var(--space-3);
  }
  .mb-lg-18 {
    margin-bottom: var(--prograss-space-18);
  }
  .mb-lg-20 {
    margin-bottom: var(--prograss-space-20);
  }
  .mb-lg-22 {
    margin-bottom: var(--prograss-space-22);
  }
  .mb-lg-24 {
    margin-bottom: var(--space-4);
  }
  .mb-lg-26 {
    margin-bottom: var(--prograss-space-26);
  }
  .mb-lg-28 {
    margin-bottom: var(--prograss-space-28);
  }
  .mb-lg-32 {
    margin-bottom: var(--prograss-space-32);
  }
  .mb-lg-36 {
    margin-bottom: var(--prograss-space-36);
  }
  .mb-lg-40 {
    margin-bottom: var(--prograss-space-40);
  }
  .mb-lg-44 {
    margin-bottom: var(--prograss-space-44);
  }
  .mb-lg-48 {
    margin-bottom: var(--space-5);
  }
  .mb-lg-56 {
    margin-bottom: var(--prograss-space-56);
  }
  .mb-lg-64 {
    margin-bottom: var(--prograss-space-64);
  }
  .mb-lg-72 {
    margin-bottom: var(--prograss-space-72);
  }
  .mb-lg-80 {
    margin-bottom: var(--prograss-space-80);
  }
  .mb-lg-88 {
    margin-bottom: var(--prograss-space-88);
  }
  .mb-lg-96 {
    margin-bottom: var(--prograss-space-96);
  }
  .mb-lg-100 {
    margin-bottom: var(--prograss-space-100);
  }
  .mb-lg-110 {
    margin-bottom: var(--prograss-space-110);
  }
  .mb-lg-auto {
    margin-bottom: auto;
  }
  .ms-lg-0 {
    margin-left: 0;
  }
  .ms-lg-1 {
    margin-left: var(--space-1);
  }
  .ms-lg-2 {
    margin-left: var(--space-2);
  }
  .ms-lg-3 {
    margin-left: var(--space-3);
  }
  .ms-lg-4 {
    margin-left: var(--space-4);
  }
  .ms-lg-5 {
    margin-left: var(--space-5);
  }
  .ms-lg-6 {
    margin-left: var(--prograss-space-6);
  }
  .ms-lg-8 {
    margin-left: var(--space-2);
  }
  .ms-lg-10 {
    margin-left: var(--prograss-space-10);
  }
  .ms-lg-11 {
    margin-left: var(--prograss-space-11);
  }
  .ms-lg-12 {
    margin-left: var(--prograss-space-12);
  }
  .ms-lg-14 {
    margin-left: var(--prograss-space-14);
  }
  .ms-lg-16 {
    margin-left: var(--space-3);
  }
  .ms-lg-18 {
    margin-left: var(--prograss-space-18);
  }
  .ms-lg-20 {
    margin-left: var(--prograss-space-20);
  }
  .ms-lg-22 {
    margin-left: var(--prograss-space-22);
  }
  .ms-lg-24 {
    margin-left: var(--space-4);
  }
  .ms-lg-26 {
    margin-left: var(--prograss-space-26);
  }
  .ms-lg-28 {
    margin-left: var(--prograss-space-28);
  }
  .ms-lg-32 {
    margin-left: var(--prograss-space-32);
  }
  .ms-lg-36 {
    margin-left: var(--prograss-space-36);
  }
  .ms-lg-40 {
    margin-left: var(--prograss-space-40);
  }
  .ms-lg-44 {
    margin-left: var(--prograss-space-44);
  }
  .ms-lg-48 {
    margin-left: var(--space-5);
  }
  .ms-lg-56 {
    margin-left: var(--prograss-space-56);
  }
  .ms-lg-64 {
    margin-left: var(--prograss-space-64);
  }
  .ms-lg-72 {
    margin-left: var(--prograss-space-72);
  }
  .ms-lg-80 {
    margin-left: var(--prograss-space-80);
  }
  .ms-lg-88 {
    margin-left: var(--prograss-space-88);
  }
  .ms-lg-96 {
    margin-left: var(--prograss-space-96);
  }
  .ms-lg-100 {
    margin-left: var(--prograss-space-100);
  }
  .ms-lg-110 {
    margin-left: var(--prograss-space-110);
  }
  .ms-lg-auto {
    margin-left: auto;
  }
  .p-lg-0 {
    padding: 0;
  }
  .p-lg-1 {
    padding: var(--space-1);
  }
  .p-lg-2 {
    padding: var(--space-2);
  }
  .p-lg-3 {
    padding: var(--space-3);
  }
  .p-lg-4 {
    padding: var(--space-4);
  }
  .p-lg-5 {
    padding: var(--space-5);
  }
  .p-lg-6 {
    padding: var(--prograss-space-6);
  }
  .p-lg-8 {
    padding: var(--space-2);
  }
  .p-lg-10 {
    padding: var(--prograss-space-10);
  }
  .p-lg-11 {
    padding: var(--prograss-space-11);
  }
  .p-lg-12 {
    padding: var(--prograss-space-12);
  }
  .p-lg-14 {
    padding: var(--prograss-space-14);
  }
  .p-lg-16 {
    padding: var(--space-3);
  }
  .p-lg-18 {
    padding: var(--prograss-space-18);
  }
  .p-lg-20 {
    padding: var(--prograss-space-20);
  }
  .p-lg-22 {
    padding: var(--prograss-space-22);
  }
  .p-lg-24 {
    padding: var(--space-4);
  }
  .p-lg-26 {
    padding: var(--prograss-space-26);
  }
  .p-lg-28 {
    padding: var(--prograss-space-28);
  }
  .p-lg-32 {
    padding: var(--prograss-space-32);
  }
  .p-lg-36 {
    padding: var(--prograss-space-36);
  }
  .p-lg-40 {
    padding: var(--prograss-space-40);
  }
  .p-lg-44 {
    padding: var(--prograss-space-44);
  }
  .p-lg-48 {
    padding: var(--space-5);
  }
  .p-lg-56 {
    padding: var(--prograss-space-56);
  }
  .p-lg-64 {
    padding: var(--prograss-space-64);
  }
  .p-lg-72 {
    padding: var(--prograss-space-72);
  }
  .p-lg-80 {
    padding: var(--prograss-space-80);
  }
  .p-lg-88 {
    padding: var(--prograss-space-88);
  }
  .p-lg-96 {
    padding: var(--prograss-space-96);
  }
  .p-lg-100 {
    padding: var(--prograss-space-100);
  }
  .p-lg-110 {
    padding: var(--prograss-space-110);
  }
  .px-lg-0 {
    padding-left: 0;
    padding-right: 0;
  }
  .px-lg-1 {
    padding-left: var(--space-1);
    padding-right: var(--space-1);
  }
  .px-lg-2 {
    padding-left: var(--space-2);
    padding-right: var(--space-2);
  }
  .px-lg-3 {
    padding-left: var(--space-3);
    padding-right: var(--space-3);
  }
  .px-lg-4 {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }
  .px-lg-5 {
    padding-left: var(--space-5);
    padding-right: var(--space-5);
  }
  .px-lg-6 {
    padding-left: var(--prograss-space-6);
    padding-right: var(--prograss-space-6);
  }
  .px-lg-8 {
    padding-left: var(--space-2);
    padding-right: var(--space-2);
  }
  .px-lg-10 {
    padding-left: var(--prograss-space-10);
    padding-right: var(--prograss-space-10);
  }
  .px-lg-11 {
    padding-left: var(--prograss-space-11);
    padding-right: var(--prograss-space-11);
  }
  .px-lg-12 {
    padding-left: var(--prograss-space-12);
    padding-right: var(--prograss-space-12);
  }
  .px-lg-14 {
    padding-left: var(--prograss-space-14);
    padding-right: var(--prograss-space-14);
  }
  .px-lg-16 {
    padding-left: var(--space-3);
    padding-right: var(--space-3);
  }
  .px-lg-18 {
    padding-left: var(--prograss-space-18);
    padding-right: var(--prograss-space-18);
  }
  .px-lg-20 {
    padding-left: var(--prograss-space-20);
    padding-right: var(--prograss-space-20);
  }
  .px-lg-22 {
    padding-left: var(--prograss-space-22);
    padding-right: var(--prograss-space-22);
  }
  .px-lg-24 {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }
  .px-lg-26 {
    padding-left: var(--prograss-space-26);
    padding-right: var(--prograss-space-26);
  }
  .px-lg-28 {
    padding-left: var(--prograss-space-28);
    padding-right: var(--prograss-space-28);
  }
  .px-lg-32 {
    padding-left: var(--prograss-space-32);
    padding-right: var(--prograss-space-32);
  }
  .px-lg-36 {
    padding-left: var(--prograss-space-36);
    padding-right: var(--prograss-space-36);
  }
  .px-lg-40 {
    padding-left: var(--prograss-space-40);
    padding-right: var(--prograss-space-40);
  }
  .px-lg-44 {
    padding-left: var(--prograss-space-44);
    padding-right: var(--prograss-space-44);
  }
  .px-lg-48 {
    padding-left: var(--space-5);
    padding-right: var(--space-5);
  }
  .px-lg-56 {
    padding-left: var(--prograss-space-56);
    padding-right: var(--prograss-space-56);
  }
  .px-lg-64 {
    padding-left: var(--prograss-space-64);
    padding-right: var(--prograss-space-64);
  }
  .px-lg-72 {
    padding-left: var(--prograss-space-72);
    padding-right: var(--prograss-space-72);
  }
  .px-lg-80 {
    padding-left: var(--prograss-space-80);
    padding-right: var(--prograss-space-80);
  }
  .px-lg-88 {
    padding-left: var(--prograss-space-88);
    padding-right: var(--prograss-space-88);
  }
  .px-lg-96 {
    padding-left: var(--prograss-space-96);
    padding-right: var(--prograss-space-96);
  }
  .px-lg-100 {
    padding-left: var(--prograss-space-100);
    padding-right: var(--prograss-space-100);
  }
  .px-lg-110 {
    padding-left: var(--prograss-space-110);
    padding-right: var(--prograss-space-110);
  }
  .py-lg-0 {
    padding-top: 0;
    padding-bottom: 0;
  }
  .py-lg-1 {
    padding-top: var(--space-1);
    padding-bottom: var(--space-1);
  }
  .py-lg-2 {
    padding-top: var(--space-2);
    padding-bottom: var(--space-2);
  }
  .py-lg-3 {
    padding-top: var(--space-3);
    padding-bottom: var(--space-3);
  }
  .py-lg-4 {
    padding-top: var(--space-4);
    padding-bottom: var(--space-4);
  }
  .py-lg-5 {
    padding-top: var(--space-5);
    padding-bottom: var(--space-5);
  }
  .py-lg-6 {
    padding-top: var(--prograss-space-6);
    padding-bottom: var(--prograss-space-6);
  }
  .py-lg-8 {
    padding-top: var(--space-2);
    padding-bottom: var(--space-2);
  }
  .py-lg-10 {
    padding-top: var(--prograss-space-10);
    padding-bottom: var(--prograss-space-10);
  }
  .py-lg-11 {
    padding-top: var(--prograss-space-11);
    padding-bottom: var(--prograss-space-11);
  }
  .py-lg-12 {
    padding-top: var(--prograss-space-12);
    padding-bottom: var(--prograss-space-12);
  }
  .py-lg-14 {
    padding-top: var(--prograss-space-14);
    padding-bottom: var(--prograss-space-14);
  }
  .py-lg-16 {
    padding-top: var(--space-3);
    padding-bottom: var(--space-3);
  }
  .py-lg-18 {
    padding-top: var(--prograss-space-18);
    padding-bottom: var(--prograss-space-18);
  }
  .py-lg-20 {
    padding-top: var(--prograss-space-20);
    padding-bottom: var(--prograss-space-20);
  }
  .py-lg-22 {
    padding-top: var(--prograss-space-22);
    padding-bottom: var(--prograss-space-22);
  }
  .py-lg-24 {
    padding-top: var(--space-4);
    padding-bottom: var(--space-4);
  }
  .py-lg-26 {
    padding-top: var(--prograss-space-26);
    padding-bottom: var(--prograss-space-26);
  }
  .py-lg-28 {
    padding-top: var(--prograss-space-28);
    padding-bottom: var(--prograss-space-28);
  }
  .py-lg-32 {
    padding-top: var(--prograss-space-32);
    padding-bottom: var(--prograss-space-32);
  }
  .py-lg-36 {
    padding-top: var(--prograss-space-36);
    padding-bottom: var(--prograss-space-36);
  }
  .py-lg-40 {
    padding-top: var(--prograss-space-40);
    padding-bottom: var(--prograss-space-40);
  }
  .py-lg-44 {
    padding-top: var(--prograss-space-44);
    padding-bottom: var(--prograss-space-44);
  }
  .py-lg-48 {
    padding-top: var(--space-5);
    padding-bottom: var(--space-5);
  }
  .py-lg-56 {
    padding-top: var(--prograss-space-56);
    padding-bottom: var(--prograss-space-56);
  }
  .py-lg-64 {
    padding-top: var(--prograss-space-64);
    padding-bottom: var(--prograss-space-64);
  }
  .py-lg-72 {
    padding-top: var(--prograss-space-72);
    padding-bottom: var(--prograss-space-72);
  }
  .py-lg-80 {
    padding-top: var(--prograss-space-80);
    padding-bottom: var(--prograss-space-80);
  }
  .py-lg-88 {
    padding-top: var(--prograss-space-88);
    padding-bottom: var(--prograss-space-88);
  }
  .py-lg-96 {
    padding-top: var(--prograss-space-96);
    padding-bottom: var(--prograss-space-96);
  }
  .py-lg-100 {
    padding-top: var(--prograss-space-100);
    padding-bottom: var(--prograss-space-100);
  }
  .py-lg-110 {
    padding-top: var(--prograss-space-110);
    padding-bottom: var(--prograss-space-110);
  }
  .pt-lg-0 {
    padding-top: 0;
  }
  .pt-lg-1 {
    padding-top: var(--space-1);
  }
  .pt-lg-2 {
    padding-top: var(--space-2);
  }
  .pt-lg-3 {
    padding-top: var(--space-3);
  }
  .pt-lg-4 {
    padding-top: var(--space-4);
  }
  .pt-lg-5 {
    padding-top: var(--space-5);
  }
  .pt-lg-6 {
    padding-top: var(--prograss-space-6);
  }
  .pt-lg-8 {
    padding-top: var(--space-2);
  }
  .pt-lg-10 {
    padding-top: var(--prograss-space-10);
  }
  .pt-lg-11 {
    padding-top: var(--prograss-space-11);
  }
  .pt-lg-12 {
    padding-top: var(--prograss-space-12);
  }
  .pt-lg-14 {
    padding-top: var(--prograss-space-14);
  }
  .pt-lg-16 {
    padding-top: var(--space-3);
  }
  .pt-lg-18 {
    padding-top: var(--prograss-space-18);
  }
  .pt-lg-20 {
    padding-top: var(--prograss-space-20);
  }
  .pt-lg-22 {
    padding-top: var(--prograss-space-22);
  }
  .pt-lg-24 {
    padding-top: var(--space-4);
  }
  .pt-lg-26 {
    padding-top: var(--prograss-space-26);
  }
  .pt-lg-28 {
    padding-top: var(--prograss-space-28);
  }
  .pt-lg-32 {
    padding-top: var(--prograss-space-32);
  }
  .pt-lg-36 {
    padding-top: var(--prograss-space-36);
  }
  .pt-lg-40 {
    padding-top: var(--prograss-space-40);
  }
  .pt-lg-44 {
    padding-top: var(--prograss-space-44);
  }
  .pt-lg-48 {
    padding-top: var(--space-5);
  }
  .pt-lg-56 {
    padding-top: var(--prograss-space-56);
  }
  .pt-lg-64 {
    padding-top: var(--prograss-space-64);
  }
  .pt-lg-72 {
    padding-top: var(--prograss-space-72);
  }
  .pt-lg-80 {
    padding-top: var(--prograss-space-80);
  }
  .pt-lg-88 {
    padding-top: var(--prograss-space-88);
  }
  .pt-lg-96 {
    padding-top: var(--prograss-space-96);
  }
  .pt-lg-100 {
    padding-top: var(--prograss-space-100);
  }
  .pt-lg-110 {
    padding-top: var(--prograss-space-110);
  }
  .pe-lg-0 {
    padding-right: 0;
  }
  .pe-lg-1 {
    padding-right: var(--space-1);
  }
  .pe-lg-2 {
    padding-right: var(--space-2);
  }
  .pe-lg-3 {
    padding-right: var(--space-3);
  }
  .pe-lg-4 {
    padding-right: var(--space-4);
  }
  .pe-lg-5 {
    padding-right: var(--space-5);
  }
  .pe-lg-6 {
    padding-right: var(--prograss-space-6);
  }
  .pe-lg-8 {
    padding-right: var(--space-2);
  }
  .pe-lg-10 {
    padding-right: var(--prograss-space-10);
  }
  .pe-lg-11 {
    padding-right: var(--prograss-space-11);
  }
  .pe-lg-12 {
    padding-right: var(--prograss-space-12);
  }
  .pe-lg-14 {
    padding-right: var(--prograss-space-14);
  }
  .pe-lg-16 {
    padding-right: var(--space-3);
  }
  .pe-lg-18 {
    padding-right: var(--prograss-space-18);
  }
  .pe-lg-20 {
    padding-right: var(--prograss-space-20);
  }
  .pe-lg-22 {
    padding-right: var(--prograss-space-22);
  }
  .pe-lg-24 {
    padding-right: var(--space-4);
  }
  .pe-lg-26 {
    padding-right: var(--prograss-space-26);
  }
  .pe-lg-28 {
    padding-right: var(--prograss-space-28);
  }
  .pe-lg-32 {
    padding-right: var(--prograss-space-32);
  }
  .pe-lg-36 {
    padding-right: var(--prograss-space-36);
  }
  .pe-lg-40 {
    padding-right: var(--prograss-space-40);
  }
  .pe-lg-44 {
    padding-right: var(--prograss-space-44);
  }
  .pe-lg-48 {
    padding-right: var(--space-5);
  }
  .pe-lg-56 {
    padding-right: var(--prograss-space-56);
  }
  .pe-lg-64 {
    padding-right: var(--prograss-space-64);
  }
  .pe-lg-72 {
    padding-right: var(--prograss-space-72);
  }
  .pe-lg-80 {
    padding-right: var(--prograss-space-80);
  }
  .pe-lg-88 {
    padding-right: var(--prograss-space-88);
  }
  .pe-lg-96 {
    padding-right: var(--prograss-space-96);
  }
  .pe-lg-100 {
    padding-right: var(--prograss-space-100);
  }
  .pe-lg-110 {
    padding-right: var(--prograss-space-110);
  }
  .pb-lg-0 {
    padding-bottom: 0;
  }
  .pb-lg-1 {
    padding-bottom: var(--space-1);
  }
  .pb-lg-2 {
    padding-bottom: var(--space-2);
  }
  .pb-lg-3 {
    padding-bottom: var(--space-3);
  }
  .pb-lg-4 {
    padding-bottom: var(--space-4);
  }
  .pb-lg-5 {
    padding-bottom: var(--space-5);
  }
  .pb-lg-6 {
    padding-bottom: var(--prograss-space-6);
  }
  .pb-lg-8 {
    padding-bottom: var(--space-2);
  }
  .pb-lg-10 {
    padding-bottom: var(--prograss-space-10);
  }
  .pb-lg-11 {
    padding-bottom: var(--prograss-space-11);
  }
  .pb-lg-12 {
    padding-bottom: var(--prograss-space-12);
  }
  .pb-lg-14 {
    padding-bottom: var(--prograss-space-14);
  }
  .pb-lg-16 {
    padding-bottom: var(--space-3);
  }
  .pb-lg-18 {
    padding-bottom: var(--prograss-space-18);
  }
  .pb-lg-20 {
    padding-bottom: var(--prograss-space-20);
  }
  .pb-lg-22 {
    padding-bottom: var(--prograss-space-22);
  }
  .pb-lg-24 {
    padding-bottom: var(--space-4);
  }
  .pb-lg-26 {
    padding-bottom: var(--prograss-space-26);
  }
  .pb-lg-28 {
    padding-bottom: var(--prograss-space-28);
  }
  .pb-lg-32 {
    padding-bottom: var(--prograss-space-32);
  }
  .pb-lg-36 {
    padding-bottom: var(--prograss-space-36);
  }
  .pb-lg-40 {
    padding-bottom: var(--prograss-space-40);
  }
  .pb-lg-44 {
    padding-bottom: var(--prograss-space-44);
  }
  .pb-lg-48 {
    padding-bottom: var(--space-5);
  }
  .pb-lg-56 {
    padding-bottom: var(--prograss-space-56);
  }
  .pb-lg-64 {
    padding-bottom: var(--prograss-space-64);
  }
  .pb-lg-72 {
    padding-bottom: var(--prograss-space-72);
  }
  .pb-lg-80 {
    padding-bottom: var(--prograss-space-80);
  }
  .pb-lg-88 {
    padding-bottom: var(--prograss-space-88);
  }
  .pb-lg-96 {
    padding-bottom: var(--prograss-space-96);
  }
  .pb-lg-100 {
    padding-bottom: var(--prograss-space-100);
  }
  .pb-lg-110 {
    padding-bottom: var(--prograss-space-110);
  }
  .ps-lg-0 {
    padding-left: 0;
  }
  .ps-lg-1 {
    padding-left: var(--space-1);
  }
  .ps-lg-2 {
    padding-left: var(--space-2);
  }
  .ps-lg-3 {
    padding-left: var(--space-3);
  }
  .ps-lg-4 {
    padding-left: var(--space-4);
  }
  .ps-lg-5 {
    padding-left: var(--space-5);
  }
  .ps-lg-6 {
    padding-left: var(--prograss-space-6);
  }
  .ps-lg-8 {
    padding-left: var(--space-2);
  }
  .ps-lg-10 {
    padding-left: var(--prograss-space-10);
  }
  .ps-lg-11 {
    padding-left: var(--prograss-space-11);
  }
  .ps-lg-12 {
    padding-left: var(--prograss-space-12);
  }
  .ps-lg-14 {
    padding-left: var(--prograss-space-14);
  }
  .ps-lg-16 {
    padding-left: var(--space-3);
  }
  .ps-lg-18 {
    padding-left: var(--prograss-space-18);
  }
  .ps-lg-20 {
    padding-left: var(--prograss-space-20);
  }
  .ps-lg-22 {
    padding-left: var(--prograss-space-22);
  }
  .ps-lg-24 {
    padding-left: var(--space-4);
  }
  .ps-lg-26 {
    padding-left: var(--prograss-space-26);
  }
  .ps-lg-28 {
    padding-left: var(--prograss-space-28);
  }
  .ps-lg-32 {
    padding-left: var(--prograss-space-32);
  }
  .ps-lg-36 {
    padding-left: var(--prograss-space-36);
  }
  .ps-lg-40 {
    padding-left: var(--prograss-space-40);
  }
  .ps-lg-44 {
    padding-left: var(--prograss-space-44);
  }
  .ps-lg-48 {
    padding-left: var(--space-5);
  }
  .ps-lg-56 {
    padding-left: var(--prograss-space-56);
  }
  .ps-lg-64 {
    padding-left: var(--prograss-space-64);
  }
  .ps-lg-72 {
    padding-left: var(--prograss-space-72);
  }
  .ps-lg-80 {
    padding-left: var(--prograss-space-80);
  }
  .ps-lg-88 {
    padding-left: var(--prograss-space-88);
  }
  .ps-lg-96 {
    padding-left: var(--prograss-space-96);
  }
  .ps-lg-100 {
    padding-left: var(--prograss-space-100);
  }
  .ps-lg-110 {
    padding-left: var(--prograss-space-110);
  }
  .w-lg-25 {
    width: 25%;
  }
  .w-lg-50 {
    width: 50%;
  }
  .w-lg-75 {
    width: 75%;
  }
  .w-lg-100 {
    width: 100%;
  }
  .w-lg-auto {
    width: auto;
  }
  .text-lg-start {
    text-align: start;
  }
  .text-lg-center {
    text-align: center;
  }
  .text-lg-end {
    text-align: end;
  }
  .fs-lg-13 {
    font-size: var(--prograss-text-13);
  }
  .fs-lg-sm {
    font-size: var(--text-sm);
  }
  .fs-lg-15 {
    font-size: var(--prograss-text-15);
  }
  .fs-lg-base {
    font-size: var(--font-size);
  }
  .fs-lg-lg {
    font-size: var(--text-lg);
  }
  .fs-lg-19 {
    font-size: var(--prograss-text-19);
  }
  .fs-lg-xl {
    font-size: var(--text-xl);
  }
  .fs-lg-2xl {
    font-size: var(--text-2xl);
  }
  .fs-lg-3xl {
    font-size: var(--text-3xl);
  }
  .fs-lg-36 {
    font-size: var(--prograss-text-36);
  }
  .fs-lg-40 {
    font-size: var(--prograss-text-40);
  }
  .fs-lg-44 {
    font-size: var(--prograss-text-44);
  }
  .fs-lg-48 {
    font-size: var(--prograss-text-48);
  }
  .fs-lg-64 {
    font-size: var(--prograss-text-64);
  }
  .fs-lg-4xl {
    font-size: var(--text-4xl);
  }
  .fs-lg-5xl {
    font-size: var(--text-5xl);
  }
  .rounded-lg {
    border-radius: var(--radius);
  }
  .rounded-lg-0 {
    border-radius: 0;
  }
  .rounded-lg-sm {
    border-radius: var(--radius-sm);
  }
  .rounded-lg-lg {
    border-radius: var(--radius-lg);
  }
  .rounded-lg-pill {
    border-radius: var(--prograss-pill);
  }
}