/* === tailwind class like === */
/* @import "var.css"; */
.text-left {
  text-align: left;
}

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

.text-right {
  text-align: right;
}

.success {
  color: var(--color-success);
}

.warning {
  color: var(--color-warning);
}

.error {
  color: var(--color-error);
}

/* === common zones === */
.font-bold {
  font-weight: bold;
}

.hero {
  text-align: center;
  font-size: 2rem;
  background-image: url("../images/UI/256505890.mobile.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

@media (min-width: 768px) {
  .hero {
    background-image: url("../images/UI/256505890.webp");
  }
}

/* === Primary button === */
.button {
  display: block;
  padding: 1rem 1.5rem;
  cursor: pointer;

  text-align: center;
  font-weight: bold;

  color: var(--color-cream);
  background-color: var(--color-dark);

  border: 1px solid var(--color-dark);
  border-radius: 5rem;
}

.button:hover {
  color: var(--color-cream);
  border-color: var(--color-cream);

  transition: all 0.3s ease-in-out;
}


/* === Secondary button === */

.button-outline {
  display: block;
  padding: 0.5rem 1rem;
  cursor: pointer;

  text-align: center;

  color: var(--color-cream);
  border: 1px solid var(--color-cream);
  border-radius: 5rem;
  background: none;
  appearance: none;
}

.button-outline:hover {
  color: var(--color-orange);
  border-color: var(--color-orange);
  background-color: var(--color-cream);

  transition: all 0.3s ease-in-out;
}

/* cards */
.cards {
  box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
  border-radius: 0.5rem;

  .img {
    width: 100%;
    height: 16rem;
    object-fit: cover;

    &.large {
      height: 20rem;
    }
  }
}