/** Varialbes used for mixins */
/*** Media Queries : http://breakpoint-sass.com/ ***/
/** breakpojtns values : http://breakpoint-sass.com/ ***/
/** deco image in _misc.scss name deco_XX **/
:root {
  --banner-min-height: 400px;
  --banner-max-height: min(90dvh, 720px);
  --banner-safe-space: 61px;
  --banner-height: min(100dvh - var(--banner-safe-space), var(--banner-max-height));
  --banner-ratio: 100 / 61;
  --banner-content-offset: 0;
  --banner-content-width: min(100% - 20px, var(--container-max-width, 1200px));
  --banner-content-margin-inline: auto;
  --banner-content-margin-block: 0;
  --banner-content-spacing-inline: 0;
  --banner-content-spacing-block: 4rem;
}

.banner {
  display: grid;
  grid-gap: 0px 0px;
  gap: 0px 0px;
  width: 100%;
  font-size: var(--font-size-md);
  color: var(--text-color);
  min-height: 400px;
  min-height: var(--banner-min-height);
  height: min(100dvh - 61px, min(90dvh, 720px));
  height: var(--banner-height);
  aspect-ratio: 100 / 61;
  aspect-ratio: var(--banner-ratio);
  isolation: isolate;
}
.banner .banner-bg .field, .banner .banner-bg .block, .banner .banner-bg .media {
  display: contents;
}
.banner .banner-bg img, .banner .banner-bg picture, .banner .banner-bg object, .banner .banner-bg video {
  flex: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  position: absolute;
}
.banner.banner--default {
  grid-auto-columns: 1fr;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}
.banner.banner--default .banner-bg {
  grid-area: 1/1/2/2;
  z-index: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
}
.banner.banner--default .banner-wrapper {
  grid-area: 1/1/2/2;
  z-index: 1;
  width: min(100% - 20px, 1200px);
  width: var(--banner-content-width);
  margin-left: auto;
  margin-right: auto;
  margin-left: var(--banner-content-margin-inline);
  margin-right: var(--banner-content-margin-inline);
  margin-bottom: 0;
  margin-bottom: var(--banner-content-margin-block);
  padding-left: 0;
  padding-right: 0;
  padding-left: var(--banner-content-spacing-inline);
  padding-right: var(--banner-content-spacing-inline);
  padding-top: 4rem;
  padding-bottom: 4rem;
  padding-top: var(--banner-content-spacing-block);
  padding-bottom: var(--banner-content-spacing-block);
}
.banner.banner--default .scroll-to-content {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
}
@media (min-width: 1024px) {
  .banner.banner--default .scroll-to-content {
    left: 63%;
  }
}
.banner.banner--large {
  --banner-height: auto;
  --banner-aspect-ratio: 3/2;
  --banner-content-offset: -19dvw;
  aspect-ratio: auto;
  grid-template-rows: auto auto;
  margin-bottom: var(--banner-content-spacing);
}
.banner.banner--large .shape_banner_large {
  display: block;
}
.banner.banner--large .shape_banner_large_bottom {
  width: 300%;
  transform: translateX(-33.33%);
  position: relative;
  bottom: -1px;
}
.banner.banner--large .banner-bg {
  position: relative;
  aspect-ratio: var(--banner-aspect-ratio);
}
.banner.banner--large .banner-bg .breadcrumb {
  position: relative;
  z-index: 2;
  width: min(100% - 20px, 1200px);
  width: var(--banner-content-width);
  margin-left: auto;
  margin-right: auto;
  margin-top: var(--spacing-auto-lg);
  margin-bottom: var(--spacing-auto-lg);
}
.banner.banner--large .banner-bg img, .banner.banner--large .banner-bg picture, .banner.banner--large .banner-bg object, .banner.banner--large .banner-bg video {
  position: absolute;
  z-index: 0;
}
.banner.banner--large .banner-bg .shape_banner_large_top {
  z-index: 1;
  position: absolute;
  bottom: -1px;
}
.banner.banner--large .banner-wrapper {
  z-index: 2;
  background-color: var(--color-secondary);
}
.banner.banner--large .banner-wrapper .banner-inner {
  width: min(100% - 20px, 1200px);
  width: var(--banner-content-width);
  margin-left: auto;
  margin-right: auto;
  margin-top: var(--spacing-auto);
  margin-bottom: var(--spacing-auto);
  margin-bottom: -19dvw;
}
@media (min-width: 1024px) {
  .banner.banner--large .shape_banner_large,
  .banner.banner--large .shape_banner_large_bottom {
    width: 200%;
    transform: translateX(-33.33%);
    position: relative;
    bottom: -1px;
  }
  .banner.banner--large .banner-wrapper .banner-inner {
    margin-top: -19dvw;
    margin-bottom: -13dvw;
  }
}
/*# sourceMappingURL=banners.css.map */