/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */

/* Hero Banner Block */
.hero-banner {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.cursor-pointer {
  cursor: pointer;
}

.container-link {
  cursor: pointer;
}

:root {
  --transition-duration: 0.1s;
  --transition-function: ease;
  --scale-factor: 1.01;
}

.transition-0 {
  --transition-duration: 0s;
}

.transition-1 {
  --transition-duration: 0.1s;
}

.transition-2 {
  --transition-duration: 0.2s;
}

.transition-3 {
  --transition-duration: 0.3s;
}

.ease {
  --transition-function: ease;
}

.ease-in-out {
  --transition-function: ease-in-out;
}

.ease-in {
  --transition-function: ease-in;
}

.ease-out {  
  --transition-function: ease-out;
}

.ease-linear {
  --transition-function: linear;
}

.scale-1 {
  --scale-factor: 1.01;
}

.scale-2 {
  --scale-factor: 1.02;
}

.scale-3 {
  --scale-factor: 1.03;
}

.hover-scale {
  transition: transform var(--transition-duration) var(--transition-function);
}

.hover-scale:hover,
.hover-scale:focus-within {
  transform: scale(var(--scale-factor));
}