/* Base styles for all screen sizes */
.element {
  padding-left: 1rem;    /* px-4 */
  padding-right: 1rem;   /* px-4 */
  margin-bottom: 1rem;   /* mb-4 */
}

/* Medium screens (md: - 768px and up) */
@media (min-width: 768px) {
  .element {
    margin-left: 72px;     /* md:mx-[72px] */
    margin-right: 72px;    /* md:mx-[72px] */
    padding-left: 0;       /* md:px-0 */
    padding-right: 0;      /* md:px-0 */
    margin-bottom: 3.5rem; /* md:mb-14 */
  }
}

/* Large screens (xl: - 1280px and up) */
@media (min-width: 1280px) {
  .element {
    margin-top: 5rem;      /* xl:my-20 */
    margin-bottom: 5rem;   /* xl:my-20 */
  }
}

/* Extra large screens (2xl: - 1536px and up) */
@media (min-width: 1536px) {
  .element {
    margin-left: 9rem;     /* 2xl:mx-36 */
    margin-right: 9rem;    /* 2xl:mx-36 */
    margin-top: 3.5rem;    /* 2xl:mt-14 */
    margin-bottom: 8rem;   /* 2xl:my-32 */
  }
}