.bg-background1 {
  --bg-opacity: 1;
  background-color: #ffffff;
  background-color: rgba(255, 255, 255, var(--bg-opacity));
}

.bg-border300 {
  --bg-opacity: 1;
  background-color: #e6e8eb;
  background-color: rgba(230, 232, 235, var(--bg-opacity));
}

.border-black {
  --border-opacity: 1;
  border-color: #121a29;
  border-color: rgba(18, 26, 41, var(--border-opacity));
}

.border {
  border-width: 1px;
}

.block {
  display: block;
}

.table {
  display: table;
}

.grid {
  display: grid;
}

.contents {
  display: contents;
}

.hidden {
  display: none;
}

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

.static {
  position: static;
}

.fixed {
  position: fixed;
}

.shadow {
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}

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

.underline {
  text-decoration: underline;
}

.visible {
  visibility: visible;
}

.transition {
  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
}

.ease-out {
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

.duration {
  transition-duration: 0.2s;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes ping {
  75%, 100% {
    transform: scale(2);
    opacity: 0;
  }
}

@keyframes pulse {
  50% {
    opacity: .5;
  }
}

@keyframes bounce {
  0%, 100% {
    transform: translateY(-25%);
    animation-timing-function: cubic-bezier(0.8,0,1,1);
  }

  50% {
    transform: none;
    animation-timing-function: cubic-bezier(0,0,0.2,1);
  }
}

.typography-12 {
  font-size: 12px;
  line-height: 20px;
}

.typography-12::before {
  display: block;
  width: 0;
  height: 0;
  content: "";
  margin-top: -4px;
}

.typography-12::after {
  display: block;
  width: 0;
  height: 0;
  content: "";
  margin-bottom: -4px;
}

.typography-14 {
  font-size: 14px;
  line-height: 22px;
}

.typography-14::before {
  display: block;
  width: 0;
  height: 0;
  content: "";
  margin-top: -4px;
}

.typography-14::after {
  display: block;
  width: 0;
  height: 0;
  content: "";
  margin-bottom: -4px;
}

.typography-20 {
  font-size: 20px;
  line-height: 28px;
}

.typography-20::before {
  display: block;
  width: 0;
  height: 0;
  content: "";
  margin-top: -4px;
}

.typography-20::after {
  display: block;
  width: 0;
  height: 0;
  content: "";
  margin-bottom: -4px;
}

@media (min-width: 0px) {
  .screen1\:p-16 {
    padding: 16px;
  }

  .screen1\:grid-flow-row {
    grid-auto-flow: row;
  }

  .screen1\:grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  .screen1\:grid-rows-2 {
    grid-template-rows: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 744px) {
  .screen2\:p-24 {
    padding: 24px;
  }

  .screen2\:grid-flow-col {
    grid-auto-flow: column;
  }

  .screen2\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .screen2\:col-span-1 {
    grid-column: span 1 / span 1;
  }

  .screen2\:col-span-2 {
    grid-column: span 2 / span 2;
  }

  .screen2\:grid-rows-1 {
    grid-template-rows: repeat(1, minmax(0, 1fr));
  }
}

@media (min-width: 952px) {
}

@media (min-width: 1160px) {
}

@media (min-width: 1368px) {
}

@media (min-width: 0px) {
}

@media (min-width: 744px) {
}