/*components/background/css/index.scsss*/
.background_area {
   z-index: -1;
   pointer-events: none;
   position: absolute;
   inset: 0%;
   overflow-x: clip;
}

main > .background_area {
   z-index: -1;
   pointer-events: none;
   position: absolute;
   inset: 0 0 auto 0;
   overflow-x: clip;
   height: clamp(300px, 80svh, 600px);
}
main > .background_area .background_fill {
   position: absolute;
   width: 100%;
   height: 100%;
   inset: 0;
   -o-object-fit: cover;
      object-fit: cover;
}
main > .background_area[background-size=unlimited] {
   height: auto;
   --_fade-length: 50%;
   --_fade-angle: 0deg;
}
main > .background_area[background-size=unlimited] .background_fill {
   position: relative;
   height: auto;
   width: 100%;
}
main > .background_area[fade~=left] {
   -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0.8) var(--_fade-length, 50%));
           mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0.8) var(--_fade-length, 50%));
}
main > .background_area[fade~=right] {
   -webkit-mask-image: linear-gradient(270deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0.8) var(--_fade-length, 50%));
           mask-image: linear-gradient(270deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0.8) var(--_fade-length, 50%));
}
main > .background_area[fade~="10"] {
   --_fade-length: 10%;
}
main > .background_area[fade~="20"] {
   --_fade-length: 20%;
}
main > .background_area[fade~="30"] {
   --_fade-length: 30%;
}
main > .background_area[fade~="40"] {
   --_fade-length: 40%;
}
main > .background_area[fade~="50"] {
   --_fade-length: 50%;
}
main > .background_area [fade~=bottom] .background_fill {
   -webkit-mask-image: linear-gradient(270deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0.8) var(--_fade-length, 50%));
           mask-image: linear-gradient(270deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0.8) var(--_fade-length, 50%));
}
main > .background_area [fade~="10"] {
   --_fade-length: 10%;
}
main > .background_area [fade~="20"] {
   --_fade-length: 20%;
}
main > .background_area [fade~="30"] {
   --_fade-length: 30%;
}
main > .background_area [fade~="40"] {
   --_fade-length: 40%;
}
main > .background_area [fade~="50"] {
   --_fade-length: 50%;
}

section > .background_area {
   z-index: -1;
   pointer-events: none;
   position: absolute;
   position: absolute;
   width: 100%;
   height: 100%;
   inset: 0;
   -o-object-fit: cover;
      object-fit: cover;
   overflow-x: clip;
}
section > .background_area .background_fill {
   position: absolute;
   width: 100%;
   height: 100%;
   inset: 0;
   -o-object-fit: cover;
      object-fit: cover;
}

.background_fill.color {
   --_background: var(--theme--background);
   background-color: vaR(--_background);
}
.background_fill.color[color=green] {
   --_background: #02a576;
}
.background_fill.color[color=light-green] {
   --_background: #6cde8e;
}
.background_fill.color[color=blue] {
   --_background: #5450e0;
}
.background_fill.color[color=light-blue] {
   --_background: #72b0fe;
}
.background_fill.color[color=purple] {
   --_background: #7e2cbf;
}
.background_fill.color[color=light-purple] {
   --_background: #b774f3;
}
.background_fill.color[color=red] {
   --_background: #f63f5c;
}
.background_fill.color[color=light-red] {
   --_background: #fa8d5a;
}
.background_fill.color[color=gold] {
   --_background: #fea237;
}
.background_fill.color[color=light-gold] {
   --_background: #f5c27f;
}
.background_fill.color[color=cyan] {
   --_background: #3ce4fa;
}
.background_fill.color[color=white] {
   --_background: #fff;
}
.background_fill.color[color=navy-grey-light] {
   --_background: #b9bbc2;
}
.background_fill.color[color=navy-grey-mid] {
   --_background: #737684;
}