/* universal */
@import url("https://fonts.googleapis.com/css2?family=Urbanist:wght@400;600&display=swap");
*,
:after,
:before {
  box-sizing: border-box;
  border: 0 solid #e5e7eb;
}
* {
  font-family: Urbanist, sans-serif;
}
body {
  margin: 0;
  line-height: inherit;
}

/* align & justify */
.items-center {
  align-items: center;
}
.justify-center {
  justify-content: center;
}
.self-center {
  align-self: center;
}

/* background */
.bg-cover {
  background-size: cover;
}
.bg-fixed {
  background-attachment: fixed;
}

.bg-center {
  background-position: 50%;
}
.bg-no-repeat {
  background-repeat: no-repeat;
}

/* display */
.flex {
  display: flex;
}
.flex-1 {
  flex: 1 1 0%;
}
.flex-col {
  flex-direction: column;
}

/* width & height */
.h-\[216px\] {
  height: 216px;
}
.min-h-screen {
  min-height: 100vh;
}
.w-full {
  width: 100%;
}
@media (min-width: 640px) {
  .sm\:w-\[100\%\],
  .sm\:w-full {
    width: 100%;
  }
}
@media (min-width: 768px) {
  .md\:w-\[35\%\] {
    width: 35%;
  }
  .md\:max-w-\[442px\] {
    max-width: 442px;
  }
  .md\:h-\[300px\] {
    height: 300px;
  }
}

/* margin & padding */
.mb-4 {
  margin-bottom: 1rem;
}
.padding-container {
  padding: 1rem;
  @media (min-width: 768px) {
    padding: 1.35rem;
  }
}

/* object */
.object-contain {
  -o-object-fit: contain;
  object-fit: contain;
}
.object-center {
  -o-object-position: center;
  object-position: center;
}

/* overflow */
.overflow-hidden {
  overflow: hidden;
}

/* position */
.relative {
  position: relative;
}