@layer reset, tokens, base, layout, components, utilities;
@layer reset {
    *, *:before, *:after, ::backdrop {
        box-sizing: border-box
    }

    * {
        outline-width: 0;
        font: inherit
    }

    *:not(:is(ul,ol,li)) {
        margin: 0;
        padding: 0
    }

    html {
        color-scheme: light;
        hanging-punctuation: first last
    }

    body {
        min-height: 100vh
    }

    img, picture, svg, video {
        display: block;
        max-width: 100%
    }

    h1, h2, h3, h4, h5, h6 {
        text-wrap: balance
    }

    p {
        max-width: 95ch;
        text-wrap: pretty
    }

    @media (prefers-reduced-motion: no-preference) {
        :has(:target) {
            scroll-behavior: smooth;
            scroll-padding-top: 3rem
        }
    }
}
@layer tokens {
    :root {
        --font-weight-light: 300;
        --font-weight-normal: 400;
        --font-weight-bold: 600;
        --font-wdth-normal: 100;
        --font-weight: var(--font-weight-normal);
        --font-wdth: var(--font-wdth-normal);
        --line-height: 1;
        --line-height-tight: 1.2;
        --line-height-text: 1.5;
        --line-height-loose: 1.6;
        --font-size-xs: clamp(.7292rem, .7056rem + .1181vw, .8rem);
        --font-size-base: clamp(.875rem, .8333rem + .2083vw, 1rem);
        --font-size-sm: clamp(1.05rem, .9833rem + .3333vw, 1.25rem);
        --font-size-md: clamp(1.26rem, 1.1592rem + .5042vw, 1.5625rem);
        --font-size-lg: clamp(1.512rem, 1.365rem + .7352vw, 1.9531rem);
        --font-size-xl: clamp(1.8144rem, 1.6054rem + 1.045vw, 2.4414rem);
        --font-size-2xl: clamp(2.1773rem, 1.8858rem + 1.4575vw, 3.0518rem);
        --font-size-h1: var(--font-size-2xl);
        --font-size-h2: var(--font-size-xl);
        --font-size-h3: var(--font-size-lg);
        --font-size-h4: var(--font-size-md);
        --font-size-h5: var(--font-size-sm);
        --font-size-h6: var(--font-size-base)
    }
}
@layer base {
    * {
        color: var(--text-color, var(--color-dark));
        font-family: Noto Sans, sans-serif;
        font-optical-sizing: auto;
        font-weight: var(--font-weight);
        font-style: normal;
        font-variation-settings: "wdth" var(--font-wdth);
        font-size: var(--font-size, initial);
        line-height: var(--line-height, 1)
    }

    h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6, strong, b {
        --font-weight: var(--font-weight-bold)
    }

    h1, .h1 {
        --font-size: var(--font-size-h1);
        --line-height: var(--line-height-tight)
    }

    h2, .h2 {
        --font-size: var(--font-size-h2);
        --line-height: var(--line-height-tight)
    }

    h3, .h3 {
        --font-size: var(--font-size-h3);
        --line-height: var(--line-height-tight)
    }

    h4, .h4 {
        --font-size: var(--font-size-h4);
        --line-height: 1.3
    }

    h5, .h5 {
        --font-size: var(--font-size-h5);
        --line-height: 1.3;
        margin-block-end: .5em
    }

    h6, .h6 {
        --font-size: var(--font-size-h6);
        --line-height: 1.3;
        margin-block-end: .5em
    }

    p {
        --font-size: var(--font-size-base)
    }

    p, span, li, blockquote {
        --line-height: var(--line-height-text)
    }

    h1, .h1, h2, .h2, h3, .h3, h4, .h4, p {
        margin-block-end: .75em
    }
}
@layer tokens {
    :root {
        --primary-color: hsl(208 85% 46%);
        --primary-color-hover: hsl(208, 81%, 40%);
        --primary-color-mutted: hsl(208 35% 50%);
        --accent-color: hsl(38 92% 60%);
        --accent-color-hover: hsl(38 88% 56%);
        --accent-color-mutted: hsl(38 42% 64%);
        --white-color: hsl(0, 0%, 95%);
        --light-gray-color: hsl(210, 20%, 98%);
        --middle-gray-color: hsl(0, 0%, 86%);
        --text-gray-color: hsl(0, 0%, 71%);
        --text-dark-gray-color: hsl(0, 0%, 55%);
        --color-dark: hsl(0, 0%, 35%);
        --red-color: hsl(0, 56%, 39%);
        --red-color-hover: hsl(0, 60%, 45%);
        --red-color-mutted: hsl(0, 30%, 36%);
        --green-color: hsl(94, 33%, 45%)
    }
}
@layer base {
    :root {
        --gap-3xs: clamp(.25rem, .25rem + 0vw, .25rem);
        --gap-2xs: clamp(.4375rem, .4167rem + .1042vw, .5rem);
        --gap-xs: clamp(.6875rem, .6667rem + .1042vw, .75rem);
        --gap-s: clamp(.875rem, .8333rem + .2083vw, 1rem);
        --gap-m: clamp(1.3125rem, 1.25rem + .3125vw, 1.5rem);
        --gap-l: clamp(1.75rem, 1.6667rem + .4167vw, 2rem);
        --gap-xl: clamp(2.625rem, 2.5rem + .625vw, 3rem);
        --gap-2xl: clamp(3.5rem, 3.3333rem + .8333vw, 4rem);
        --gap-3xl: clamp(5.25rem, 5rem + 1.25vw, 6rem);
        --gap-3xs-2xs: clamp(.25rem, .1667rem + .4167vw, .5rem);
        --gap-2xs-xs: clamp(.4375rem, .3333rem + .5208vw, .75rem);
        --gap-xs-s: clamp(.6875rem, .5833rem + .5208vw, 1rem);
        --gap-s-m: clamp(.875rem, .6667rem + 1.0417vw, 1.5rem);
        --gap-m-l: clamp(1.3125rem, 1.0833rem + 1.1458vw, 2rem);
        --gap-l-xl: clamp(1.75rem, 1.3333rem + 2.0833vw, 3rem);
        --gap-xl-2xl: clamp(2.625rem, 2.1667rem + 2.2917vw, 4rem);
        --gap-2xl-3xl: clamp(3.5rem, 2.6667rem + 4.1667vw, 6rem);
        --gap-s-l: clamp(.875rem, .5rem + 1.875vw, 2rem)
    }
}

@property --text-color {
    syntax: "<color>";
    inherits: true;
    initial-value: unset;
}

@layer base {
    :root {
        --default-border-radius: .25rem;
        --img-aspect-ratio: initial;
        --wrap-max-inline-size: 1280px;
        --wrap-padding-inline-size: 1rem;
        --input-padding-inline: var(--gap-2xs);
        --input-border-width: 1px;
        --input-border-color: hsl(214, 32%, 91%)
    }

    * {
        transition-behavior: allow-discrete
    }

    .wrap {
        padding-inline: var(--wrap-padding-inline-size);
        margin-inline: auto;
        max-width: var(--wrap-max-inline-size);
        width: 100%
    }

    .wrap-fluid {
        padding-inline: var(--wrap-padding-inline-size)
    }

    .show-dialog-btn, .link, a, button, .btn, input {
        -webkit-tap-highlight-color: transparent
    }

    input:not([type=checkbox],input[type=radio]), textarea, select {
        background-color: #fafafa;
        border: var(--input-border-width) solid var(--input-border-color);
        color: var(--color-dark);
        border-radius: var(--default-border-radius);
        padding-block: var(--gap-3xs);
        padding-inline: var(--input-padding-inline);
        width: 100%;
        --font-size: var(--font-size-base)
    }

    input:not([type=checkbox],input[type=radio]):focus-visible:not(.is-valid,.is-invalid), textarea:focus-visible:not(.is-valid,.is-invalid), select:focus-visible:not(.is-valid,.is-invalid) {
        border-color: var(--primary-color)
    }

    input:not([type=checkbox],input[type=radio]).is-valid, textarea.is-valid, select.is-valid {
        border-color: var(--green-color)
    }

    input:not([type=checkbox],input[type=radio]).is-invalid, textarea.is-invalid, select.is-invalid {
        border-color: var(--red-color)
    }

    input:not([type=checkbox],input[type=radio]).is-invalid::placeholder, textarea.is-invalid::placeholder, select.is-invalid::placeholder {
        color: var(--red-color)
    }

    textarea {
        padding-block: var(--gap-2xs);
        min-height: 10cap;
        resize: vertical;
        display: block;
        field-sizing: content
    }

    input:not([type=checkbox],input[type=radio]), select {
        min-height: var(--gap-xl)
    }

    a {
        --text-color: var(--primary-color);
        text-decoration-color: hsl(from currentColor h s l / 50%);
        text-underline-offset: .1em
    }

    a:hover {
        text-decoration: none
    }

    table {
        width: 100%;
        border: 1px solid var(--middle-gray-color);
        border-collapse: collapse
    }

    table th, table td {
        border: 1px solid var(--middle-gray-color);
        padding: var(--gap-2xs)
    }

    table th {
        --font-weight: 600
    }

    img {
        aspect-ratio: var(--img-aspect-ratio)
    }
}

@layer layout {
    body {
        display: grid;
        grid-template-rows:auto 1fr auto
    }

    .page-header, .page-main, .page-footer {
        max-width: 100dvw
    }

    .page-header {
        --wrap-padding-block: var(--gap-s);
        box-shadow: 0 1px 3px hsl(from var(--primary-color-mutted) h s 65% / 50%);
        background-color: hsl(from var(--accent-color) h s l / 10%)
    }

    .page-header .wrap {
        padding-block: var(--wrap-padding-block);
        display: grid;
        grid-template-columns:auto 1fr;
        grid-column-gap: var(--gap-s);
        align-items: center;
        container-type: inline-size;
        position: relative
    }

    .page-header .logo {
        display: grid;
        grid-template-rows:auto auto;
        align-items: center;
        --line-height: 1;
        --font-size: var(--font-size-base);
        --font-weight: 800;
        grid-column-gap: var(--gap-3xs);
        text-transform: uppercase;
        text-decoration: none;
        width: fit-content;
        max-width: 100%
    }

    .page-header .logo svg {
        width: var(--font-size-2xl);
        aspect-ratio: 1;
        grid-row: 1 / 3
    }

    .page-header .logo span {
        grid-column: 2 / 3;
        text-decoration: none
    }

    .page-header .logo span:nth-child(2) {
        --text-color: var(--primary-color)
    }

    .page-header .logo span:nth-child(3) {
        grid-row: 2/3;
        --text-color: var(--accent-color)
    }

    .page-footer {
        background-color: var(--primary-color);
        --text-color: var(--white-color)
    }

    .page-footer .h5 {
        text-shadow: 1px 1px 2px hsl(from var(--primary-color) h s 30%)
    }

    .page-footer .grid-wrap {
        --grid-max-col-count: 3;
        --grid-min-col-size: 250px;
        --grid-gap: var(--gap-m);
        --grid-col-size-calc: calc((100% - var(--grid-gap) * (var(--grid-max-col-count) - 1)) / var(--grid-max-col-count));
        --grid-min-col-size-calc: min(max(var(--grid-min-col-size), var(--grid-col-size-calc)), 100%);
        display: grid;
        grid-gap: var(--grid-gap);
        grid-template-columns:repeat(auto-fit, minmax(var(--grid-min-col-size-calc), 1fr));
        padding-block: var(--gap-l)
    }

    .page-footer a, .page-footer span {
        --text-color: var(--white-color);
        display: block;
        width: fit-content;
        max-width: 100%
    }

    .page-footer a:has(.icon-facebook,.icon-youtube), .page-footer span:has(.icon-facebook,.icon-youtube) {
        border-radius: 50%;
        aspect-ratio: 1;
        padding: var(--gap-2xs);
        background-color: hsl(0 0 100% / 10%);
        transition: background-color .125s linear
    }

    .page-footer a:has(.icon-facebook,.icon-youtube):hover, .page-footer span:has(.icon-facebook,.icon-youtube):hover {
        background-color: hsl(0 0 100% / 20%)
    }

    .page-footer .social-links {
        margin-block-start: var(--gap-m) !important;
        flex-wrap: wrap;
        display: flex;
        gap: var(--gap-xs)
    }

    .page-footer .social-links .h5 {
        flex: 1;
        min-width: 100%
    }

    .page-footer .content-block:not(:has(.contacts)) > * + * {
        margin-block-start: var(--gap-xs)
    }

    .page-footer .contacts > * {
        display: flex;
        gap: var(--gap-xs);
        align-items: center
    }

    .page-footer .contacts > * + * {
        margin-block-start: var(--gap-xs)
    }

    .page-footer .work-schedule {
        margin-block-start: var(--gap-m)
    }

    .page-footer .work-schedule dl {
        padding-inline-start: var(--gap-xs)
    }

    .page-footer .work-schedule dl div {
        display: flex;
        gap: var(--gap-xs);
        align-items: center
    }

    .page-footer .work-schedule dl div:not(:first-child) {
        margin-block-start: var(--gap-xs)
    }

    .page-footer .footer-nav ul {
        list-style: none;
        padding-inline-start: 0;
        margin-block: 0
    }

    .page-footer .footer-nav ul li:not(:first-child) {
        margin-block-start: var(--gap-xs)
    }

    .page-footer .copyright {
        grid-column: 1/-1;
        border-block-start: 1px solid hsl(0 0 100% / 20%);
        padding-block-start: var(--gap-m);
        text-align: center
    }

    .breadcrumbs {
        margin-block: var(--gap-s) var(--gap-l)
    }
}

@layer header-nav {
    .page-header nav {
        justify-self: end
    }

    .page-header nav ul {
        list-style: none
    }

    .page-header nav ul li ul {
        display: none
    }

    .page-header nav ul li ul span:hover, .page-header nav ul li ul span:focus-visible, .page-header nav ul li ul a:hover, .page-header nav ul li ul a:focus-visible {
        background-color: hsl(from var(--primary-color-mutted) h s l / 10%)
    }

    .page-header nav > ul {
        margin: 0;
        padding: 0;
        display: grid;
        gap: var(--gap-2xs)
    }

    .page-header nav > ul li:hover > span > .icon-arrow-down-chevron, .page-header nav > ul li:focus-within > span > .icon-arrow-down-chevron, .page-header nav > ul li:focus-visible > span > .icon-arrow-down-chevron, .page-header nav > ul li.open > span > .icon-arrow-down-chevron {
        transform: rotate(180deg)
    }

    .page-header nav > ul li:hover > ul, .page-header nav > ul li:focus-within > ul, .page-header nav > ul li:focus-visible > ul, .page-header nav > ul li.open > ul {
        display: block
    }

    .page-header nav .icon-arrow-down-chevron {
        width: var(--font-size-sm);
        transition: transform .125s linear
    }

    .page-header nav a, .page-header nav span {
        outline-width: 1px;
        outline-offset: 2px;
        outline-color: hsl(from var(--primary-color-mutted) h s l / 20%);
        --text-color: var(--color-dark);
        --font-weight: 500;
        --font-size: var(--font-size-base);
        display: flex;
        align-items: center;
        gap: var(--gap-3xs);
        padding: var(--gap-2xs);
        transition: background-color .125s linear;
        text-decoration: none
    }

    @container (width <= 767px) {
        .page-header nav {
            padding-block: var(--gap-s);
            position: absolute;
            inset-block-start: var(--wrap-padding-block);
            inset-inline: 0;
            width: 100%;
            z-index: 100;
            background-color: #fff;
            box-shadow: 0 1px 3px hsl(from var(--primary-color-mutted) h s 65% / 50%);
            grid-row: 2/3
        }

        .page-header nav:not(.open) {
            display: none
        }

        .page-header nav ul li ul {
            padding-inline-start: var(--gap-s)
        }

        .page-header nav > ul > li:has(li .active) > span {
            --text-color: var(--primary-color-mutted);
            border-inline-start-color: var(--primary-color-mutted)
        }

        .page-header nav a, .page-header nav span {
            --font-size: var(--font-size-sm);
            border-inline-start: 2px solid transparent
        }

        .page-header nav a.active, .page-header nav a:focus-visible, .page-header nav a:hover, .page-header nav a.open, .page-header nav span.active, .page-header nav span:focus-visible, .page-header nav span:hover, .page-header nav span.open {
            border-inline-start-color: var(--primary-color-mutted)
        }

        .page-header nav a:focus-visible, .page-header nav a:hover, .page-header nav a.active, .page-header nav span:focus-visible, .page-header nav span:hover, .page-header nav span.active {
            background-color: hsl(from var(--primary-color-mutted) h s l / 10%)
        }

        .page-header nav a.active, .page-header nav span.active {
            --text-color: var(--primary-color-mutted)
        }
    }@container (width >= 768px) {
    .page-header nav ul {
        margin: 0;
        padding: 0
    }

    .page-header nav > ul {
        grid-auto-flow: column
    }

    .page-header nav > ul > li > span, .page-header nav > ul > li > a {
        border-block-end: 2px solid transparent;
        transition: border-block-end-color .125s linear
    }

    .page-header nav > ul > li > span:focus-visible, .page-header nav > ul > li > span.active, .page-header nav > ul > li > a:focus-visible, .page-header nav > ul > li > a.active {
        border-block-end-color: var(--primary-color-mutted)
    }

    .page-header nav > ul > li > span:hover, .page-header nav > ul > li > a:hover {
        border-block-end-color: var(--middle-gray-color)
    }

    .page-header nav > ul > li > span.active, .page-header nav > ul > li > a.active {
        --text-color: var(--primary-color-mutted)
    }

    .page-header nav > ul > li:has(ul:hover,.active) > span, .page-header nav > ul > li:has(ul:hover,.active) > a {
        border-block-end-color: var(--primary-color-mutted)
    }

    .page-header nav > ul > li:has(ul .active) > span, .page-header nav > ul > li:has(ul .active) > a {
        --text-color: var(--primary-color-mutted)
    }

    .page-header nav > ul > li > span:hover {
        cursor: pointer
    }

    .page-header nav ul li:has(ul) {
        position: relative
    }

    .page-header nav ul li ul {
        position: absolute;
        inset-inline: 0;
        inset-block-start: 100%;
        background-color: #f9fafb;
        border-radius: var(--default-border-radius);
        box-shadow: 0 1px 2px hsl(from var(--white-color) h s 65%);
        z-index: 10;
        display: none;
        min-width: 25ch
    }
}@container (width >= 768px) {
    .page-header .toggle-nav-btn {
        display: none !important
    }
}@container (width <= 767px) {
    .page-header .toggle-nav-btn {
        background-color: var(--middle-gray-color);
        grid-row: 1/2;
        grid-column: 2/3;
        justify-self: end;
        position: relative;
        aspect-ratio: 1;
        align-items: center;
        justify-content: center
    }

    .page-header .toggle-nav-btn:before, .page-header .toggle-nav-btn:after {
        border-radius: 1px;
        content: "";
        display: block;
        position: absolute
    }

    .page-header:not(:has(nav.open)) .toggle-nav-btn:before {
        border-block-start: .3em solid white;
        border-block-end: .3em solid white;
        background: linear-gradient(0deg, transparent 40%, white 40%, white 60%, transparent 60%);
        width: 65%;
        height: 65%;
        aspect-ratio: 1
    }

    .page-header:has(nav.open) .toggle-nav-btn:before, .page-header:has(nav.open) .toggle-nav-btn:after {
        border-radius: 1px;
        background-color: #fff;
        width: .3em;
        height: 65%;
        transform-origin: center
    }

    .page-header:has(nav.open) .toggle-nav-btn:before {
        transform: rotate(45deg)
    }

    .page-header:has(nav.open) .toggle-nav-btn:after {
        transform: rotate(-45deg)
    }
}
}

@layer components {
    .form-field-wrap:not(:last-of-type) {
        margin-block-end: var(--gap-s)
    }

    .form-field-wrap:has(.is-invalid), .form-field-wrap.has-error {
        --input-border-color: var(--red-color)
    }

    .form-field-wrap:has(.is-invalid) label, .form-field-wrap.has-error label {
        color: var(--red-color)
    }

    .form-field-wrap:has(.is-valid), .form-field-wrap.is-valid {
        --input-border-color: var(--green-color)
    }

    .form-field-wrap:has(.is-valid) label, .form-field-wrap.is-valid label {
        color: var(--green-color)
    }

    .form-field-wrap .invalid-feedback {
        color: var(--red-color);
        --font-size: var(--font-size-xs);
        margin-inline-start: var(--input-padding-inline);
        margin-block-start: var(--gap-3xs)
    }

    .form-field-wrap .invalid-feedback:empty {
        display: none
    }

    .form-field-wrap:not(:has(input[type=checkbox],input[type=radio])) label {
        display: block;
        margin-block-end: var(--label-mbe, var(--gap-3xs));
        margin-inline-start: calc(var(--gap-2xs) + 1px)
    }

    .form-field-wrap label {
        color: var(--text-gray-color);
        --font-size: var(--font-size-xs)
    }

    .form-field-wrap:has(input[type=checkbox],input[type=radio]) input {
        position: absolute;
        opacity: 0;
        left: -5000px
    }

    .form-field-wrap:has(input[type=checkbox],input[type=radio]) label {
        display: grid;
        gap: var(--gap-2xs);
        align-items: center;
        grid-template-columns:auto 1fr;
        cursor: pointer;
        --input-emulator-size: var(--font-size-sm)
    }

    .form-field-wrap:has(input[type=checkbox],input[type=radio]) label:before {
        border: var(--input-border-width) solid var(--input-border-color);
        content: "";
        display: block;
        aspect-ratio: 1;
        width: var(--input-emulator-size)
    }

    .form-field-wrap:has(input[type=checkbox],input[type=radio]) label:after {
        content: "";
        display: block;
        position: absolute;
        grid-column: 1/2;
        aspect-ratio: 1;
        opacity: 0;
        width: calc(var(--input-emulator-size) * .5);
        background-color: hsl(from var(--primary-color) h s 40%);
        justify-self: center
    }

    .form-field-wrap:has(input[type=checkbox],input[type=radio]):has(input:focus-visible) label {
        outline: 1px solid var(--primary-color);
        outline-offset: 3px
    }

    .form-field-wrap:has(input[type=checkbox],input[type=radio]):has(input:checked) label {
        position: relative
    }

    .form-field-wrap:has(input[type=checkbox],input[type=radio]):has(input:checked) label:after {
        opacity: 1
    }

    .form-field-wrap:has(input[type=checkbox]) label:before {
        border-radius: var(--default-border-radius)
    }

    .form-field-wrap:has(input[type=checkbox]) label:after {
        border-radius: 2px
    }

    .form-field-wrap:has(input[type=radio]) label:before, .form-field-wrap:has(input[type=radio]) label:after {
        border-radius: 50%
    }

    .form-field-wrap input[type=datetime-local], .form-field-wrap input[type=date] {
        width: fit-content;
        max-width: 100%
    }

    .form-field-wrap.image-field-wrap {
        border: 1px solid var(--middle-gray-color);
        border-radius: var(--default-border-radius);
        padding: var(--gap-2xs);
        width: fit-content;
        max-width: 100%;
        --label-mbe: var(--gap-xs)
    }

    .form-field-wrap.image-field-wrap img {
        display: block;
        border-radius: var(--default-border-radius)
    }

    .form-field-wrap.image-field-wrap:not(:has(input[multiple])) label, .form-field-wrap.image-field-wrap:not(:has(input[multiple])) img {
        margin-block-end: var(--gap-xs)
    }

    .form-field-wrap.image-field-wrap .img-wrap {
        position: relative
    }

    .form-field-wrap.image-field-wrap .img-wrap:has(img[src*=no_image]) img {
        border: 1px solid var(--middle-gray-color)
    }

    .form-field-wrap.image-field-wrap .img-wrap:has(img[src*=no_image]) .delete-image-btn {
        display: none
    }

    .form-field-wrap.image-field-wrap .delete-image-btn {
        position: absolute;
        inset-block-start: var(--gap-2xs);
        inset-inline-end: var(--gap-2xs);
        z-index: 2;
        --text-color: var(--red-color);
        padding: var(--gap-2xs);
        --font-size: var(--font-size-xs);
        background-color: hsl(from var(--light-gray-color) h s l / 50%);
        box-shadow: 0 1px 3px hsl(from var(--color-dark) h s l / 80%)
    }

    .form-field-wrap.image-field-wrap .delete-image-btn:hover {
        background-color: var(--light-gray-color)
    }

    .form-field-wrap.image-field-wrap:has(input[multiple]) {
        width: 100%;
        display: grid;
        --grid-max-col-count: 5;
        --grid-min-col-size: 200px;
        --grid-gap: var(--gap-m);
        --grid-col-size-calc: calc((100% - var(--grid-gap) * (var(--grid-max-col-count) - 1)) / var(--grid-max-col-count));
        --grid-min-col-size-calc: min(max(var(--grid-min-col-size), var(--grid-col-size-calc)), 100%);
        grid-gap: var(--grid-gap);
        grid-template-columns:repeat(auto-fill, minmax(var(--grid-min-col-size-calc), 1fr))
    }

    .form-field-wrap.image-field-wrap:has(input[multiple]) label {
        margin-block-end: 0
    }

    .form-field-wrap.image-field-wrap:has(input[multiple]) label, .form-field-wrap.image-field-wrap:has(input[multiple]) input {
        grid-column: 1/-1
    }

    .form-field-wrap.image-field-wrap input {
        display: block;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        border: none;
        color: var(--text-gray-color);
        min-height: initial;
        background-color: var(--light-gray-color);
        cursor: pointer;
        border-radius: var(--default-border-radius);
        padding: var(--gap-3xs)
    }

    .form-field-wrap.image-field-wrap input::file-selector-button {
        border-radius: var(--default-border-radius);
        padding: var(--input-padding-inline);
        background-color: var(--light-gray-color);
        border: none;
        border-inline-end: 1px solid var(--middle-gray-color);
        color: var(--color-dark);
        cursor: pointer;
        transition: background-color 125ms linear, border-inline-end-color 125ms linear
    }

    .form-field-wrap.image-field-wrap input span[aria-hidden=true] {
        color: var(--text-gray-color)
    }

    .form-field-wrap.image-field-wrap input:not(:disabled,[readonly]):hover::file-selector-button {
        background-color: hsl(from var(--light-gray-color) h s 90%);
        border-inline-end-color: hsl(from var(--light-gray-color) h s 90%)
    }

    .breadcrumbs {
        --font-size: var(--font-size-xs);
        margin-block-end: var(--gap-m)
    }

    .breadcrumbs ul {
        padding-inline: 0;
        margin: 0;
        list-style: none;
        display: flex;
        gap: var(--gap-2xs);
        overflow-x: auto;
        white-space: nowrap
    }

    .breadcrumbs ul li:not(:last-child):after {
        content: "/";
        margin-inline-start: var(--gap-2xs);
        color: var(--middle-gray-color)
    }

    .btn {
        display: flex;
        padding-block: var(--gap-xs);
        padding-inline: var(--gap-m);
        border: none;
        border-radius: var(--default-border-radius);
        color: var(--white-color);
        cursor: pointer;
        transition: background-color .125s linear;
        text-decoration: none;
        width: fit-content;
        max-width: 100%
    }

    .btn.btn-primary {
        background-color: var(--primary-color)
    }

    .btn.btn-primary:not(:disabled,.disabled):hover, .btn.btn-primary:not(:disabled,.disabled):focus-visible {
        background-color: var(--primary-color-hover)
    }

    .btn.btn-primary:disabled, .btn.btn-primary .disabled {
        background-color: var(--primary-color-mutted);
        cursor: not-allowed
    }

    .btn.btn-primary-muted {
        background-color: var(--primary-color-mutted)
    }

    .btn.btn-primary-muted:not(:disabled,.disabled):hover, .btn.btn-primary-muted:not(:disabled,.disabled):focus-visible {
        background-color: hsl(var(--primary-color-mutted) h s l / 10%)
    }

    .btn.btn-primary-muted:disabled, .btn.btn-primary-muted .disabled {
        background-color: hsl(var(--primary-color-mutted) h s l / 20%);
        cursor: not-allowed
    }

    .btn.btn-accent {
        background-color: var(--accent-color)
    }

    .btn.btn-accent:not(:disabled,.disabled):hover, .btn.btn-accent:not(:disabled,.disabled):focus-visible {
        background-color: var(--accent-color-hover)
    }

    .btn.btn-accent:disabled, .btn.btn-accent .disabled {
        background-color: var(--accent-color-mutted);
        cursor: not-allowed
    }

    .btn.btn-red {
        background-color: var(--red-color);
        --text-color: var(--white-color)
    }

    .btn.btn-red:not(:disabled,.disabled):hover, .btn.btn-red:not(:disabled,.disabled):focus-visible {
        background-color: var(--red-color-hover)
    }

    .btn.btn-red:disabled, .btn.btn-red .disabled {
        background-color: hsl(var(--red-color-mutted) h s l / 20%);
        cursor: not-allowed
    }

    .table-responsive {
        overflow-x: auto
    }

    .table-responsive table th, .table-responsive table td {
        min-width: min-content
    }
}

@layer utilities {
    .text-align-center {
        text-align: center
    }

    .text-align-right {
        text-align: right
    }

    .d-flex {
        display: flex
    }

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

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

    .no-list-style {
        list-style: none
    }

    .no-text-decoration {
        text-decoration: none
    }

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

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

    .text-color-green {
        --text-color: var(--green-color)
    }

    .text-color-red {
        --text-color: var(--red-color)
    }

    .text-color-gray {
        --text-color: var(--text-gray-color)
    }

    .text-color-dark {
        --text-color: var(--color-dark)
    }

    .w-100 {
        width: 100%
    }

    .mbe-3xs {
        margin-block-end: var(--gap-3xs)
    }

    .mbe-2xs {
        margin-block-end: var(--gap-2xs)
    }

    .mbe-xs {
        margin-block-end: var(--gap-xs)
    }

    .mbe-s {
        margin-block-end: var(--gap-s)
    }

    .mbe-m {
        margin-block-end: var(--gap-m)
    }

    .mbe-l {
        margin-block-end: var(--gap-l)
    }

    .mbe-xl {
        margin-block-end: var(--gap-xl)
    }

    .mbe-2xl {
        margin-block-end: var(--gap-2xl)
    }

    .mbe-3xl {
        margin-block-end: var(--gap-3xl)
    }

    .gap-3xs {
        gap: var(--gap-3xs)
    }

    .gap-2xs {
        gap: var(--gap-2xs)
    }

    .gap-xs {
        gap: var(--gap-xs)
    }

    .gap-s {
        gap: var(--gap-s)
    }

    .gap-m {
        gap: var(--gap-m)
    }

    .gap-l {
        gap: var(--gap-l)
    }

    .gap-xl {
        gap: var(--gap-xl)
    }

    .gap-2xl {
        gap: var(--gap-2xl)
    }

    .gap-3xl {
        gap: var(--gap-3xl)
    }

    .gap-3xs-2xs {
        gap: var(--gap-3xs-2xs)
    }

    .gap-2xs-xs {
        gap: var(--gap-2xs-xs)
    }

    .gap-xs-s {
        gap: var(--gap-xs-s)
    }

    .gap-s-m {
        gap: var(--gap-s-m)
    }

    .gap-m-l {
        gap: var(--gap-m-l)
    }

    .gap-l-xl {
        gap: var(--gap-l-xl)
    }

    .gap-xl-2xl {
        gap: var(--gap-xl-2xl)
    }

    .gap-2xl-3xl {
        gap: var(--gap-2xl-3xl)
    }

    .gap-s-l {
        gap: var(--gap-s-l)
    }

    .full-page-width-bg {
        background-color: var(--background-color);
        --shadow-size: max(var(--wrap-padding-inline-size), calc((100vw - var(--wrap-max-inline-size) + var(--wrap-padding-inline-size) * 2) / 2));
        box-shadow: var(--shadow-size) 0 0 0 var(--background-color), calc(var(--shadow-size) * -1) 0 0 0 var(--background-color)
    }
}