/* IMG */
img {
    height: auto;
    max-width: 100%;
    outline: none;
    vertical-align: middle;
    border-style: none
}

figure {
    display: flex;
    flex-direction: column;
    align-items: center;

    &:has(figcaption) {
    font-size: var(--fs-m)!important;
    background: var(--wh);
    box-shadow: var(--sh1);
    padding: var(--gpm-m);
    border-radius: var(--br-m)
    }

    & figcaption {margin-top: var(--n-xl)}
    
}

/* Video */
:where(.brxe-video) {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: relative;
    width: 100%;
    min-height: 350px
}

:where(.brxe-video) iframe, :where(.brxe-video) video {
    border: none;
    height: 100%;
    position: absolute;
    top: 0;
    width: 100%
}

:where(.brxe-video) video {object-fit: cover}

/* aspect ratio */
.ar-16x9 {aspect-ratio: 16 / 9}
.ar-1x1 {aspect-ratio: 1}

/* IMG fit */
.fit-cov{object-fit: cover}

/* Graphics design */
.deco {
  width: 100%;
  max-width: max(552px, min(622px, 100%));
  aspect-ratio: 1/1;
  border-radius: var(--br-3xl);
  border: var(--deco-w) solid var(--opc);
  background: linear-gradient(oklch(92.47% 0.14 98),oklch(65.65% 0.2104 38.97)) border-box;
  -webkit-mask: linear-gradient(var(--ui-bg) 0 0) padding-box, linear-gradient(var(--ui-bg) 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  position: absolute;
  z-index: -1;
  opacity: .8
}

/* Label with rotation */
.svg-rot{
position: absolute;
bottom: min(-4.5em, 5em);
width: clamp(96px, 16vw, 148px)!important;
height: clamp(96px, 16vw, 148px)!important;
animation: 24s linear 0s normal none infinite running rotate;
z-index: 2
}

@keyframes rotate {to {transform: rotate(1turn)}}


/* SVG */
[class*="brxe-"] svg:not([width]):not([height]) {
  min-width: 1em;
  min-height: 1em
}

svg:not(:root) {overflow: hidden}
[class*="brxe-"] svg {
  width: inherit;
  height: inherit
}

.gfx-ic {
  stroke-width: 0.1em;
  flex-shrink: 0;
  align-self: center
}

.xv-ic {stroke-width: 5}

.v-ic {
  background: var(--pos-alt);
  color: var(--ntl-100)
}
.x-ic {
  background: var(--neg-alt-lgt);
  color: var(--neg-alt-drk)
}
.ic-d {
  background: var(--prm-200);
  color: var(--prm-500)
}

/* Sizes */
.ic-s {
  aspect-ratio: 1;
  border-radius: var(--br-3xl);
  padding: .375em
}

.ic-xs {width: var(--gfx-s-2)!important} /* 16px */
.ic-ss {width:  calc(var(--n-xl) + var(--n-s))!important} /* 20px */
.ic-sm {width: var(--gfx-s-3)!important} /* 24px */
.ic-sl {width: var(--gfx-s-4)!important} /* 32px */
.ic-sxl {width: var(--gfx-s-5)!important} /* 48px */