.container {
  width: 100%;
}

.container-card {
  width: 100%;
  background-color: #fff;
  max-width: 28rem /* 448px */;
  border-radius: 0.5rem;
}

.shadow-md {
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color),
    0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
    var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.padding-1 {
  padding: 1rem !important;
}

.padding-y-1 {
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
}

.padding-x-1 {
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}

.grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-gap: 1rem;
}

.flex {
  display: flex;
}

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

.bg-white {
  --tw-bg-opacity: 1;
  background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
}

.mt-4 {
  margin-top: 4rem;
}

/* Medium screens */
@media (min-width: 768px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Large Screens */
@media (min-width: 992px) {
  .grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Extra Large Screens */
@media (min-width: 1200px) {
  .grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
