/* Responsive utilities that respond to container size instead of viewport size */
[data-device='mobile'] {
  /* Override for mobile device */
  --device-width: 430px;
}

[data-device='tablet'] {
  /* Override for tablet device */
  --device-width: 768px;
}

[data-device='desktop'] {
  /* Override for desktop device */
  --device-width: 100%;
}

/* Simulate responsive behavior based on device attribute */
[data-device='mobile'] .container-\[430px\] {
  width: 430px;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

[data-device='tablet'] .container-\[768px\] {
  width: 768px;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* Responsive grid adjustments */
[data-device='mobile'] .lg\:grid-cols-2,
[data-device='mobile'] .md\:grid-cols-2 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

[data-device='tablet'] .lg\:grid-cols-2 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

/* Text size adjustments */
[data-device='mobile'] .lg\:text-6xl {
  font-size: 2rem; /* ~32px instead of 3.75rem (~60px) */
  line-height: 1.2;
}

[data-device='mobile'] .lg\:text-5xl {
  font-size: 2rem; /* ~32px instead of 3rem (~48px) */
  line-height: 1.2;
}

[data-device='mobile'] .lg\:text-4xl {
  font-size: 1.75rem; /* ~28px instead of 2.25rem (~36px) */
  line-height: 1.25;
}

[data-device='tablet'] .lg\:text-6xl {
  font-size: 2.5rem; /* ~40px instead of 3.75rem (~60px) */
  line-height: 1.2;
}

/* Alignment adjustments */
[data-device='mobile'] .lg\:text-left {
  text-align: center;
}

[data-device='mobile'] .lg\:items-start {
  align-items: center;
}

[data-device='mobile'] .lg\:items-center {
  align-items: center;
}

[data-device='mobile'] .lg\:justify-start {
  justify-content: center;
}

[data-device='mobile'] .lg\:justify-between {
  justify-content: center;
}

/* Flex direction adjustments */
[data-device='mobile'] .lg\:flex-row {
  flex-direction: column;
}

[data-device='mobile'] .sm\:flex-row {
  flex-direction: column;
}

[data-device='tablet'] .lg\:flex-row {
  flex-direction: column;
}

/* Padding adjustments */
[data-device='mobile'] .lg\:py-32 {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

[data-device='mobile'] .lg\:my-6 {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

[data-device='mobile'] .mb-8 {
  margin-bottom: 1rem;
}

/* Width adjustments */
[data-device='mobile'] .max-w-xl {
  max-width: 100%;
}

[data-device='mobile'] .w-full {
  width: 100%;
}

/* Responsive utility for common patterns */
.device-mobile .responsive-mobile-column {
  flex-direction: column;
}

.device-tablet .responsive-tablet-column {
  flex-direction: column;
}

.device-mobile .responsive-mobile-center {
  text-align: center;
  align-items: center;
  justify-content: center;
}

.device-tablet .responsive-tablet-center {
  text-align: center;
  align-items: center;
  justify-content: center;
}