/*!************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./frontend/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./frontend/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./frontend/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./frontend/shared/scss/base/single_layout.scss ***!
  \************************************************************************************************************************************************************************************************************************************************************************************************/
@import url(https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@100..900&display=swap);
/*!****************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./frontend/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./frontend/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./frontend/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./frontend/shared/scss/base/single_layout.scss (1) ***!
  \****************************************************************************************************************************************************************************************************************************************************************************************************/
body.single-blog {
  --theme-background: var(--single-blog-bg, var(--blue-900));
}

.brand-mark {
  position: absolute;
  background-color: var(--cyan-600);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 40rem;
  overflow-x: clip;
}
.brand-mark[data-overlay=true]:before {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: var(--overlay-gradient, var(--blue-800));
  opacity: 0.5;
  z-index: 1;
}
.brand-mark[data-overlay=true] .twz-image {
  z-index: 0;
}
.brand-mark:has(.twz-image) svg {
  display: none;
}
.brand-mark .twz-image {
  position: absolute;
  inset: 0;
}
.brand-mark .twz-image img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}
.brand-mark svg {
  height: 110rem;
  width: auto;
  position: absolute;
  right: -20%;
  top: 0;
  opacity: 0.2;
}

#content {
  --clip-path-offset: 7rem;
  max-width: var(--row-maxwidth, 1250px);
  width: calc(100% - var(--row-margin-inline));
  margin: 0 auto;
  margin-top: calc(var(--nav-height, 9rem) + 8rem);
  position: relative;
  z-index: 1;
}
@media (max-width: 767px) {
  #content {
    --clip-path-offset: 4rem;
    width: calc(100% - var(--row-margin-inline) / 2);
    margin-right: 0;
  }
}
#content:before {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-color: var(--single-bg, var(--white));
  clip-path: polygon(var(--clip-path-offset) 0, 100% 0, 100% 100%, 0 100%, 0 var(--clip-path-offset));
}
#content .row,
#content .twz-hero {
  --row-maxwidth: 90rem;
}
#content .row {
  --text-color: var(--text-color-dark);
}
#content .row:before {
  z-index: 0;
  width: calc(100vw - var(--row-margin-inline));
  max-width: 1300px;
}
@media (max-width: 1023px) {
  #content .row:before {
    width: calc(100% + var(--row-margin-inline));
  }
}
#content .row:last-of-type .twz-text {
  --paragraph-maxsize: 100%;
}
#content .row:last-of-type .twz-text__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2rem;
  align-items: center;
}
@media (min-width: 768px) {
  #content .row:last-of-type .twz-text__inner {
    flex-wrap: nowrap;
    justify-content: space-between;
  }
}
#content .row:last-of-type .twz-text__inner .btn {
  flex: 1 0 auto;
}
#content .row .twz {
  position: relative;
}