$base-white: rgba(255, 255, 255, 1);
$base-red: rgba(255, 12, 0, 1);
$base-green: rgba(0, 130, 44, 1);
$base-black: rgba(36, 36, 36, 1);
$light-black: rgba(56, 56, 56, 1);
$base-gray: rgba(0, 0, 0, 0.6);
$mild-gray: rgba(85, 85, 85, 1);
$light-gray: rgba(101, 101, 101, 1);

$border-black: rgba(0, 0, 0, 1); // Mixins
@mixin flex($dir: row) {
  display: flex;
  flex-direction: $dir;
}

@mixin stretch {
  width: 100%;
  height: 100%;
}

@mixin transition-std($duration: 0.3s) {
  transition: $duration all ease;
}

@mixin imgStyle($mWidth: unset, $mHeight: unset, $objFit: cover) {
  max-width: $mWidth;
  max-height: $mHeight;
  @include stretch;

  img {
    @include stretch;
    object-fit: $objFit;
  }
}

@mixin grid($row, $layout) {
  display: grid;

  @if ($row) {
    grid-template-rows: $layout;
  } @else {
    grid-template-columns: $layout;
  }
}

@mixin input {
  border: 0.1rem solid $border-black;
  font-size: 1.2rem;
  padding: 1rem 0.8rem;
  @include stretch;

  &::placeholder {
    color: $base-gray;
  }
}

@mixin sectionTitle {
  font-size: 2.4rem;
  color: $base-black;
  letter-spacing: 0.1em;
  line-height: 3.3rem;
}

@mixin input {
  border: 1px solid #00822c;
  padding: 1.4rem;
}