[data-size] {
  block-size: attr(data-size type(auto | <length-percentage>), 1rem);
  inline-size: attr(data-size type(auto | <length-percentage>), 1rem);
}

[data-m] {
  margin: attr(data-m type(auto | <length-percentage>));
}

[data-p] {
  padding: attr(data-p type(auto | <length-percentage>));
}

[data-size-y] {
  block-size: attr(data-size-y type(auto | <length-percentage>), 1rem);
}

[data-size-x] {
  inline-size: attr(data-size-x type(auto | <length-percentage>), 1rem);
}

[data-my] {
  margin-block: attr(data-my type(auto | <length-percentage>), 1rem);
}

[data-mx] {
  margin-inline: attr(data-mx type(auto | <length-percentage>), 1rem);
}

[data-py] {
  padding-block: attr(data-py type(auto | <length-percentage>), 1rem);
}

[data-px] {
  padding-inline: attr(data-px type(auto | <length-percentage>), 1rem);
}

@media (width >= 480px) {
  [data-sm-size-y] {
    block-size: attr(data-sm-size-y type(auto | <length-percentage>), 1rem);
  }
  [data-sm-size-x] {
    inline-size: attr(data-sm-size-x type(auto | <length-percentage>), 1rem);
  }
  [data-sm-my] {
    margin-block: attr(data-sm-my type(auto | <length-percentage>), 1rem);
  }
  [data-sm-mx] {
    margin-inline: attr(data-sm-mx type(auto | <length-percentage>), 1rem);
  }
  [data-sm-py] {
    padding-block: attr(data-sm-py type(auto | <length-percentage>), 1rem);
  }
  [data-sm-px] {
    padding-inline: attr(data-sm-px type(auto | <length-percentage>), 1rem);
  }
}
@media (width >= 768px) {
  [data-md-size-y] {
    block-size: attr(data-md-size-y type(auto | <length-percentage>), 1rem);
  }
  [data-md-size-x] {
    inline-size: attr(data-md-size-x type(auto | <length-percentage>), 1rem);
  }
  [data-md-my] {
    margin-block: attr(data-md-my type(auto | <length-percentage>), 1rem);
  }
  [data-md-mx] {
    margin-inline: attr(data-md-mx type(auto | <length-percentage>), 1rem);
  }
  [data-md-py] {
    padding-block: attr(data-md-py type(auto | <length-percentage>), 1rem);
  }
  [data-md-px] {
    padding-inline: attr(data-md-px type(auto | <length-percentage>), 1rem);
  }
}
@media (width >= 1024px) {
  [data-lg-size-y] {
    block-size: attr(data-lg-size-y type(auto | <length-percentage>), 1rem);
  }
  [data-lg-size-x] {
    inline-size: attr(data-lg-size-x type(auto | <length-percentage>), 1rem);
  }
  [data-lg-my] {
    margin-block: attr(data-lg-my type(auto | <length-percentage>), 1rem);
  }
  [data-lg-mx] {
    margin-inline: attr(data-lg-mx type(auto | <length-percentage>), 1rem);
  }
  [data-lg-py] {
    padding-block: attr(data-lg-py type(auto | <length-percentage>), 1rem);
  }
  [data-lg-px] {
    padding-inline: attr(data-lg-px type(auto | <length-percentage>), 1rem);
  }
}
@media (width >= 1440px) {
  [data-xl-size-y] {
    block-size: attr(data-xl-size-y type(auto | <length-percentage>), 1rem);
  }
  [data-xl-size-x] {
    inline-size: attr(data-xl-size-x type(auto | <length-percentage>), 1rem);
  }
  [data-xl-my] {
    margin-block: attr(data-xl-my type(auto | <length-percentage>), 1rem);
  }
  [data-xl-mx] {
    margin-inline: attr(data-xl-mx type(auto | <length-percentage>), 1rem);
  }
  [data-xl-py] {
    padding-block: attr(data-xl-py type(auto | <length-percentage>), 1rem);
  }
  [data-xl-px] {
    padding-inline: attr(data-xl-px type(auto | <length-percentage>), 1rem);
  }
}
@media (width >= 1920px) {
  [data-xxl-size-y] {
    block-size: attr(data-xxl-size-y type(auto | <length-percentage>), 1rem);
  }
  [data-xxl-size-x] {
    inline-size: attr(data-xxl-size-x type(auto | <length-percentage>), 1rem);
  }
  [data-xxl-my] {
    margin-block: attr(data-xxl-my type(auto | <length-percentage>), 1rem);
  }
  [data-xxl-mx] {
    margin-inline: attr(data-xxl-mx type(auto | <length-percentage>), 1rem);
  }
  [data-xxl-py] {
    padding-block: attr(data-xxl-py type(auto | <length-percentage>), 1rem);
  }
  [data-xxl-px] {
    padding-inline: attr(data-xxl-px type(auto | <length-percentage>), 1rem);
  }
}