:root {
  --border-radius: 8px;
  --border-radius-sm: 4px;
  --shadow: 0 0 10px rgba(39, 32, 32, 0.25);
}

@mixin imageRatio($ratio: 100%) {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: $ratio;
  overflow: hidden;
  img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

// tmp: move to a dedicated button ss
@mixin btn {
  width: 4rem;
  height: 4rem;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  background: none;
  border: none;
  &:active {
    color: currentColor;
    box-shadow: none;
  }
}