:root {
  --background-cards-orange: #ebe0c9;
  --background-cards-green: #cfded3;
  --background-cards-blue: #cddce4;
  --direction: ltr;
    --font-stack-headings: Jost, sans-serif;
    --font-weight-headings: 500;
    --font-style-headings: normal;
    --font-stack-body: "DM Sans", sans-serif;
    --font-weight-body: 400;
    --font-weight-body-bold: 500;
    --font-style-body: normal;
    --font-weight-buttons: var(--font-weight-body-bold);
    --font-weight-menu: var(--font-weight-body-bold);
    --base-headings-size: 70;
    --base-headings-line: 1.1;
    --base-headings-spacing: -0.01em;
    --base-body-size: 17;
    --base-body-line: 1.4;
    --base-body-spacing: 0.0em;
    --base-menu-size: 17;
    --color-background-header: #f4f4f4;
    --color-secondary-background-header: rgba(29, 29, 29, 0.08);
    --color-opacity-background-header: rgba(244, 244, 244, 0);
    --color-text-header: #1d1d1d;
    --color-foreground-header: #ffffff;
    --color-accent-header: #5c8e61;
    --color-foreground-accent-header: #ffffff;
    --color-borders-header: rgba(29, 29, 29, 0.1);
    --color-background-main: #f4f4f4;
    --color-secondary-background-main: rgba(29, 29, 29, 0.08);
    --color-third-background-main: rgba(29, 29, 29, 0.04);
    --color-fourth-background-main: rgba(29, 29, 29, 0.02);
    --color-opacity-background-main: rgba(244, 244, 244, 0);
    --color-text-main: #1d1d1d;
    --color-foreground-main: #ffffff;
    --color-secondary-text-main: rgba(29, 29, 29, 0.62);
    --color-accent-main: #5c8e61;
    --color-foreground-accent-main: #ffffff;
    --color-borders-main: rgba(29, 29, 29, 0.15);
    --color-background-cards: #ffffff;
    --color-gradient-cards: ;
    --color-text-cards: #1d1d1d;
    --color-foreground-cards: #ffffff;
    --color-secondary-text-cards: rgba(29, 29, 29, 0.6);
    --color-accent-cards: #5c8e61;
    --color-foreground-accent-cards: #ffffff;
    --color-borders-cards: #dfdfdf;
    --color-background-footer: #1d1d1d;
    --color-text-footer: #a6a6a6;
    --color-accent-footer: #5dbc8b;
    --color-borders-footer: rgba(166, 166, 166, 0.15);
    --color-borders-forms-primary: rgba(29, 29, 29, 0.3);
    --color-borders-forms-secondary: rgba(29, 29, 29, 0.6);
    --border-width-cards: 1px;
    --border-radius-cards: 16px;
    --border-width-buttons: 1px;
    --border-radius-buttons: 30px;
    --border-width-forms: 1px;
    --border-radius-forms: 5px;
    --shadow-x-cards: 0px;
    --shadow-y-cards: 0px;
    --shadow-blur-cards: 0px;
    --color-shadow-cards: rgba(0, 0, 0, 0);
    --shadow-x-buttons: 0px;
    --shadow-y-buttons: 0px;
    --shadow-blur-buttons: 0px;
    --color-shadow-buttons: rgba(0, 0, 0, 0);
    --grid-gap-original-base: 30px;
    --theme-max-width: 1680px;
    --container-vertical-space-base: 100px;
    --image-fit-padding: 5%;
}

.card {
  border-radius: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.card--orange {
  background: var(--background-cards-orange);
}

.card--green {
  background: var(--background-cards-green);
}

.card--blue {
  background: var(--background-cards-blue);
}

.card__image {}

.card__content {}

.card__button {
  text-align: center;
  display: inline-block;
  border-style: solid;
  border-radius: 3rem;
  transition: all .1s linear;
  font-weight: 500;
  line-height: 1.25;
  cursor: pointer;
  padding: 1.1rem 3.6rem;
  background-color: #1d1d1d;
  color: #fff;
  font-size: 1.9rem;
}




.card-latest-article {
  position: relative;

  figure {
    overflow: hidden;
    border-radius: 1rem;
  }

  img {
    transition: transform 0.3s ease;
  }
  
  .brxe-heading {
    transition: color 0.3s ease;
  }

  &:hover {
    cursor: pointer;

    img {
      transform: scale(1.1);
    }
    
    .brxe-heading {
      color: #5c8e61;
    }
  }
}

.button {
  text-align: center;
  display: inline-block;
  border-style: solid;
  border-radius: var(--border-radius-buttons);
  border-width: var(--border-width-buttons);
  transition: all 100ms linear;
  font-weight: var(--font-weight-buttons);
  letter-spacing: var(--base-body-spacing);
  line-height: 1.25;
  cursor: pointer;
  border-width: var(--border-width-buttons);
  color: var(--color-text-main);
  box-shadow: var(--shadow-x-buttons) var(--shadow-y-buttons) var(--shadow-blur-buttons) var(--color-shadow-buttons);
}