@utility container {
padding-left: 16px;
padding-right: 16px;
@media (width >= theme(--breakpoint-sm)) {
padding-left: calc((100vw + 16px - 640px) / 2);
padding-right: calc((100vw + 16px - 640px) / 2);
}
@media (width >= theme(--breakpoint-md)) {
padding-left: calc((100vw + 16px - 768px) / 2);
padding-right: calc((100vw + 16px - 768px) / 2);
}
@media (width >= theme(--breakpoint-lg)) {
padding-left: calc((100vw + 16px - 1024px) / 2);
padding-right: calc((100vw + 16px - 1024px) / 2);
}
@media (width >= theme(--breakpoint-xl)) {
padding-left: calc((100vw + 16px - 1280px) / 2);
padding-right: calc((100vw + 16px - 1280px) / 2);
}
@media (width >= theme(--breakpoint-2xl)) {
padding-left: calc((100vw + 16px - 1536px) / 2);
padding-right: calc((100vw + 16px - 1536px) / 2);
}
}