@media (min-width: 480px) {
  html .grid {
    grid-template: 1fr 1fr / 1fr 1fr;
  }
}

@media (min-width: 800px) {
  html .grid {
    grid-template: 1fr 1fr / 1fr 1fr 1fr 1fr;
  }
}

:root {
  --color-base: #ffffff;
  --color-contrast: #333333;
  --color-primary: #007bff;
  --color-error: #e62d50;
  --font-size: 16px;
  --font-size-lg: calc(var(--font-size) * 1.4);
  --spacing: 1rem;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  color: var(--color-contrast);
  font-family: sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
span,
div {
  font-size: var(--font-size);
}

.text-base {
  color: var(--color-base);
}

.text-lg {
  font-size: var(--font-size-lg);
}

.bg-primary {
  background-color: var(--color-primary);
}

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

.rounded {
  border-radius: 1rem;
}

.font-bold {
  font-weight: 700;
}

.padding {
  padding: var(--spacing);
}

.grid {
  display: grid;
  grid-template: 1fr / 1fr;
  gap: var(--spacing);
}

.flex-col {
  display: flex;
  flex-direction: column;
}

.flex-col-gap {
  & > *:not(:last-child) {
    padding-bottom: var(--spacing);
  }
}

.justify-between {
  justify-content: space-between;
}

.h-full {
  height: 100%;
}

.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.absolute-br {
  right: 0;
  bottom: 0;
}

.absolute-br-1 {
  right: var(--spacing);
  bottom: var(--spacing);
}

.opacity-50 {
  opacity: 0.5;
}