*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  height: 100%;
  scroll-behavior: smooth;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  font-family: "Inter", sans-serif;
}

body > * > * > * {
  width: 100%;
  max-width: 96rem;
  margin-inline: auto;
}

body.content-s > main > *:not(:is(.cyf-hero, .page-toc)) > *,
main > section.content-s > * {
  max-width: 50rem;
}

main.modular-template > section:nth-of-type(odd) {
  --background-color: var(--cyf-text-0);
}
main.modular-template > section:nth-of-type(even),
main.modular-template:has(.content-with-image) > section {
  --background-color: var(--cyf-text-50);
}

main.error-template .error-id {
  font-size: 6rem !important;
  font-weight: 800 !important;
}
main.error-template .error-wrapper {
  padding-block: 10rem;
  text-align: center;
}

main section :is(ul, ol, dl),
p {
  line-height: 1.5em;
}

h1,
h2,
h3 {
  font-family: "Satoshi", sans-serif;
  scroll-margin: 6rem;
}

h1 {
  font-size: 2.25rem;
  font-weight: 500;
}
h2 {
  font-size: 2rem;
  font-weight: 700;
}
h3 {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2em;
}

ul,
ol {
  padding-left: 2.5rem;
}

a,
a .btn,
button {
  color: var(--color);
  transition-property: color, background-color, border-color;
  transition-duration: 300ms;
}

a:visited {
  color: var(--color);
}

a {
  text-decoration: underline;
}

a:hover {
  color: var(--cyf-primary-700);
  text-decoration: none;
}

.btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  max-width: max-content;
  padding: 0.8125rem 1.25rem;
  border: 1px solid currentColor;
  border-radius: 0.5rem;
  text-decoration: none;
  line-height: 1em;
}

.btn::after {
  margin-block: auto;
  content: "\f061";
  font-family: "Font Awesome 6 Free", sans-serif;
  font-weight: 600;
  transition-property: transform;
  transition-duration: 300ms;
}
:is(a, button):hover .btn::after,
:is(a, button):focus-visible .btn::after,
.btn:hover::after,
.btn:focus-visible::after {
  transform: rotate(-0.125turn);
}

.btn.btn-cancel::after {
  content: "\f00d";
}
.btn.btn-cancel:hover::after,
.btn.btn-cancel:focus-visible::after {
  transform: none;
}

.btn-primary {
  border-color: var(--cyf-primary-700);
  background-color: var(--cyf-primary-700);
  --color: var(--cyf-text-0);
  font-family: "Satoshi", sans-serif;
}

:is(a, button):focus-visible .btn-primary,
:is(a, button):hover .btn-primary,
:is(a, button).btn-primary:hover {
  color: var(--color);
  border-color: var(--cyf-primary-600);
  background-color: var(--cyf-primary-600);
}

.btn-secondary {
  border-color: var(--cyf-secondary-500);
  background-color: var(--cyf-secondary-500);
  --color: var(--cyf-text-0);
  font-family: "Satoshi", sans-serif;
}

:is(a, button)a:hover .btn-secondary,
:is(a, button).btn-secondary:hover {
  color: var(--cyf-text-0);
  border-color: var(--cyf-secondary-400);
  background-color: var(--cyf-secondary-400);
}

.btn-outline-secondary {
  background-color: transparent;
  border-color: var(--cyf-secondary-500);
  color: var(--cyf-secondary-500);
  font-family: "Satoshi", sans-serif;
}

:is(a, button):hover .btn-outline-secondary,
:is(a, button).btn-outline-secondary:hover {
  background-color: var(--cyf-secondary-400);
  border-color: var(--cyf-secondary-400);
  color: var(--cyf-text-0);
}

.btn-outline-white {
  border-color: var(--cyf-text-0);
  color: var(--cyf-text-0);
  font-family: "Satoshi", sans-serif;
}

:is(a, button):hover .btn-outline-white,
:is(a, button).btn-outline-white:hover {
  background-color: var(--cyf-text-0);
  color: var(--cyf-secondary-400);
}

.link-inline {
  color: var(--cyf-primary-500) !important;
  text-decoration: underline;
}

/* HOVER-UNDERLINE ANIMATION */
.hover-underline-animation {
  position: relative;
  display: inline-block;
}

.hover-underline-animation::before {
  content: "";
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 0.125rem;
  bottom: -0.125rem;
  left: 0;
  opacity: 0;
  background-color: currentColor;
  transform-origin: bottom center;
  transition: transform 0.25s ease-out, opacity 0.25s ease-out;
}

.hover-underline-animation:hover::before,
a:hover .hover-underline-animation::before {
  transform: scaleX(1);
  opacity: 1;
  transform-origin: bottom center;
}

.content {
  display: grid;
  gap: 1rem;
  padding: 3rem 2rem;
}

header,
main,
footer,
section {
  background-color: var(--background-color);
  color: var(--color);
}

section.h2-center h2 {
  text-align: center;
}

.cyf-hero {
  position: relative;
  --color: var(--cyf-text-0);
  background-image: linear-gradient(
    to bottom,
    var(--cyf-text-0) 0%,
    var(--cyf-text-0) 50%,
    var(--cyf-text-50) 50%,
    var(--cyf-text-50) 100%
  );
  contain: layout;
  z-index: 2;
}
.homepage-template .cyf-hero {
  height: 28rem;
}
.cyf-hero > section {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  height: 100%;
  padding: 3rem 2rem;
  background-color: var(--cyf-text-600);
}
.cyf-hero > section::before {
  content: "";
  position: absolute;
  top: 0;
  left: -10%;
  width: 120%;
  height: 100%;
  background-image: var(--hero-img-mask), var(--hero-img);
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: 0 0 0.5rem 0.5rem;
}
.cyf-hero .h1-wrapper {
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
  max-width: 46rem;
}
.cyf-hero .h1-wrapper h1 {
  margin: 0;
}
.cyf-hero .h1-wrapper h1 span {
  font-weight: 400;
  font-size: 1.25rem;
}
.cyf-hero #upcoming-event {
  position: absolute;
  top: 0;
  right: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 2rem;
  background-image: linear-gradient(
    to bottom,
    var(--cyf-primary-500),
    var(--cyf-primary-500),
    var(--cyf-primary-500-40)
  );
  border-radius: 0 0 0.5rem 0.5rem;
}
.cyf-hero #upcoming-event .card-news {
  box-shadow: none;
}

.cyf-hero #upcoming-event h2 {
  font-size: 1.5rem;
}

.card-news {
  display: flex;
  flex-direction: column;
  width: 25rem;
  height: 100%;
  border-radius: 0.5rem;
  overflow: hidden;
  background-color: var(--cyf-text-0);
  --color: var(--cyf-text-800);
  outline-offset: -0.5rem;
  box-shadow: -1px 1px 2px 2px var(--cyf-text-200);
  text-decoration: none;
}
.card-news .img-wrapper {
  width: 100%;
  height: 14rem;
  border-bottom: 1px solid var(--cyf-text-200);
  overflow: hidden;
}
.card-news img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  transition: all 0.3s ease-in-out;
}
.card-news .news-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.5rem;
  /* background-color: var(--cyf-text-0); */
  transition-property: background-color;
  transition-duration: 300ms;
}
.card-news .news-info .card-header {
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.card-news .news-info .card-header:empty {
  display: none;
}
.card-news .news-info .card-header p {
  flex: 1;
  min-width: max-content;
}
ul .card-news {
  width: auto;
}
:is(.card-news:hover, .card-news:focus-visible) .news-info {
  color: var(--color);
  background-color: var(--cyf-text-100);
}
:is(.card-news:hover, .card-news:focus-visible) h3 {
  transition-property: color;
  transition-duration: 300ms;
  color: var(--cyf-primary-700);
  text-decoration: underline;
}
:is(.card-news:hover, .card-news:focus-visible) img {
  transform: scale(1.25, 1.25);
}

.offer-content {
  position: relative;
  /* margin-top: 2.25rem; */
  padding-bottom: 3rem;
}
.offer-content::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 60rem;
  height: 100%;
  background-image: var(--bg-img);
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: 0.5rem;
}

.offer-content:nth-of-type(even)::before {
  left: auto;
  right: 0;
}

.card-offer {
  position: relative;
  display: flex;
  gap: 3rem;
  width: 100%;
  max-width: 50rem;
  padding: 2.25rem;
  background-color: var(--cyf-text-0);
  border-radius: 0.5rem;
  box-shadow: -1px 1px 2px 0px var(--cyf-text-200);
  z-index: 1;
}
.offer-content:nth-of-type(even) .card-offer {
  border-top-right-radius: 0;
}
.offer-content:nth-of-type(odd) .card-offer {
  margin-left: auto;
  border-top-left-radius: 0;
}
.card-offer .card-offer-content {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.card-offer .card-offer-content > *:last-child {
  flex: 1;
}
.card-offer .card-offer-content > ul {
  list-style-type: none;
  display: flex;
  flex-direction: column;
  justify-content: end;
  gap: 1rem;
  padding: 0;
}
:is(.card-offer, .card-offer-v) .card-offer-links {
  list-style-type: none;
  padding: 0;
}
:is(.card-offer, .card-offer-v) .card-offer-links a {
  justify-content: space-between;
  width: 100%;
  max-width: none;
  padding: 0.5rem 0;
  border: none;
}
.card-offer .card-offer-links a {
  width: 15rem;
}
:is(.card-offer, .card-offer-v) .card-offer-links a:hover {
  color: var(--cyf-primary-700);
}
:is(.card-offer, .card-offer-v) .card-offer-links li {
  padding-block: 1rem;
}
:is(.card-offer, .card-offer-v) .card-offer-links li:not(:last-child) {
  border-bottom: 1px solid var(--cyf-text-200);
}
:is(.card-offer, .card-offer-v) .card-offer-links a::after {
  color: var(--cyf-primary-700);
}

.cyf-news {
  --background-color: var(--cyf-secondary-500);
  --color: var(--cyf-text-0);
}
.cyf-news ul {
  list-style-type: none;
  /* display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); */
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2.25rem;
  padding: 0;
  margin-block: 2rem;
}
.cyf-news .card-news {
  box-shadow: -1px 1px 2px 2px var(--cyf-text-800);
  min-width: 20rem;
  max-width: 30rem;
}
.cyf-about-us {
  --background-color: var(--cyf-text-0);
}
.cyf-about-us ul {
  list-style-type: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2.25rem;
  padding: 0;
  margin-block: 2rem;
}
.cyf-about-us li {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.cyf-about-us li .about-us-content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.cyf-about-us li img {
  width: 7.5rem;
  height: 7.5rem;
}
.cyf-about-us li h3 {
  display: flex;
  flex-direction: column;
  color: var(--cyf-secondary-400);
  font-size: 3rem;
}
.cyf-about-us li h3 span {
  font-size: 1.5rem;
  line-height: 1em;
}

.cyf-opinions ul {
  list-style-type: none;
  display: grid;
  grid-template-columns: repeat(11, minmax(0, 1fr));
  gap: 1.5rem 2rem;
  padding: 0;
  margin-top: 2rem;
}
.cyf-opinions ul li {
  padding: 1.5rem;
  background-color: var(--cyf-primary-50);
  border-radius: 0.5rem;
}
.cyf-opinions ul li:nth-child(even) {
  grid-column: span 3 / span 3;
}
.cyf-opinions ul li:nth-child(6n + 1),
.cyf-opinions ul li:nth-child(6n + 3) {
  grid-column: span 4 / span 4;
}
.cyf-opinions ul li:nth-child(6n + 5) {
  grid-column: span 5 / span 5;
}
.cyf-opinions ul li blockquote {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.cyf-opinions ul li blockquote cite {
  font-style: normal;
  font-weight: 700;
  font-size: 1.25rem;
}

.cyf-achievements {
  --background-color: var(--cyf-primary-500);
}
.cyf-achievements ul {
  list-style-type: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2.25rem;
  padding: 0;
  margin-block: 2rem;
}
.cyf-achievements ul li a {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  height: 100%;
  padding: 1.5rem;
  border: 1px solid var(--cyf-primary-200);
  border-radius: 0.5rem;
  outline-offset: -0.5rem;
  text-decoration: none;
}
.cyf-achievements ul li :is(a:hover, a:focus-visible) {
  color: var(--color);
  border-color: var(--cyf-primary-300);
  background-color: var(--cyf-primary-300);
}
.cyf-achievements ul li a img {
  object-fit: contain;
  object-position: left center;
  height: 5rem;
}
.cyf-achievements ul li a h3 {
  display: flex;
  flex-direction: column;
}
.cyf-achievements ul li a h3 span {
  font-weight: 500;
  font-size: 1.25rem;
  line-height: 1em;
}

header {
  --background-color: var(--cyf-text-0);
}

header #header-content-wrapper {
  border-bottom: 1px solid var(--cyf-text-200);
}

header #header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 2rem;
}

header #header-content img {
  height: 2.5rem;
}

header #header-content #homepage {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--cyf-text-800);
  font-weight: 500;
  text-decoration: none;
  transition-property: opacity;
  transition-duration: 300ms;
}

header #header-content #homepage:hover {
  opacity: 0.7;
}

header #header-content #side {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.875rem;
}

nav#main-nav #main-nav-content-wrapper {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  min-height: 6rem;
  padding-inline: 2rem;
}

nav#main-nav #main-nav-content-wrapper #main-nav-content button {
  display: none;
  font-size: 1.25rem;
  background-color: transparent;
  border: none;
  outline-offset: 0.25rem;
}
nav#main-nav
  #main-nav-content-wrapper
  > :is(button:hover, button:focus-visible) {
  color: var(--cyf-primary-700);
}

nav#main-nav #main-nav-content-wrapper > a {
  font-size: 1.25rem;
}

nav#main-nav ul {
  list-style-type: none;
  display: flex;
  gap: 2.5rem;
  height: 100%;
  min-height: 6rem;
  padding: 0;
  font-weight: 500;
}

nav#main-nav ul a {
  text-decoration: none;
  color: var(--cyf-text-800);
  outline-offset: 0.25rem;
}

nav#main-nav ul a span {
  display: none;
}

nav#main-nav ul li {
  position: relative;
  padding-block: calc(2rem + 6px);
}
nav#main-nav ul :is(li:has(a:hover), li.selected)::after {
  background-color: var(--cyf-primary-600);
}

nav#main-nav ul li::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 4px;
  bottom: 0;
  left: 0;
  transition-property: background-color;
  transition-duration: 300ms;
}

nav#main-nav ul li.selected a,
nav#main-nav ul li a:hover {
  color: var(--cyf-primary-700);
}

main {
  flex: 1;
}

footer {
  --background-color: var(--cyf-secondary-900);
  --color: var(--cyf-text-0);
}

footer #sitemap {
  background-color: var(--cyf-secondary-500);
}

ul.langswitcher {
  transform: none;
  padding: 0;
  margin: 0 !important;
  font-weight: 500;
}

ul.langswitcher li {
  margin: 0;
}

.separator {
  background-color: var(--cyf-text-800);
  width: 1px;
  height: 1rem;
}

/* search */

.search-wrapper {
  gap: 2.5rem;
}

.search-wrapper .search-results ul {
  list-style-type: none;
  display: grid;
  gap: 1.5rem;
  padding: 0;
}

.card-search {
  position: relative;
  display: flex;
  gap: 1.5rem;
  padding: 1rem;
  border-radius: 0.5rem;
  outline-offset: -0.5rem;
  text-decoration: none;
}
.card-search::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  border: 1px solid var(--cyf-text-200);
  border-radius: 1rem;
}

.card-search:hover,
.card-search:focus-visible {
  background-color: var(--cyf-text-200);
  color: var(--cyf-text-800);
}

.card-search .card-search-content-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
:is(.card-search:hover, .card-search:focus-visible) h3 {
  text-decoration: underline;
}

.card-search .img-wrapper {
  flex-shrink: 0;
  width: 10rem;
  height: 8rem;
  background-color: var(--cyf-text-50);
  border-radius: 0.5rem;
  overflow: hidden;
}
.card-search img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  transition: all 0.3s ease-in-out;
}
:is(.card-search:hover, .card-search:focus-visible) img {
  transform: scale(1.25, 1.25);
}

.card-search .card-search-content-wrapper .date {
  margin-top: auto;
  color: var(--cyf-text-500);
}

.search-wrapper .search-results .no-results {
  text-align: center;
}

/* searchbox - default */

.searchbox-wrapper form {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  width: 100%;
}

.searchbox-wrapper label {
  cursor: pointer;
  font-size: 1.25rem;
  color: var(--cyf-primary-700);
}

.searchbox-wrapper input {
  flex: 1;
  width: 100%;
  padding-bottom: 0.25rem;
  background-color: transparent;
  border: none;
  border-bottom: 1px solid var(--cyf-text-200);
  outline: none;
}

/* searchbox - nav */

.searchbox-wrapper.v-nav[data-expanded="false"] form {
  display: none;
}

#main-nav
  #main-nav-content-wrapper:has(.searchbox-wrapper.v-nav[data-expanded="true"])
  #main-nav-content {
  display: none;
}

.searchbox-wrapper.v-nav[data-expanded="true"] form {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  max-width: 50rem;
  max-height: max-content;
  padding-inline: 1rem;
}

.searchbox-wrapper form .form-inputs {
  flex: 1;
}

.searchbox-wrapper form .form-input-wrapper {
  display: flex;
  gap: 1rem;
}

.searchbox-wrapper form .form-actions {
  display: flex;
  gap: 1rem;
}

.searchbox-wrapper.v-nav form + button {
  font-size: 1.25rem;
  background-color: transparent;
  border: none;
  outline-offset: 0.25rem;
}
.searchbox-wrapper.v-nav form + :is(button:hover, button:focus-visible) {
  color: var(--cyf-primary-700);
}

.searchbox-wrapper.v-nav[data-expanded="true"] form + button {
  display: none;
}

/* footer */

footer #sitemap-content-wrapper {
  display: flex;
  gap: 6rem 2.25rem;
}

footer #sitemap-content-wrapper #sitemap-content {
  flex: 1;
}

footer #sitemap-content-wrapper #sitemap-content > ul {
  list-style-type: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2.25rem;
  padding: 0;
}

footer #sitemap-content-wrapper #sitemap-content > ul > li {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

footer #sitemap-content-wrapper #sitemap-content > ul > li h3 {
  font-size: 1rem;
}

footer #sitemap-content-wrapper #sitemap-content > ul > li ul {
  list-style-type: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0;
}

footer #sitemap-content-wrapper #sitemap-contact {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}
footer #sitemap-content-wrapper #sitemap-contact address {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  font-style: normal;
}
footer #sitemap-content-wrapper #sitemap-contact img {
  /* height: 6rem; */
}

footer div.content:has(#main-footer-content-wrapper) {
  padding-bottom: 6rem;
}

footer #main-footer-content-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem 1rem;
}

footer #main-footer-content-wrapper ul {
  display: flex;
  gap: 0.75rem 1.5rem;
}

header #header-content #side a,
#breadcrumbs a,
footer #sitemap-content-wrapper #sitemap-content a,
footer #main-footer-content-wrapper #docs a {
  text-decoration: none;
}
header #header-content #side a:hover,
#breadcrumbs a:hover span,
footer #sitemap-content-wrapper #sitemap-content a:hover,
footer #main-footer-content-wrapper #docs a:hover {
  color: var(--cyf-primary-700);
  text-decoration: underline;
}

a:has(.fa-x-twitter):hover {
  color: var(--color-twitter-x);
}
a:has(.fa-facebook-f):hover {
  color: var(--color-facebook);
}
a:has(.fa-linkedin-in):hover {
  color: var(--color-linkedin);
}
a:has(.fa-youtube):hover {
  color: var(--color-youtube);
}

footer #main-footer-content-wrapper a i {
  font-size: 1.5rem;
}

.mx-auto {
  margin-inline: auto;
}

#breadcrumbs {
  z-index: 1;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 0;
  height: auto;
  padding: 0 !important;
  line-height: 1.25rem;
}

#breadcrumbs * {
  padding: 0 !important;
}

#breadcrumbs i {
  padding: 0 2rem 0 1.5rem !important;
  margin-top: 0.125rem;
}

#breadcrumbs > span {
  display: flex;
}

#breadcrumbs span:not(:has(span)) {
  width: 100%;
  max-width: 16rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#breadcrumbs > span:last-child {
  font-weight: 600;
}

ul.section-homepage {
  list-style-type: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.25rem;
  padding: 0;
}
ul.posts-homepage {
  list-style-type: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  /* display: flex;
  justify-content: center;
  flex-wrap: wrap; */
  gap: 2.25rem;
  padding: 0;
}
ul.posts-homepage li {
  /* flex: 1;
  min-width: 20rem;
  max-width: 30rem; */
}
ul:is(.section-homepage, .posts-homepage):last-child {
  margin-bottom: 0;
}
ul.section-homepage a.card {
  position: relative;
  display: flex;
  overflow: hidden;
  flex-direction: column;
  gap: 1.5rem;
  height: 100%;
  padding: 2.25rem;
  background-color: var(--cyf-text-0);
  box-shadow: 1px 1px 2px 0px var(--cyf-text-200);
  outline-offset: -0.5rem;
  border-radius: 0.5rem;
  text-decoration: none;
}
ul.section-homepage a.card * {
  z-index: 1;
}
ul.section-homepage a.card .card-header {
  display: flex;
  flex-wrap: wrap-reverse;
  align-items: start;
  gap: 1rem;
}
ul.section-homepage a.card .card-header h2 {
  /* flex: 1; */
  line-height: 2.25rem;
  margin-block: auto;
}
ul.section-homepage a.card .card-footer {
  display: flex;
  gap: 1rem;
  margin-top: auto;
}
ul.section-homepage a.card .btn {
  flex-shrink: 0;
}
ul.section-homepage :is(a.card:hover, a.card:focus-visible) {
  color: var(--color);
  background-color: var(--cyf-text-100);
}
ul.section-homepage a.card .section-card-logo {
  flex: 1;
  position: relative;
  z-index: 0;
}
ul.section-homepage a.card .section-card-logo img {
  position: absolute;
  right: -1.5rem;
  bottom: -1.5rem;
  max-width: 100%;
  max-height: 4rem;
  opacity: 0.3;
}

#docs ul,
ul#socials {
  list-style-type: none;
  padding: 0;
}

p.text-center {
  text-align: center;
}

p img {
  --img-max-width: 100%;
  display: block;
  max-width: min(var(--img-max-width), 100%);
}

img.img-center {
  margin-inline: auto;
}

/* img.img-sm {
  --img-max-width: 32rem;
}

img.img-md {
  --img-max-width: 48rem;
}

img.img-lg {
  --img-max-width: 80rem;
}

img.img-full {
  width: 100%;
} */

figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
}

dl {
  position: relative;
  display: grid;
  grid-template-columns: 12rem 1fr;
  gap: 1.5rem;
}

dt {
  grid-column: 1;
  font-weight: 600;
}

dt:not(:first-of-type)::before {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  margin-top: -0.75rem;
  background-color: var(--cyf-text-200);
}

dd {
  grid-column: 2;
}

dl + img {
  --img-max-width: 100%;
  display: block;
  max-width: min(var(--img-max-width), 100%);
}

hr {
  margin-block: 2rem;
  border: 1px solid var(--cyf-text-300);
}

.icon-link {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.icon-link > img {
  all: revert;
  height: 2rem;
}

.sidebar-layout {
  display: grid;
  grid-template-columns: 1fr 25rem;
  gap: 6rem;
}

.sidebar-layout #content {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

#sidebar {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

#sidebar:before {
  content: "";
  position: absolute;
  left: -3rem;
  width: 1px;
  height: 100%;
  background-color: var(--cyf-text-200);
}

#sidebar #share {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

#sidebar #share h2 {
  font-size: 1rem;
  font-weight: 400;
  margin: 0;
}

#sidebar #share ul {
  list-style-type: none;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 0;
}

#sidebar #related-posts {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

#sidebar #related-posts ul {
  list-style-type: none;
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 1rem;
  padding: 0;
}

.content-with-image-header {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 1rem;
}

.content-with-image {
  display: flex;
  flex-direction: row;
}
.content-with-image > .img-wrapper {
  flex: 1;
}
.content-with-image > .img-wrapper > img {
  width: 100%;
  border-radius: 0.5rem 0 0 0.5rem;
}

section:nth-of-type(odd) > * > .content-with-image {
  flex-direction: row-reverse;
}
section:nth-of-type(odd) > * > .content-with-image > .img-wrapper > img {
  border-radius: 0 0.5rem 0.5rem 0;
}

.content-with-image-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 2.25rem;
  background-color: var(--cyf-text-0);
  border-radius: 0.5rem;
  box-shadow: -1px 1px 2px 0px var(--cyf-text-200);
}
section:nth-of-type(even) > * > .content-with-image .content-with-image-card {
  margin-left: auto;
  border-top-left-radius: 0;
}
section:nth-of-type(odd) > * > .content-with-image .content-with-image-card {
  border-top-right-radius: 0;
}

.state-badge {
  max-width: max-content;
  padding: 0.5rem 1.25rem;
  border-radius: calc(infinity * 1px);
  font-weight: 500;
  color: var(--cyf-text-800);
}
.state-badge.success {
  background-color: #d1fae5;
}
.state-badge.warning {
  background-color: #fef3c7;
}
.state-badge.draft {
  background-color: #e2e8f0;
}

.columnize {
  column-count: 2;
  column-gap: 4rem;
  column-rule: 1px solid var(--cyf-text-200);
}
.columnize :is(h2, h3) {
  margin-bottom: 2rem;
}
.columnize cbr {
  display: block;
  height: 0;
  break-before: column;
}
.columnize .force {
  break-inside: avoid;
}

/* .columnize {
  column-count: 2;
  column-gap: 4rem;
  column-rule: 1px solid var(--cyf-text-200);
}
.columnize :is(h2, h3) {
  margin-bottom: 2rem;
}
.columnize > * {
  break-before: avoid;
  break-after: avoid;
  break-inside: avoid;
}
.columnize cbr {
  break-after: always;
  display: block;
  margin-bottom: 100%;
} */

main.project-template h2 {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2em;
  margin-inline: auto;
}

.card-related-post {
  display: flex;
  gap: 1rem;
  padding: 0.75rem;
  border-radius: 0.5rem;
  outline-offset: -0.5rem;
  text-decoration: none;
  overflow: hidden;
}
.card-related-post:hover,
.card-related-post:focus-visible {
  background-color: var(--cyf-text-200);
  color: var(--color);
}
.card-related-post .img-wrapper {
  flex-shrink: 0;
  width: 8.5rem;
  height: 6.5rem;
  border-radius: 0.5rem;
  overflow: hidden;
}
.card-related-post img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  transition: all 0.3s ease-in-out;
  background-color: var(--cyf-text-50);
}
:is(.card-related-post:hover, .card-related-post:focus-visible) img {
  transform: scale(1.25, 1.25);
}
.card-related-post .post-info {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
}
.card-related-post .post-info p:first-child {
  font-size: 0.75rem;
}
.card-related-post .post-info h3 {
  font-size: 1rem;
}
.card-related-post .post-info p {
  font-size: 0.875rem;
  display: -webkit-box;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.page-toc {
  position: sticky;
  top: 0;
  background-color: var(--cyf-text-0);
  box-shadow: 0px 6px 12px 0px var(--cyf-text-1000-5);
  z-index: 3;
}
.page-toc ul {
  list-style-type: none;
  display: flex;
  gap: 4rem;
  height: 5.25rem;
  padding: 2rem 2rem 2rem;
  overflow-x: auto;
  white-space: nowrap;
  /* overscroll-behavior: contain; */

  /* Internet Explorer, Edge */
  /* -ms-overflow-style: none; */
  /* Firefox */
  /* scrollbar-width: none; */
}
.page-toc ul::-webkit-scrollbar {
  /* Chrome, Safari, Opera */
  /* display: none; */
}
:is(.page-toc, .cyf-filters) ::-webkit-scrollbar {
  width: 1rem;
}
:is(.page-toc, .cyf-filters) ::-webkit-scrollbar-track {
  background: var(--cyf-text-0);
}
:is(.page-toc, .cyf-filters) ::-webkit-scrollbar-thumb {
  background: linear-gradient(
    45deg,
    var(--cyf-gradient-1),
    var(--cyf-gradient-2)
  );
  border: 0.25rem solid var(--cyf-text-0);
  border-radius: 1rem;
}
.page-toc ul a {
  max-width: max-content;
  text-decoration: none;
}
.page-toc ul a.active {
  color: var(--cyf-primary-700);
}
.page-toc ul a:hover {
  color: var(--cyf-primary-800);
  text-decoration: underline;
}

.photo-gallery :is(h2, h3) {
  margin-bottom: 2rem;
}

.photo-gallery ul {
  list-style-type: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  justify-items: center;
  gap: 1rem;
  padding: 0;
}
.photo-gallery ul li {
  width: 100%;
}
.photo-gallery .img-wrapper {
  width: 100%;
  height: 8rem;
  overflow: hidden;
  border: none;
  border-radius: 0.5rem;
  outline-offset: 0.5rem;
}
.photo-gallery .img-wrapper img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  transition: all 0.3s ease-in-out;
}
.photo-gallery :is(.img-wrapper:hover, .img-wrapper:focus-visible) img {
  transform: scale(1.25, 1.25);
}

.photo-gallery .gallery-dialog {
  --dialog-size-w: min(75vw, 80rem);
  --dialog-size-h: min(75vw, 60rem);

  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  max-width: var(--dialog-size-w);
  max-height: var(--dialog-size-h);
  margin: 0;
  border: none;
  border-radius: 1rem;
  background-color: var(--cyf-text-1000);
  text-align: center;
  z-index: 1000;
  overflow: hidden;
}
.photo-gallery .gallery-dialog .gallery-dialog-img-wrapper {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  max-width: var(--dialog-size-w);
  max-height: var(--dialog-size-h);
  height: 100%;
  width: 100%;
  overflow: hidden;
  padding: 0;
  margin: 0;
}
.photo-gallery .gallery-dialog :is(.close, .prev, .next) {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 4rem;
  height: 4rem;
  background-color: var(--cyf-text-0);
  border: none;
  border-radius: 999rem;
  font-size: 2rem;
  outline-offset: -0.5rem;
}
.photo-gallery
  .gallery-dialog
  :is(
    :is(.close, .prev, .next):hover,
    :is(.close, .prev, .next):focus-visible
  ) {
  background-color: var(--cyf-secondary-400);
  color: var(--cyf-text-0);
}
.photo-gallery .gallery-dialog .gallery-dialog-img-wrapper .close {
  top: 0.5rem;
  right: 0.5rem;
}
.photo-gallery .gallery-dialog .gallery-dialog-img-wrapper :is(.prev, .next) {
  top: 50%;
  transform: translateY(-50%);
}
.photo-gallery .gallery-dialog .gallery-dialog-img-wrapper .prev {
  left: 0.5rem;
}
.photo-gallery .gallery-dialog .gallery-dialog-img-wrapper .next {
  right: 0.5rem;
}
.photo-gallery .gallery-dialog::backdrop {
  background-color: var(--cyf-text-1000-50);
}
.photo-gallery .gallery-dialog .gallery-dialog-image-preview {
  max-width: var(--dialog-size-w);
  max-height: var(--dialog-size-h);
  object-fit: contain;
}

#return-to-top {
  display: flex;
  gap: 1rem;
  right: 0;
  bottom: 1rem;
  left: 0;
  width: auto;
  max-width: max-content;
  height: auto;
  padding: 1rem;
  margin-inline: auto;
  background: var(--cyf-text-0);
  color: var(--cyf-text-800);
  box-shadow: 0 0 2px 1px var(--cyf-text-200);
  z-index: 100;
  outline-offset: -0.5rem;
}
#return-to-top:hover {
  color: var(--cyf-text-0);
  background: var(--cyf-secondary-400);
}
#return-to-top i {
  position: static;
  color: inherit;
}
#return-to-top span {
  min-width: max-content;
}

.cyf-icon-pointer-1::before {
  margin-right: 0.5rem;
  content: "\f061";
  font-family: "Font Awesome 6 Free", sans-serif;
  font-weight: 600;
  color: var(--cyf-primary-500);
}

/* modular-sections */

.modular-sections .modular-template section:not(.cyf-hero) h2 {
  margin-bottom: 2rem;
  text-align: center;
}

.modular-sections .modular-template section:not(.cyf-hero) ul {
  list-style-type: none;
  /* display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); */
  display: flex;
  flex-wrap: wrap;
  gap: 2.25rem;
  padding: 0;
  margin-block: 2rem;
}

.modular-sections .modular-template section:not(.cyf-hero) ul:first-child {
  margin-top: 0;
}

.modular-sections .modular-template section:not(.cyf-hero) ul:last-child {
  margin-bottom: 0;
}

.modular-sections .modular-template section:not(.cyf-hero) ul.sections-list {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.modular-sections .modular-template section:not(.cyf-hero) ul.sections-list li {
  flex: 1;
  min-width: 20rem;
  max-width: 30rem;
}

.modular-sections .modular-template section:not(.cyf-hero) .btn {
  margin-top: 2rem;
}

.modular-sections .modular-template section:not(.cyf-hero) .thumbnail-content {
  display: flex;
  gap: 2.25rem;
}

.modular-sections
  .modular-template
  section:not(.cyf-hero)
  .thumbnail-content
  img {
  width: 20rem;
}

.modular-sections
  .modular-template
  section:not(.cyf-hero)
  .thumbnail-main-content {
  flex: 1;
}

/* modular sections / links */

.modular-sections-links main.modular-template > section.content {
  contain: layout;
}

.modular-sections-links main.modular-template > section:nth-of-type(odd) {
  --background-color: var(--cyf-text-50);
}

.modular-sections-links
  .modular-template
  > section.content:nth-of-type(even)
  .offer-content::before {
  left: auto;
  right: 0;
}
.modular-sections-links
  .modular-template
  > section.content:nth-of-type(even)
  .offer-content
  .card-offer {
  margin-left: 0;
  border-top-right-radius: 0;
}
.modular-sections-links
  .modular-template
  > section.content:nth-of-type(odd)
  .offer-content
  .card-offer {
  margin-left: auto;
  border-top-left-radius: 0;
}

/* card-video */

video {
  width: 100%;
}

.card-video {
  /* display: grid;
  grid-template-columns: repeat(2, 1fr); */
  display: flex;
  gap: 4rem;
  margin-bottom: 2rem;
}

.card-video > * {
  flex: 1;
}

.card-video .card-content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.card-video .card-content a {
  margin-block: 0 !important;
}

/* video homepage */

ul.video-homepage {
  list-style-type: none;
  display: grid;
  gap: 2.25rem;
  padding: 0;
}

ul.video-homepage li::after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background-color: var(--cyf-text-200);
}

/* filters */

.cyf-filters {
  position: relative;
  z-index: 2;
  background-color: var(--cyf-text-0);
  box-shadow: 0px 6px 12px 0px var(--cyf-text-1000-5);
  scroll-margin: 12rem;
}

.cyf-filters ul {
  display: flex;
  justify-content: safe center;
  align-items: center;
  gap: 2rem;
  list-style-type: none;
  padding: 2rem;
  overflow-x: auto;
}

.cyf-filters ul a {
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--cyf-text-800);
  border-radius: 1rem;
  text-decoration: none;
  font-weight: 500;
  outline-offset: 0.25rem;

  white-space: nowrap;
}

.cyf-filters ul :is(a:hover, a:focus-visible) {
  color: var(--cyf-text-0);
  background-color: var(--cyf-text-600);
  border: 1px solid var(--cyf-text-600);
}

.cyf-filters ul a.active {
  color: var(--cyf-text-0);
  background-color: var(--cyf-text-800);
}

/* custom styling for management */

ul.management-list {
  list-style-type: none;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem 5rem;
  padding: 0;
  margin-top: 1.5rem;
}

ul.management-list li {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 25rem;
  padding: 2rem;
  text-align: center;
}

ul.management-list img {
  width: 100%;
  margin-bottom: 1rem;
}

ul.management-list h3 {
  margin-block: 0.25rem;
}

ul.management-list h3 + p {
  margin-block: 0.25rem;
  font-size: 1.25rem;
}

/* blockquote */
main:not(.homepage-template) blockquote {
  display: flex;
  flex-direction: column;
  gap: 1rem;

  position: relative;
  max-width: 50rem;
  padding: 1rem 1rem 1rem 4rem;
  margin-inline: auto;
  margin-block: 1rem;
  background-color: var(--cyf-text-200);
  border-radius: 0.25rem;
}

main:not(.homepage-template) blockquote:first-child {
  margin-top: 0 !important;
}
main:not(.homepage-template) blockquote:last-child {
  margin-bottom: 0 !important;
}

main:not(.homepage-template) blockquote > p:first-of-type::before {
  font-family: "Font Awesome 6 Free", sans-serif;
  font-weight: 600;
  position: absolute;
  font-size: 2rem;

  content: "\f10d";
  top: 1rem;
  left: 2rem;
  transform: translateX(-50%);
}
main:not(.homepage-template) blockquote cite {
  font-style: normal;
  font-weight: 700;
  font-size: 1.25rem;
}

/* offer homepage */
.offer-homepage-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.75rem;
  margin-top: 2.25rem;
  padding: 0;
}

.card-offer-v {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 1.5rem;
  border-radius: 0.5rem;
  background-color: var(--cyf-text-0);
}

.card-offer-v > img {
  height: 10rem;
}

.card-offer-v ul + ul {
  list-style-type: none;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 0;
}

.hidden {
  display: none;
}

/* skip link */
#skip-link {
  z-index: 100;
  position: fixed;
  top: 0;
  left: -99999px;
  padding: 0.5rem 1.25rem;
  background-color: var(--cyf-secondary-500);
  box-shadow: 0 0 2px 1px var(--cyf-text-200);
  border-bottom-right-radius: 0.5rem;
  color: var(--cyf-text-0);
  text-decoration: none;
  outline-offset: -0.5rem;
}
#skip-link:focus {
  left: -0;
}