const e = () => ({
  ".grid-container": {
    width: "100%",
    padding: "0 24px",
    "@screen tablet": {
      width: "75%",
      padding: "0"
    }
  },
  ".grid-container-compact": {
    width: "100%",
    padding: "0 24px",
    "@screen tablet": {
      width: "75%",
      padding: "0"
    },
    "@screen desktop": {
      width: "50%"
    }
  },
  ".grid-container.in-side-nav": {
    "@screen desktop": {
      marginLeft: "60px",
      marginRight: "96px",
      width: "calc(100% - 156px)"
    }
  },
  ".grid-container.with-cols, .grid-container-compact.with-cols": {
    display: "grid",
    "@screen mobile": {
      gridGap: "16px",
      gridTemplateColumns: "repeat(4, 1fr)"
    },
    "@screen tablet": {
      gridGap: "24px",
      gridTemplateColumns: "repeat(8, 1fr)"
    },
    "@screen desktop": {
      gridGap: "32px",
      gridTemplateColumns: "repeat(12, 1fr)"
    }
  }
}), i = {
  getComponents: e
};
export {
  i as TailwindGrid
};
