/* CLIENT — static component styles.
 * Search the sg- class in HTML to find the element. Reused classes share a rule.
 * The :is() scope preserves former inline priority over template selectors.
 * No element with id smart-static-priority is required. Keep this scope.
 * JavaScript can override normal properties inline during interactions.
 */

:is(#smart-static-priority,:root) .sg-client-border-01 {
  --border-bottom-width:  1px;
  --border-color:  var(
                            --token-3992e4b1-4934-4fc5-9122-067e1dd544fa,
                            rgb(221, 229, 237)
                          );
  --border-left-width:  1px;
  --border-right-width:  1px;
  --border-style:  solid;
  --border-top-width:  1px;
  background: linear-gradient(110deg,var(--token-60bca774-6ba3-4c34-a431-2fd8d1ea1b8a, rgb(50, 50, 50)) 0%,var(--token-a4ae1e21-2b71-445e-8792-31bd9220629a, rgb(0, 0, 0)) 100%);
  background-color: rgba(0,0,0,0);
  border-bottom-left-radius: 100px;
  border-bottom-right-radius: 100px;
  border-top-left-radius: 100px;
  border-top-right-radius: 100px;
}

:is(#smart-static-priority,:root) .sg-client-layout-01 {
  overflow-x: clip;
  display: flex;
  position: relative;
}

:is(#smart-static-priority,:root) .sg-client-layout-02 {
  display: flex;
  position: relative;
  list-style-type: none;
  padding: 0;
  margin: 0;
  justify-content: flex-start;
  flex-direction: row;
  gap: 70px;
  align-items: center;
  width: 100%;
  height: 100%;
  max-height: 100%;
  max-width: 100%;
  transform: translateX(-70px);
}

:is(#smart-static-priority,:root) .sg-client-layout-03 {
  width: auto;
  aspect-ratio: 4.642857142857143;
}

:is(#smart-static-priority,:root) .sg-client-layout-04 {
  width: auto;
  aspect-ratio: 4.333333333333333;
}

:is(#smart-static-priority,:root) .sg-client-layout-05 {
  width: auto;
  aspect-ratio: 3.5135135135135136;
}

:is(#smart-static-priority,:root) .sg-client-layout-06 {
  width: auto;
  aspect-ratio: 4.482758620689655;
}

:is(#smart-static-priority,:root) .sg-client-layout-07 {
  width: auto;
  aspect-ratio: 4.0625;
}

:is(#smart-static-priority,:root) .sg-client-layout-08 {
  width: auto;
  aspect-ratio: 4.193548387096774;
}

:is(#smart-static-priority,:root) .sg-client-layout-09 {
  display: flex;
  position: relative;
  list-style-type: none;
  padding: 0;
  margin: 0;
  justify-content: flex-start;
  flex-direction: row;
  gap: 50px;
  align-items: center;
  width: 100%;
  height: 100%;
  max-height: 100%;
  max-width: 100%;
  transform: translateX(-50px);
}

:is(#smart-static-priority,:root) .sg-client-layout-10 {
  display: flex;
  position: relative;
  list-style-type: none;
  padding: 0;
  margin: 0;
  justify-content: flex-start;
  flex-direction: row;
  gap: 30px;
  align-items: center;
  width: 100%;
  height: 100%;
  max-height: 100%;
  max-width: 100%;
  transform: translateX(-30px);
}