@charset "UTF-8";
/*--------------
Components
--------------*/
/*---Contents---*/
/*

- Common Mixins
- Navigation
- Theme Styles
- Buttons
- Card
- Arrow List

*/
/***********************************
   Common Mixins
************************************/
/***********************************
   Navigation
************************************/
/***********************************
   Theme Styles
************************************/
:root {
  /* Buttons */
  --btn-primary-text-color: var(--neutral-100);
  --btn-primary-hover-text-color: var(--neutral-100);
  --btn-primary-bg-color: var(--primary-400);
  --btn-primary-hover-bg-color: var(--primary-500);
  --btn-primary-border-color: var(--primary-400);
  --btn-primary-hover-border-color: var(--primary-500);
  --btn-primary-icon-color: var(--primary-400);
  --btn-primary-hover-icon-color: var(--primary-500);
  --btn-default-text-color: var(--secondary-400);
  --btn-default-hover-text-color: var(--secondary-500);
  --btn-default-bg-color: var(--transparent);
  --btn-default-hover-bg-color: var(--transparent);
  --btn-default-border-color: var(--secondary-400);
  --btn-default-hover-border-color: var(--secondary-500);
  --btn-default-icon-color: var(--primary-400);
  --btn-default-hover-icon-color: var(--primary-500);
}
.theme--white {
  --btn-primary-text-color: var(--neutral-100);
  --btn-primary-hover-text-color: var(--neutral-100);
  --btn-primary-bg-color: var(--primary-400);
  --btn-primary-hover-bg-color: var(--primary-500);
  --btn-primary-border-color: var(--primary-400);
  --btn-primary-hover-border-color: var(--primary-500);
  --btn-primary-icon-color: var(--neutral-100);
  --btn-primary-hover-icon-color: var(--neutral-100);
  --btn-default-text-color: var(--secondary-400);
  --btn-default-hover-text-color: var(--secondary-300);
  --btn-default-bg-color: var(--transparent);
  --btn-default-hover-bg-color: var(--transparent);
  --btn-default-border-color: var(--primary-400);
  --btn-default-hover-border-color: var(--primary-400);
  --btn-default-icon-color: var(--primary-400);
  --btn-default-hover-icon-color: var(--primary-400);
}
.theme--light {
  --btn-primary-text-color: var(--neutral-100);
  --btn-primary-hover-text-color: var(--neutral-100);
  --btn-primary-bg-color: var(--primary-400);
  --btn-primary-hover-bg-color: var(--primary-500);
  --btn-primary-border-color: var(--primary-400);
  --btn-primary-hover-border-color: var(--primary-500);
  --btn-primary-icon-color: var(--neutral-100);
  --btn-primary-hover-icon-color: var(--neutral-100);
  --btn-default-text-color: var(--secondary-400);
  --btn-default-hover-text-color: var(--secondary-300);
  --btn-default-bg-color: var(--transparent);
  --btn-default-hover-bg-color: var(--transparent);
  --btn-default-border-color: var(--primary-400);
  --btn-default-hover-border-color: var(--primary-400);
  --btn-default-icon-color: var(--primary-400);
  --btn-default-hover-icon-color: var(--primary-400);
}
.theme--primary {
  --btn-primary-text-color: var(--primary-400);
  --btn-primary-hover-text-color: var(--primary-400);
  --btn-primary-bg-color: var(--secondary-400);
  --btn-primary-hover-bg-color: var(--neutral-100);
  --btn-primary-border-color: var(--secondary-400);
  --btn-primary-hover-border-color: var(--neutral-100);
  --btn-primary-icon-color: var(--primary-400);
  --btn-primary-hover-icon-color: var(--primary-400);
  --btn-default-text-color: var(--neutral-100);
  --btn-default-hover-text-color: var(--tertiary-400);
  --btn-default-bg-color: var(--transparent);
  --btn-default-hover-bg-color: var(--transparent);
  --btn-default-border-color: var(--neutral-100);
  --btn-default-hover-border-color: var(--tertiary-400);
  --btn-default-icon-color: var(--neutral-100);
  --btn-default-hover-icon-color: var(--tertiary-400);
}
.theme--secondary {
  --btn-primary-text-color: var(--neutral-100);
  --btn-primary-hover-text-color: var(--neutral-100);
  --btn-primary-bg-color: var(--primary-400);
  --btn-primary-hover-bg-color: var(--primary-500);
  --btn-primary-border-color: var(--primary-400);
  --btn-primary-hover-border-color: var(--primary-500);
  --btn-primary-icon-color: var(--neutral-100);
  --btn-primary-hover-icon-color: var(--neutral-100);
  --btn-default-text-color: var(--neutral-100);
  --btn-default-hover-text-color: var(--tertiary-400);
  --btn-default-bg-color: var(--transparent);
  --btn-default-hover-bg-color: var(--transparent);
  --btn-default-border-color: var(--neutral-100);
  --btn-default-hover-border-color: var(--tertiary-400);
  --btn-default-icon-color: var(--primary-400);
  --btn-default-hover-icon-color: var(--primary-400);
}
.theme--dark {
  --btn-primary-text-color: var(--neutral-100);
  --btn-primary-hover-text-color: var(--neutral-100);
  --btn-primary-bg-color: var(--primary-400);
  --btn-primary-hover-bg-color: var(--primary-500);
  --btn-primary-border-color: var(--primary-400);
  --btn-primary-hover-border-color: var(--primary-500);
  --btn-primary-icon-color: var(--neutral-100);
  --btn-primary-hover-icon-color: var(--neutral-100);
  --btn-default-text-color: var(--neutral-100);
  --btn-default-hover-text-color: var(--neutral-200);
  --btn-default-bg-color: var(--transparent);
  --btn-default-hover-bg-color: var(--transparent);
  --btn-default-border-color: var(--neutral-100);
  --btn-default-hover-border-color: var(--neutral-200);
  --btn-default-icon-color: var(--primary-400);
  --btn-default-hover-icon-color: var(--primary-500);
}
.theme--black {
  --btn-primary-text-color: var(--neutral-100);
  --btn-primary-hover-text-color: var(--neutral-100);
  --btn-primary-bg-color: var(--primary-400);
  --btn-primary-hover-bg-color: var(--primary-500);
  --btn-primary-border-color: var(--primary-400);
  --btn-primary-hover-border-color: var(--primary-500);
  --btn-primary-icon-color: var(--neutral-100);
  --btn-primary-hover-icon-color: var(--neutral-100);
  --btn-default-text-color: var(--neutral-100);
  --btn-default-hover-text-color: var(--neutral-200);
  --btn-default-bg-color: var(--transparent);
  --btn-default-hover-bg-color: var(--transparent);
  --btn-default-border-color: var(--neutral-100);
  --btn-default-hover-border-color: var(--neutral-200);
  --btn-default-icon-color: var(--primary-400);
  --btn-default-hover-icon-color: var(--primary-500);
}
/***********************************
   Buttons
************************************/
.bricks-button {
  letter-spacing: inherit;
  padding: inherit;
}
[class*="btn--"] {
  transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  padding-top: 0.8em;
  padding-bottom: 0.8em;
  padding-left: 1.6em;
  padding-right: 1.6em;
  line-height: 1.2em;
  font-weight: 700;
}
[class*="btn--"]:is(:hover, :focus) {
  transform: translatey(-3px);
}
[class*="btn--"] svg {
  height: 1em;
  width: 1em;
}
.btn--primary {
  color: var(--btn-primary-text-color);
  background-color: var(--btn-primary-bg-color);
  border-color: var(--btn-primary-border-color);
  border-width: 2px;
  border-style: solid;
  border-radius: var(--radius-s);
  min-width: 10rem;
}
.btn--primary i::before {
  transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  color: var(--btn-primary-icon-color);
}
.btn--primary svg {
  height: 1em;
  width: 1em;
  fill: var(--btn-primary-icon-color);
}
.btn--primary:is(:hover, :focus) {
  color: var(--btn-primary-hover-text-color);
  background-color: var(--btn-primary-hover-bg-color);
  border-color: var(--btn-primary-hover-border-color);
}
.btn--primary:is(:hover, :focus) i::before {
  color: var(--btn-primary-hover-icon-color);
}
.btn--primary:is(:hover, :focus) svg {
  fill: var(--btn-primary-hover-icon-color);
}
.btn--default {
  color: var(--btn-default-text-color);
  background-color: var(--btn-default-bg-color);
  border-color: var(--btn-default-border-color);
  border-bottom-width: 2px;
  border-bottom-style: solid;
  padding-inline: 0;
}
.btn--default i::before {
  transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  color: var(--btn-default-icon-color);
}
.btn--default:is(:hover, :focus) {
  color: var(--btn-default-hover-text-color);
  background-color: var(--btn-default-hover-bg-color);
  border-color: var(--btn-default-hover-border-color);
}
.btn--default:is(:hover, :focus) i::before {
  color: var(--btn-default-hover-icon-color);
}
.btn--muted {
  color: var(--secondary-400);
  background-color: var(--tertiary-400);
  border-color: var(--tertiary-400);
}
.btn--muted:is(:hover, :focus) {
  color: var(--secondary-400);
  background-color: var(--secondary-200);
  border-color: var(--secondary-200);
}
.btn--success {
  color: var(--white);
  background-color: var(--success-400);
  border-color: var(--success-400);
}
.btn--success:is(:hover, :focus) {
  color: var(--white);
  background-color: var(--success-500);
  border-color: var(--success-500);
}
.btn--info {
  color: var(--white);
  background-color: var(--info-400);
  border-color: var(--info-400);
}
.btn--info:is(:hover, :focus) {
  color: var(--white);
  background-color: var(--info-500);
  border-color: var(--info-500);
}
.btn--warning {
  color: var(--white);
  background-color: var(--warning-400);
  border-color: var(--warning-400);
}
.btn--warning:is(:hover, :focus) {
  color: var(--white);
  background-color: var(--warning-500);
  border-color: var(--warning-500);
}
.btn--danger {
  color: var(--white);
  background-color: var(--danger-400);
  border-color: var(--danger-400);
}
.btn--danger:is(:hover, :focus) {
  color: var(--white);
  background-color: var(--danger-500);
  border-color: var(--danger-500);
}
.btn--wide {
  width: 100%;
}
.btn--large {
  padding: 1em 2em 1em 2em;
}
.btn--large.btn--default {
  padding-inline: 0;
}
.btn--small {
  font-size: var(--body-xs);
  min-width: unset;
}
/*** Responsive Styles Smartphone Only ***/
@media (max-width: 767px) {
  [class*="btn--"] {
    width: 100%;
  }
}
/***********************************
   Card
************************************/
.card {
  display: flex;
  flex-direction: column;
  position: relative;
  background-color: var(--white);
  box-shadow: var(--shadow-100);
  border-radius: var(--radius-m);
  overflow: hidden;
}
.card__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  padding: var(--space-l);
  flex-grow: 1;
}
.card__heading, .card__heading a {
  font-size: var(--text-m);
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  /* number of lines to show */
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card__date {
  color: var(--primary-400);
  font-size: var(--body-xs);
  line-height: 1em;
}
.card__body-text {
  font-size: var(--body-xs);
}
.card__image-wrapper {
  position: relative;
  overflow: hidden;
  height: 52vw;
  max-height: 240px;
  order: -1;
}
.card__image {
  transition: all 0.8s ease;
  -webkit-transition: all 0.8s ease;
  -o-transition: all 0.8s ease;
  -moz-transition: all 0.8s ease;
  position: absolute;
  inset: 0;
  height: 100%;
  object-fit: cover;
}
.card--hoverable {
  transition: all 0.8s ease;
  -webkit-transition: all 0.8s ease;
  -o-transition: all 0.8s ease;
  -moz-transition: all 0.8s ease;
}
.card--hoverable:is(:hover, :focus) {
  transform: translatey(-10px);
  -webkit-transform: translatey(-10px);
  box-shadow: var(--shadow-400);
}
.card--hoverable:is(:hover, :focus) .card__image {
  transform: scale(1.1);
}
.card--hoverable:is(:hover, :focus) .btn--primary {
  border-color: var(--primary-500);
  background-color: var(--primary-500);
}
/***********************************
   Lists
************************************/
.arrow-list ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-xs);
}
.arrow-list li::before {
  font-family: "Bunks-Icons";
  letter-spacing: 0;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "";
  margin-right: 0.6em;
  color: var(--primary-400);
}
.check-list {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-xs);
  width: 100%;
}
.check-list[cols="2"] {
  grid-template-columns: repeat(2, 1fr);
}
.check-list[cols="4"] {
  grid-template-columns: repeat(4, 1fr);
}
.check-list li {
  display: inline-flex;
}
.check-list li::before {
  content: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBkPSJNMjU2IDUxMkEyNTYgMjU2IDAgMSAwIDI1NiAwYTI1NiAyNTYgMCAxIDAgMCA1MTJ6TTM2OSAyMDlMMjQxIDMzN2MtOS40IDkuNC0yNC42IDkuNC0zMy45IDBsLTY0LTY0Yy05LjQtOS40LTkuNC0yNC42IDAtMzMuOXMyNC42LTkuNCAzMy45IDBsNDcgNDdMMzM1IDE3NWM5LjQtOS40IDI0LjYtOS40IDMzLjkgMHM5LjQgMjQuNiAwIDMzLjl6Ii8+PC9zdmc+");
  display: block;
  --icon-size: 1em;
  width: var(--icon-size);
  height: var(--icon-size);
  margin-right: 0.6em;
  filter: invert(83%) sepia(65%) saturate(752%) hue-rotate(343deg) brightness(105%) contrast(99%);
}
.check-list li[data-icon="help"] {
  margin-top: 1em;
}
.check-list li[data-icon="help"]::before {
  content: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBkPSJNMjU2IDUxMkEyNTYgMjU2IDAgMSAwIDI1NiAwYTI1NiAyNTYgMCAxIDAgMCA1MTJ6TTE2OS44IDE2NS4zYzcuOS0yMi4zIDI5LjEtMzcuMyA1Mi44LTM3LjNoNTguM2MzNC45IDAgNjMuMSAyOC4zIDYzLjEgNjMuMWMwIDIyLjYtMTIuMSA0My41LTMxLjcgNTQuOEwyODAgMjY0LjRjLS4yIDEzLTEwLjkgMjMuNi0yNCAyMy42Yy0xMy4zIDAtMjQtMTAuNy0yNC0yNFYyNTAuNWMwLTguNiA0LjYtMTYuNSAxMi4xLTIwLjhsNDQuMy0yNS40YzQuNy0yLjcgNy42LTcuNyA3LjYtMTMuMWMwLTguNC02LjgtMTUuMS0xNS4xLTE1LjFIMjIyLjZjLTMuNCAwLTYuNCAyLjEtNy41IDUuM2wtLjQgMS4yYy00LjQgMTIuNS0xOC4yIDE5LTMwLjYgMTQuNnMtMTktMTguMi0xNC42LTMwLjZsLjQtMS4yek0yMjQgMzUyYTMyIDMyIDAgMSAxIDY0IDAgMzIgMzIgMCAxIDEgLTY0IDB6Ii8+PC9zdmc+");
}
/*** Responsive Styles Smartphone Only ***/
@media (max-width: 992px) {
  .check-list[cols-tablet="2"] {
    grid-template-columns: repeat(2, 1fr);
  }
}
/*** Responsive Styles Smartphone Only ***/
@media (max-width: 767px) {
  .check-list[cols-mobile="1"] {
    grid-template-columns: 1fr;
  }
}