/* material-details.css: component-owned rules. Shared priority order is declared in tokens.css. */
@layer presentation {
/* material-details */
.material-detail-page main {
  max-width: 1680px;
}

.material-detail-page main img {
  height: auto;
}

.material-detail-page main p {
  font-size: var(--font-16);
  line-height: 2;
  letter-spacing: .015em;
}

.material-detail-page h1 {
  font-size: clamp(var(--font-35),3.3vw,var(--font-48));
  line-height: 1.7;
  letter-spacing: .035em;
}

.material-detail-page h2 {
  font-size: var(--font-34);
  line-height: 1.7;
  letter-spacing: .025em;
}

.material-detail-page h3 {
  font-size: var(--font-24);
  line-height: 1.7;
  letter-spacing: .02em;
}

.material-detail-page .md-phrase {
  display: inline-block;
}

.material-detail-page main .md-label {
  font: var(--font-12)/1.9 Georgia,var(--sans);
  letter-spacing: .1em;
  color: var(--muted);
}

.material-detail-page .md-heading h2 {
  margin-top: var(--space-17);
}

.material-detail-page figcaption {
  font: var(--font-13)/1.9 var(--sans);
  color: var(--muted);
  margin-top: var(--space-12);
  max-width: 72ch;
}

.material-detail-page main .md-note,
.material-detail-page main .md-disclaimer {
  font-size: var(--font-14);
  line-height: 1.95;
  color: var(--muted);
  max-width: 82ch;
}

.material-detail-page .md-text-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-24);
  min-height: 44px;
  padding: var(--space-8) 0;
  border-bottom: 1px solid var(--color-8fa5b1);
  font-size: var(--font-14);
}

.material-detail-page .md-text-link:hover {
  text-decoration: underline;
  text-underline-offset: 5px;
}

.material-detail-page .md-hero {
  padding: var(--space-55) 0 var(--space-90);
}

.material-detail-page .md-hero-copy h1 {
  margin: var(--space-20) 0 var(--space-26);
}

.material-detail-page main .md-product-name {
  font-family: var(--serif);
  font-size: var(--font-23);
  margin-bottom: var(--space-22);
}

.material-detail-page .md-intro>p:not(.md-product-name) {
  max-width: 44ch;
}

.material-detail-page .md-intro .md-text-link {
  margin-top: var(--space-24);
}

.material-detail-page .md-points,
.material-detail-page .md-use-list,
.material-detail-page .md-design-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.material-detail-page .md-points li,
.material-detail-page .md-use-list li {
  display: grid;
  grid-template-columns: 28px minmax(0,1fr);
  gap: var(--space-20);
}

.material-detail-page .md-number {
  font: var(--font-17)/2.5 Georgia,serif;
  color: var(--muted);
}

.material-detail-page .md-points li+li {
  margin-top: var(--space-32);
}

.material-detail-page .md-points p {
  margin-top: var(--space-14);
  max-width: 46ch;
}

.material-detail-page .md-character {
  padding: var(--space-55) 0 var(--space-70);
  border-top: 1px solid var(--line);
}

.material-detail-page .md-application {
  padding: var(--space-55) 0 var(--space-90);
}

.material-detail-page .md-use-list li+li {
  margin-top: var(--space-30);
}

.material-detail-page .md-use-list h3 {
  font-size: var(--font-23);
}

.material-detail-page .md-use-list p {
  margin-top: var(--space-12);
  max-width: 50ch;
}

.material-detail-page .md-design {
  padding: var(--space-55) 0 var(--space-65);
  border-top: 1px solid var(--line);
}

.material-detail-page .md-design-list {
  margin-top: var(--space-40);
}

.material-detail-page .md-design-list li {
  display: grid;
  grid-template-columns: 30px minmax(0,.75fr) minmax(0,1.25fr);
  gap: var(--space-25) var(--space-35);
  padding: var(--space-27) 0;
  border-top: 1px solid var(--line);
}

.material-detail-page .md-design-list li>div {
  display: contents;
}

.material-detail-page .md-design-list p {
  max-width: 60ch;
}

.material-detail-page .md-design>.md-note {
  margin-top: var(--space-25);
}

.material-detail-page .md-related {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: var(--space-35) var(--space-70);
  padding: var(--space-40) 0 var(--space-65);
}

.material-detail-page .md-related>div:last-of-type {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-35);
}

.material-detail-page .md-related>div:last-of-type>a {
  padding: var(--space-20) 0;
  border-top: 1px solid var(--line);
  min-height: 100px;
}

.material-detail-page .md-related>div:last-of-type>a>span {
  display: inline-flex;
  gap: var(--space-24);
  min-height: 44px;
  align-items: center;
  margin-top: var(--space-10);
  font-size: var(--font-14);
}

.material-detail-page .md-related a:hover h3 {
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 1px;
}

.material-detail-page .md-related nav {
  grid-column: 1/-1;
  display: flex;
  gap: var(--space-15) var(--space-30);
  flex-wrap: wrap;
}

.material-detail-page .md-contact {
  display: grid;
  grid-template-columns: 1fr 330px;
  gap: var(--space-65);
  align-items: center;
  border-top: 1px solid var(--line);
  padding: var(--space-50) 0;
}

.material-detail-page .md-contact h2 {
  font-size: var(--font-31);
  margin-bottom: var(--space-22);
}

.material-detail-page .md-contact>div:first-child>p {
  max-width: 56ch;
}

.material-detail-page .md-contact .solid-link {
  width: 100%;
  min-height: 68px;
  background: var(--color-ink);
}

.material-detail-page .md-contact .solid-link:hover {
  background: var(--color-405965);
}

.material-detail-page .md-contact .md-note {
  font-size: var(--font-13);
  margin-top: var(--space-14);
}

.material-detail-page .md-disclaimer {
  padding-bottom: var(--space-35);
}

.frost-detail .md-hero {
  display: grid;
  grid-template-columns: 5fr 6fr;
  gap: 9%;
  align-items: start;
}

.frost-detail .md-hero-text {
  padding-top: var(--space-50);
}

.frost-detail .md-hero-photo img {
  aspect-ratio: 4/5;
  object-position: 53% center;
}

.frost-detail .frost-character {
  display: grid;
  grid-template-columns: 7fr 4fr;
  gap: var(--space-35) 9%;
  align-items: start;
}

.frost-detail .frost-character>.md-heading {
  grid-column: 1/-1;
}

.frost-detail .md-surface img {
  aspect-ratio: 4/3;
}

.frost-detail .frost-character .md-points {
  padding-top: var(--space-95);
}

.frost-detail .frost-application {
  display: grid;
  grid-template-columns: 3fr 9fr;
  gap: var(--space-35) var(--space-45);
  padding-top: var(--space-80);
}

.frost-detail .frost-application h2 {
  font-size: var(--font-30);
}

.frost-detail .md-application-photo img {
  aspect-ratio: 3/2;
}

.frost-detail .md-application-text {
  grid-column: 2;
}

.frost-detail .md-use-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-32) var(--space-45);
}

.frost-detail .md-use-list li+li {
  margin: 0;
}

.pattern-detail .md-hero,
.color-detail .md-hero {
  display: grid;
  grid-template-columns: 7fr 4fr;
  gap: var(--space-40) 9%;
  align-items: center;
}

.pattern-detail .md-hero-photo,
.color-detail .md-hero-photo {
  grid-column: 1/-1;
}

.pattern-detail .md-hero-photo img {
  aspect-ratio: 2/1;
  object-position: 55% center;
}

.pattern-detail .pattern-character>.md-heading {
  margin-bottom: var(--space-40);
}

.pattern-detail .pattern-character .md-points {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: var(--space-50);
}

.pattern-detail .pattern-character .md-points li {
  display: block;
}

.pattern-detail .pattern-character .md-points li+li {
  margin: 0;
}

.pattern-detail .pattern-character .md-number {
  display: block;
  margin-bottom: var(--space-12);
  font-size: var(--font-21);
}

.pattern-detail .pattern-application,
.functional-detail .functional-application {
  display: grid;
  grid-template-columns: 8fr 3fr;
  gap: var(--space-35) 9%;
  align-items: start;
}

.pattern-detail .pattern-application>.md-heading,
.functional-detail .functional-application>.md-heading {
  grid-column: 1/-1;
}

.pattern-detail .md-application-photo img {
  aspect-ratio: 3/2;
}

.pattern-detail .md-use-list li {
  display: block;
}

.pattern-detail .md-use-list .md-number {
  display: block;
  margin-bottom: var(--space-6);
}

.pattern-detail .md-design-list,
.color-detail .md-design-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-30) var(--space-80);
}

.pattern-detail .md-design-list li,
.color-detail .md-design-list li {
  display: grid;
  grid-template-columns: 28px minmax(0,1fr);
  gap: var(--space-20);
}

.pattern-detail .md-design-list li>div,
.color-detail .md-design-list li>div {
  display: block;
}

.pattern-detail .md-design-list p,
.color-detail .md-design-list p {
  margin-top: var(--space-15);
}

.color-detail .md-hero {
  grid-template-columns: 6fr 5fr;
  gap: var(--space-40) 7%;
}

.color-detail .md-hero-photo img {
  aspect-ratio: 1.8;
  object-position: center 57%;
}

.color-detail .color-character {
  display: grid;
  grid-template-columns: 4fr 6fr;
  gap: 15%;
  align-items: center;
}

.color-detail .md-color-text>.md-heading {
  margin-bottom: var(--space-35);
}

.color-detail .md-surface img {
  aspect-ratio: 4/3;
}

.color-detail .color-application>.md-heading {
  margin-bottom: var(--space-35);
}

.color-detail .md-application-photo {
  width: 75%;
}

.color-detail .md-application-photo img {
  aspect-ratio: 16/9;
}

.color-detail .md-application-text {
  width: 58.3%;
  margin: var(--space-35) 0 0 auto;
}

.color-detail .md-use-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-35);
}

.color-detail .md-use-list li+li {
  margin: 0;
}

.functional-detail .md-hero {
  display: grid;
  grid-template-columns: 7fr 4fr;
  gap: 9%;
  align-items: center;
  padding-bottom: var(--space-75);
}

.functional-detail .md-hero-photo img {
  aspect-ratio: 4/3;
  object-position: 35% center;
}

.functional-detail .functional-character {
  display: grid;
  grid-template-columns: 6fr 5fr;
  gap: var(--space-35) 9%;
  align-items: center;
}

.functional-detail .functional-character>.md-heading {
  grid-column: 1/-1;
}

.functional-detail .md-surface img {
  aspect-ratio: 3/2;
}

.functional-detail .md-structure-text p {
  margin-top: var(--space-20);
  max-width: 48ch;
}

.functional-detail .md-performance {
  padding: var(--space-30) 0 var(--space-55);
}

.functional-detail .md-performance>.md-heading {
  margin-bottom: var(--space-35);
}

.functional-detail .md-performance .md-points li {
  display: grid;
  grid-template-columns: 45px minmax(0,1fr);
  gap: var(--space-30);
  padding: var(--space-25) 0;
  border-top: 1px solid var(--line);
  margin: 0;
}

.functional-detail .md-performance .md-points li>div {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--space-50);
}

.functional-detail .md-performance .md-points p {
  margin: 0;
  max-width: 62ch;
}

.functional-detail .md-performance>.md-note {
  margin-top: var(--space-25);
}

.functional-detail .md-application-photo img {
  aspect-ratio: 16/9;
}

.functional-detail .md-use-list li {
  display: block;
}

.functional-detail .md-use-list .md-number {
  display: block;
  margin-bottom: var(--space-6);
}

/* material-details */
@media(max-width:1150px) {
.material-detail-page h1 {
  font-size: var(--font-35);
}

.material-detail-page h2 {
  font-size: var(--font-30);
}

.material-detail-page h3 {
  font-size: var(--font-23);
}

.material-detail-page .md-contact {
  gap: var(--space-35);
  grid-template-columns: 1fr 280px;
}

.frost-detail .frost-character .md-points {
  padding-top: var(--space-20);
}

.frost-detail .md-use-list,
.color-detail .md-use-list {
  display: block;
}

.frost-detail .md-use-list li+li,
.color-detail .md-use-list li+li {
  margin-top: var(--space-25);
}

.pattern-detail .pattern-character .md-points {
  gap: var(--space-30);
}

.pattern-detail .pattern-application,
.functional-detail .functional-application {
  grid-template-columns: 7fr 4fr;
  gap: var(--space-35) 5%;
}

.color-detail .color-character {
  gap: 7%;
  grid-template-columns: 5fr 6fr;
}

.material-detail-page .md-related {
  gap: var(--space-30);
}
}

/* material-details */
@media(max-width:850px) {
.frost-detail .md-hero {
  gap: 6%;
  grid-template-columns: 1fr 1fr;
}

.frost-detail .md-hero-text {
  padding-top: 0;
}

.material-detail-page h1 {
  font-size: var(--font-30);
}

.material-detail-page h2 {
  font-size: var(--font-28);
}

.pattern-detail .md-hero,
.color-detail .md-hero {
  grid-template-columns: 1fr 1fr;
  gap: var(--space-30);
}

.functional-detail .md-hero {
  grid-template-columns: 1.3fr 1fr;
  gap: var(--space-35);
}

.frost-detail .frost-character {
  gap: var(--space-30);
  grid-template-columns: 1.1fr 1fr;
}

.frost-detail .frost-character .md-points {
  padding: 0;
}

.frost-detail .frost-application {
  grid-template-columns: 1fr;
}

.frost-detail .md-application-text {
  grid-column: 1;
}

.pattern-detail .pattern-character .md-points {
  grid-template-columns: 1fr;
  gap: var(--space-25);
}

.pattern-detail .pattern-character .md-points li {
  display: grid;
}

.pattern-detail .pattern-application,
.functional-detail .functional-application {
  grid-template-columns: 1fr;
}

.pattern-detail .md-use-list,
.functional-detail .md-use-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-30);
}

.pattern-detail .md-use-list li+li,
.functional-detail .md-use-list li+li {
  margin: 0;
}

.color-detail .color-character {
  grid-template-columns: 1fr 1fr;
  gap: var(--space-35);
}

.color-detail .md-application-photo {
  width: 90%;
}

.color-detail .md-application-text {
  width: 75%;
}

.functional-detail .functional-character {
  gap: var(--space-30);
  grid-template-columns: 1fr 1fr;
}

.functional-detail .md-performance .md-points li>div {
  gap: var(--space-30);
}

.material-detail-page .md-related {
  grid-template-columns: 1fr;
}

.material-detail-page .md-contact {
  grid-template-columns: 1fr 260px;
  gap: var(--space-25);
}

.material-detail-page .md-contact h2 {
  font-size: var(--font-27);
}

.material-detail-page .md-design-list li {
  gap: var(--space-15);
}

.pattern-detail .md-design-list,
.color-detail .md-design-list {
  gap: var(--space-25) var(--space-35);
}
}

/* material-details */
@media(max-width:560px) {
.material-detail-page main {
  padding: 0 7vw;
}

.material-detail-page .breadcrumb {
  gap: var(--space-9);
  font-size: var(--font-11);
  letter-spacing: 0;
  flex-wrap: wrap;
}

.material-detail-page main p {
  font-size: var(--font-15);
  line-height: 2;
}

.material-detail-page h1 {
  font-size: var(--font-31);
  letter-spacing: .015em;
}

.material-detail-page h2 {
  font-size: var(--font-27);
  letter-spacing: .01em;
}

.material-detail-page h3 {
  font-size: var(--font-22);
  letter-spacing: .01em;
}

.material-detail-page main .md-label {
  font-size: var(--font-12);
}

.material-detail-page main .md-note,
.material-detail-page main .md-disclaimer {
  font-size: var(--font-13);
}

.material-detail-page .md-hero {
  display: block;
  padding: var(--space-30) 0 var(--space-60);
}

.material-detail-page .md-hero-copy h1 {
  margin: var(--space-18) 0 var(--space-25);
}

.material-detail-page main .md-product-name {
  font-size: var(--font-22);
  margin-bottom: var(--space-20);
}

.material-detail-page .md-intro>p:not(.md-product-name) {
  max-width: none;
}

.material-detail-page .md-hero-photo {
  margin-top: var(--space-30);
}

.material-detail-page .md-hero-photo img {
  aspect-ratio: 3/2;
}

.frost-detail .md-hero-photo img {
  aspect-ratio: 4/3;
}

.pattern-detail .md-hero-photo,
.color-detail .md-hero-photo {
  margin: var(--space-30) -7vw 0;
}

.pattern-detail .md-hero-photo img {
  aspect-ratio: 4/3;
  object-position: 63% center;
}

.color-detail .md-hero-photo img {
  aspect-ratio: 3/2;
  object-position: center;
}

.pattern-detail .md-hero-photo figcaption,
.color-detail .md-hero-photo figcaption {
  padding: 0 7vw;
}

.material-detail-page .md-character {
  display: block;
  padding: var(--space-35) 0 var(--space-45);
}

.material-detail-page .md-character>.md-heading {
  margin-bottom: var(--space-28);
}

.material-detail-page .md-surface img {
  aspect-ratio: 4/3;
}

.functional-detail .md-surface img {
  aspect-ratio: 3/2;
}

.frost-detail .frost-character .md-points {
  margin-top: var(--space-28);
  padding: 0;
}

.material-detail-page .md-points li {
  gap: var(--space-18);
}

.material-detail-page .md-points li+li {
  margin-top: var(--space-27);
}

.material-detail-page .md-points p {
  max-width: none;
  margin-top: var(--space-12);
}

.material-detail-page .md-heading h2 {
  margin-top: var(--space-15);
}

.pattern-detail .pattern-character .md-points {
  display: block;
}

.pattern-detail .pattern-character .md-points li {
  display: grid;
}

.pattern-detail .pattern-character .md-points li+li {
  margin-top: var(--space-28);
}

.pattern-detail .pattern-character .md-number {
  font-size: var(--font-17);
  margin: 0;
}

.material-detail-page .md-application {
  display: block;
  padding: var(--space-25) 0 var(--space-55);
}

.material-detail-page .md-application>.md-heading {
  margin-bottom: var(--space-28);
}

.frost-detail .frost-application h2 {
  font-size: var(--font-27);
}

.frost-detail .md-application-photo,
.color-detail .md-application-photo,
.functional-detail .md-application-photo {
  width: auto;
  margin: 0 -7vw;
}

.frost-detail .md-application-photo figcaption,
.color-detail .md-application-photo figcaption,
.functional-detail .md-application-photo figcaption {
  padding: 0 7vw;
}

.material-detail-page .md-application-photo img {
  aspect-ratio: 3/2;
  object-position: center;
}

.material-detail-page .md-application-text {
  width: auto;
  margin: var(--space-27) 0 0;
}

.material-detail-page .md-use-list {
  display: block;
}

.material-detail-page .md-use-list li {
  display: grid;
  grid-template-columns: 25px minmax(0,1fr);
  gap: var(--space-16);
}

.material-detail-page .md-use-list li+li {
  margin-top: var(--space-27);
}

.material-detail-page .md-use-list h3 {
  font-size: var(--font-22);
}

.color-detail .md-color-text>.md-heading {
  margin-bottom: var(--space-28);
}

.color-detail .md-surface {
  margin-top: var(--space-30);
}

.functional-detail .md-structure-text {
  margin-top: var(--space-27);
}

.functional-detail .md-performance {
  padding: var(--space-25) 0 var(--space-40);
}

.functional-detail .md-performance>.md-heading {
  margin-bottom: var(--space-28);
}

.functional-detail .md-performance .md-points li {
  grid-template-columns: 28px minmax(0,1fr);
  gap: var(--space-18);
}

.functional-detail .md-performance .md-points li>div {
  display: block;
}

.functional-detail .md-performance .md-points p {
  margin-top: var(--space-12);
}

.material-detail-page .md-design {
  padding: var(--space-35) 0 var(--space-40);
}

.material-detail-page .md-design-list {
  display: block;
  margin-top: var(--space-28);
}

.material-detail-page .md-design-list li {
  display: grid;
  grid-template-columns: 25px minmax(0,1fr);
  gap: var(--space-18);
  padding: var(--space-23) 0;
}

.material-detail-page .md-design-list li>div {
  display: block;
}

.material-detail-page .md-design-list p {
  margin-top: var(--space-12);
}

.material-detail-page .md-related {
  display: block;
  padding: var(--space-25) 0 var(--space-40);
}

.material-detail-page .md-related>div:last-of-type {
  display: block;
  margin-top: var(--space-25);
}

.material-detail-page .md-related>div:last-of-type>a {
  display: block;
  padding: var(--space-23) 0;
}

.material-detail-page .md-related nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-10);
  margin-top: var(--space-15);
}

.material-detail-page .md-contact {
  display: block;
  padding: var(--space-35) 0;
}

.material-detail-page .md-contact h2 {
  font-size: var(--font-26);
}

.material-detail-page .md-contact>div:last-child {
  margin-top: var(--space-27);
}

.material-detail-page .md-contact .solid-link {
  min-height: 66px;
}

.material-detail-page .md-disclaimer {
  padding-bottom: var(--space-30);
}
}

/* material-details */
@media(max-width:360px) {
.material-detail-page h1 {
  font-size: var(--font-27);
}

.material-detail-page h2 {
  font-size: var(--font-24);
}

.material-detail-page .md-contact h2 {
  font-size: var(--font-24);
}
}

/* material-details */
@media(prefers-reduced-motion:reduce) {
.material-detail-page .solid-link {
  transition: none;
}
}

/* material-details */
.material-detail-page main p {
  letter-spacing: .01em;
}

.material-detail-page .md-points p,
.material-detail-page .md-use-list p {
  max-width: 44ch;
}

.material-detail-page .md-related nav {
  gap: var(--space-12) var(--space-28);
}

.functional-detail .md-structure-text h3 {
  max-width: 24ch;
  line-height: 1.8;
}

.functional-detail .md-performance .md-points {
  border-top: 1px solid var(--line);
  padding-top: var(--space-12);
}

.functional-detail .md-performance .md-points li {
  border: 0;
  padding: var(--space-28) 0;
  gap: var(--space-28);
}

.functional-detail .md-performance .md-points li>div {
  grid-template-columns: minmax(150px,.75fr) minmax(0,2fr);
  gap: var(--space-55);
}

.functional-detail .md-performance .md-number {
  font-size: var(--font-23);
  line-height: 1.9;
}

.functional-detail .md-performance h3 {
  font-size: var(--font-29);
  line-height: 1.6;
  font-weight: 500;
}

.functional-detail .md-performance .md-points p {
  max-width: 60ch;
}

.functional-detail .md-performance>.md-note {
  max-width: 76ch;
  margin-top: var(--space-20);
}

.functional-detail .md-performance>.md-note+.md-note {
  font-size: var(--font-13);
  margin-top: var(--space-12);
}

/* material-details */
@media(max-width:850px) and (min-width:561px) {
.functional-detail .md-performance .md-points li>div {
  grid-template-columns: 150px minmax(0,1fr);
  gap: var(--space-30);
}

.functional-detail .md-performance h3 {
  font-size: var(--font-26);
}
}

/* material-details */
@media(max-width:560px) {
.material-detail-page main p {
  font-size: var(--font-15_5);
  line-height: 1.95;
}

.material-detail-page main .md-label {
  font-size: var(--font-12);
}

.material-detail-page main .md-note,
.material-detail-page main .md-disclaimer {
  font-size: var(--font-13);
  line-height: 1.95;
}

.material-detail-page .md-points p,
.material-detail-page .md-use-list p {
  max-width: none;
}

.material-detail-page .md-related nav {
  gap: var(--space-7);
}

.material-detail-page .md-contact {
  padding-top: var(--space-38);
}

.material-detail-page .md-contact .md-note {
  margin-top: var(--space-16);
}

.frost-detail .md-hero {
  padding-bottom: var(--space-50);
}

.frost-detail .frost-character {
  padding-top: var(--space-38);
  padding-bottom: var(--space-34);
}

.frost-detail .frost-character .md-points li+li {
  margin-top: var(--space-24);
}

.frost-detail .frost-application {
  padding-top: var(--space-35);
  padding-bottom: var(--space-45);
}

.pattern-detail .pattern-character {
  padding-bottom: var(--space-28);
}

.pattern-detail .pattern-application {
  padding-top: var(--space-38);
  padding-bottom: var(--space-50);
}

.color-detail .md-color-text>.md-heading {
  margin-bottom: var(--space-25);
}

.color-detail .md-surface {
  margin-top: var(--space-25);
}

.color-detail .color-character {
  padding-bottom: var(--space-32);
}

.color-detail .color-application {
  padding-top: var(--space-38);
  padding-bottom: var(--space-45);
}

.functional-detail .functional-character {
  padding-bottom: var(--space-35);
}

.functional-detail .md-structure-text {
  margin-top: var(--space-25);
}

.functional-detail .md-structure-text p {
  margin-top: var(--space-16);
}

.functional-detail .md-performance {
  padding-top: var(--space-30);
  padding-bottom: var(--space-35);
}

.functional-detail .md-performance .md-points {
  padding-top: var(--space-8);
}

.functional-detail .md-performance .md-points li {
  grid-template-columns: 28px minmax(0,1fr);
  gap: var(--space-18);
  padding: var(--space-22) 0;
}

.functional-detail .md-performance .md-points li>div {
  display: block;
}

.functional-detail .md-performance .md-number {
  font-size: var(--font-20);
  line-height: 1.95;
}

.functional-detail .md-performance h3 {
  font-size: var(--font-25);
  line-height: 1.65;
}

.functional-detail .md-performance .md-points p {
  margin-top: var(--space-13);
}

.functional-detail .functional-application {
  padding-top: var(--space-35);
}
}

/* material-details */
@media(max-width:360px) {
.material-detail-page main p {
  font-size: var(--font-15);
}

.material-detail-page main .md-label {
  font-size: var(--font-12);
}

.material-detail-page main .md-note,
.material-detail-page main .md-disclaimer {
  font-size: var(--font-13);
}
}
}