/* Bulma config */
:root {
  --bulma-primary-h: 358deg;
  --bulma-primary-s: 85%;
  --bulma-primary-l: 52%;
  --bulma-link-h: 358deg;
  --bulma-link-s: 85%;
  --bulma-link-l: 40%;
  --bulma-link-on-scheme-l: 40%;
  --bulma-info-h: 217deg;
  --bulma-info-s: 71%;
}

.is-fluid-1 {
  font-size: clamp(1.75rem, 6vw, 6rem);
}
.is-fluid-2 {
  font-size: clamp(1.25rem, 5vw, 3rem);
}
.is-fluid-3 {
  font-size: clamp(0.66rem, 3vw, 1.5rem);
}

.zoom-wrapper {
  border-start-end-radius: var(--bulma-card-radius);
  border-start-start-radius: var(--bulma-card-radius);
  overflow: hidden;
}

.zoom {
  transition-duration: var(--bulma-duration);
  transition-timing-function: var(--bulma-easing);
  &:hover {
    transform: scale(1.08);
  }
}

.card-lift {
  transition-duration: var(--bulma-duration);
  transition-timing-function: var(--bulma-easing);
  border-color: lightgrey;
  &.bordered {
    border: 1px solid var(--bulma-white-ter);
  }
  &:hover {
    /* .title { color: var(--bulma-primary); } */
    border-color: var(--bulma-primary);
    box-shadow: 0 0.5em 1em 0.5em
      hsla(
        var(--bulma-shadow-h),
        var(--bulma-shadow-s),
        var(--bulma-shadow-l),
        0.1
      );
  }
}

footer .level {
  --bulma-level-item-spacing: calc(var(--bulma-block-spacing) * 0.2);
}

.content h2,
.hero-body .is-fluid-1 {
  position: relative;
  padding-bottom: 1rem;
}
.content h2::after,
.hero-body .is-fluid-1::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 4rem;
  height: 4px;
  background: var(--bulma-primary);
  border-radius: 2px;
}

/* home page HERO banner */
.hero-img,
.hero-gradient {
  background: linear-gradient(to right, rgb(0 0 0 / 0.8), rgb(0 0 0 / 0.3));
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  img {
    object-fit: cover;
    width: 100%;
    height: 100%;
  }
}