/* base */
*, *::before, *::after {
    box-sizing: border-box;
}

:focus-visible {
    outline: 2px solid #5770a5;
    outline-offset: 2px;
}

 transition: all 0.5s ease;
}

tr {
    transition: all 0.2s ease;
}

tr:hover {
    transition: all 0.2s ease;
}

/* margin (top/bottom) */
[data-adaptive~="margin-5"] {
    margin-top: 5px;
    margin-bottom: 5px;
}

[data-adaptive~="margin-10"] {
    margin-top: 10px;
    margin-bottom: 10px;
}

[data-adaptive~="margin-15"] {
    margin-top: 15px;
    margin-bottom: 15px;
}

[data-adaptive~="margin-20"] {
    margin-top: 20px;
    margin-bottom: 20px;
}

[data-adaptive~="margin-30"] {
    margin-top: 30px;
    margin-bottom: 30px;
}

[data-adaptive~="margin"] {
   // margin-top: 60px;
    margin-bottom: 60px;
}

/* padding (top/bottom) */
[data-adaptive~="padding-5"] {
    padding: 5px;
}

[data-adaptive~="padding-10"] {
    padding: 10px;
}

[data-adaptive~="padding-15"] {
    padding: 15px;
}

[data-adaptive~="padding-20"] {
    padding: 20px;
}

[data-adaptive~="padding-30"] {
    padding: 30px;
}

[data-adaptive~="padding"] {
    padding: 60px;
}

/* marginobject (top/bottom for children) */
[data-adaptive~="marginobject-5"] > * {
    margin-top: 5px;
    margin-bottom: 5px;
}

[data-adaptive~="marginobject-10"] > * {
    margin-top: 10px;
    margin-bottom: 10px;
}

[data-adaptive~="marginobject-15"] > * {
    margin-top: 15px;
    margin-bottom: 15px;
}

[data-adaptive~="marginobject-20"] > * {
    margin-top: 20px;
    margin-bottom: 20px;
}

[data-adaptive~="marginobject-30"] > * {
    margin-top: 30px;
    margin-bottom: 30px;
}

[data-adaptive~="marginobject"] > * {
    margin-top: 60px;
    margin-bottom: 60px;
}

/* paddingobject (padding for children) */
[data-adaptive~="padding-object-5"]{
    padding: 5px;
}

[data-adaptive~="padding-object-10"] {
    padding: 10px;
}

[data-adaptive~="padding-object-15"]{
    padding: 15px;
}

[data-adaptive~="padding-object-20"]{
    padding: 20px;
}

[data-adaptive~="padding-object-30"]{
    padding: 30px;
}

[data-adaptive~="padding-object-40"]{
    padding: 40px;
}

[data-adaptive~="padding-object-45"]{
    padding: 45px;
}

[data-adaptive~="padding-object"]{
    padding: 60px;
}

[data-adaptive*="padding-object-"] > :first-child {
    padding-left: 0px;
}

[data-adaptive*="paddingobject-"] > :last-child {
    padding-right: 0px;
}

[data-adaptive*="marginobject-"] > :first-child {
    margin-left: 0px;
}

[data-adaptive*="marginobject-"] > :last-child {
    margin-right: 0px;
}

/* mr-* (gap via margin-right) */
[data-adaptive~="mr-10"] > * {
    margin-right: 10px;
}

[data-adaptive~="mr-10"] > :last-child {
    margin-right: 0px;
}

[data-adaptive~="mr-15"] > * {
    margin-right: 15px;
}

[data-adaptive~="mr-15"] > :last-child {
    margin-right: 0px;
}

[data-adaptive~="mr-20"] > * {
    margin-right: 20px;
}

[data-adaptive~="mr-20"] > :last-child {
    margin-right: 0px;
}

[data-adaptive~="mr-30"] > * {
    margin-right: 30px;
}

[data-adaptive~="mr-30"] > :last-child {
    margin-right: 0px;
}

[data-adaptive~="mr-40"] > * {
    margin-right: 40px;
}

[data-adaptive~="mr-40"] > :last-child {
    margin-right: 0px;
}

[data-adaptive~="mr-60"] > * {
    margin-right: 60px;
}

[data-adaptive~="mr-60"] > :last-child {
    margin-right: 0px;
}

/* pd-* (gap via padding-right) */
[data-adaptive~="pd-10"] > * {
    padding-right: 10px;
}

[data-adaptive~="pd-10"] > :last-child {
    padding-right: 0px;
}

[data-adaptive~="pd-15"] > * {
    padding-right: 15px;
}

[data-adaptive~="pd-15"] > :last-child {
    padding-right: 0px;
}

[data-adaptive~="pd-20"] > * {
    padding-right: 20px;
}

[data-adaptive~="pd-20"] > :last-child {
    padding-right: 0px;
}

[data-adaptive~="pd-30"] > * {
    padding-right: 30px;
}

[data-adaptive~="pd-30"] > :last-child {
    padding-right: 0px;
}

[data-adaptive~="pd-40"] > * {
    padding-right: 40px;
}

[data-adaptive~="pd-40"] > :last-child {
    padding-right: 0px;
}

[data-adaptive~="pd-60"] > * {
    padding-right: 60px;
}

[data-adaptive~="pd-60"] > :last-child {
    padding-right: 0px;
}

/* Grid: включение */
[data-adaptive~="grid"] {
    display: grid;
    box-sizing: border-box;
}

/* Количество колонок */
[data-adaptive~="gridcols-1"] { grid-template-columns: repeat(1, 1fr); }
[data-adaptive~="gridcols-2"] { grid-template-columns: repeat(2, 1fr); }
[data-adaptive~="gridcols-3"] { grid-template-columns: repeat(3, 1fr); }
[data-adaptive~="gridcols-4"] { grid-template-columns: repeat(4, 1fr); }
[data-adaptive~="gridcols-5"] { grid-template-columns: repeat(5, 1fr); }

@media (max-width: 991px) {
[data-adaptive~="gridcols-md-1"] { grid-template-columns: repeat(1, 1fr); }
[data-adaptive~="gridcols-md-2"] { grid-template-columns: repeat(2, 1fr); }
[data-adaptive~="gridcols-md-3"] { grid-template-columns: repeat(3, 1fr); }
[data-adaptive~="gridcols-md-4"] { grid-template-columns: repeat(4, 1fr); }
[data-adaptive~="gridcols-md-5"] { grid-template-columns: repeat(5, 1fr); }
}

@media (max-width: 768px) {
[data-adaptive~="gridcols-sm"] { grid-template-columns: 1fr; }
}

/* Количество строк */
[data-adaptive~="gridrows-1"] { grid-template-rows: repeat(1, auto); }
[data-adaptive~="gridrows-2"] { grid-template-rows: repeat(2, auto); }
[data-adaptive~="gridrows-3"] { grid-template-rows: repeat(3, auto); }

/* Отступы между ячейками */
[data-adaptive~="gridgap-5"]  { grid-gap: 5px; }
[data-adaptive~="gridgap-10"] { grid-gap: 10px; }
[data-adaptive~="gridgap-15"] { grid-gap: 15px; }
[data-adaptive~="gridgap-20"] { grid-gap: 20px; }
[data-adaptive~="gridgap-30"] { grid-gap: 30px; }
[data-adaptive~="gridgap"]    { grid-gap: 60px; }

/* Выравнивание по горизонтали */
[data-adaptive~="gridstart"]     { justify-content: start; }
[data-adaptive~="gridend"]       { justify-content: end; }
[data-adaptive~="gridcenter"]    { justify-content: center; }
[data-adaptive~="gridbetween"]   { justify-content: space-between; }
[data-adaptive~="gridaround"]    { justify-content: space-around; }

/* Выравнивание по вертикали */
[data-adaptive~="gridalignstart"]   { align-items: start; }
[data-adaptive~="gridalignend"]     { align-items: end; }
[data-adaptive~="gridaligncenter"]  { align-items: center; }
[data-adaptive~="gridalignstretch"] { align-items: stretch; }



/* repeat(auto-fit, ...) */
[data-adaptive~="grid-auto-fit"] {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

/* minmax с разными размерами */
[data-adaptive~="grid-minmax-200"] {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
[data-adaptive~="grid-minmax-250"] {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
[data-adaptive~="grid-minmax-300"] {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

/* gap между элементами */
[data-adaptive~="grid-gap-5"]  { gap: 5px; }
[data-adaptive~="grid-gap-10"] { gap: 10px; }
[data-adaptive~="grid-gap-15"] { gap: 15px; }
[data-adaptive~="grid-gap-20"] { gap: 20px; }
[data-adaptive~="grid-gap-30"] { gap: 30px; }
[data-adaptive~="grid-gap"]    { gap: 60px; }

/* Адаптивность (пример) */
@media (max-width: 768px) {
    [data-adaptive~="gridcols-3"] { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
    [data-adaptive~="gridcols-3"] { grid-template-columns: repeat(1, 1fr); }
}

@media (max-width: 768px) {
  [data-adaptive~="grid-cols-2"] {
    grid-template-columns: 1fr;
  }
}

/* flex */
[data-adaptive~="flex"] {
    display: flex;
    flex-wrap: wrap;
}

[data-adaptive~="inlineflex"] {
    display: inline-flex;
    flex-wrap: wrap;
}

[data-adaptive~="flexnowrap"] {
    flex-wrap: nowrap;
}

[data-adaptive~="flexwrap"] {
    flex-wrap: wrap;
}

[data-adaptive~="flexbetween"] {
    justify-content: space-between;
}

[data-adaptive~="flexaround"] {
    justify-content: space-around;
}

[data-adaptive~="flexjscenter"] {
    justify-content: center;
}

[data-adaptive~="flexcenter"] {
    align-items: center;
}

[data-adaptive~="flexstart"] {
    align-items: flex-start;
}

[data-adaptive~="flexend"] {
    align-items: flex-end;
}

[data-adaptive~="flexcolumn"] {
    flex-direction: column;
}

[data-adaptive~="flexgrow"] > * {
    flex: 1;
}

/* columns */
[data-adaptive~="col-lg-1"] > * {
    max-width: 100%;
    width: 100%;
}

[data-adaptive~="col-lg-2"] > * {
    max-width: calc(50% - 15px);
    width: 100%;
}

[data-adaptive~="col-lg-3"] > * {
    max-width: calc(100% / 3 - 15px);
    width: 100%;
}

[data-adaptive~="col-lg-4"] > * {
    max-width: calc(25% - 15px);
    width: 100%;
}

[data-adaptive~="col-lg-5"] > * {
    max-width: calc(100% / 5 - 15px);
    width: 100%;
}

.center {
    text-align: center;
}

[data-adaptive~="center"] > * {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.overlay {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    top: 0;
    z-index: 3;
}