Closed milesj closed 4 years ago
Right now, it duplicates a lot.
<style id="aesthetic-global" type="text/css" media="screen" data-aesthetic-type="global" data-aesthetic-hydrate-index="-1" data-aesthetic-rule-index="100" ></style> <style id="aesthetic-standard" type="text/css" media="screen" data-aesthetic-type="standard" data-aesthetic-hydrate-index="77" data-aesthetic-rule-index="100" > .a { align-items: center; } .b { border-bottom: 1px solid rgb(235, 235, 235); } .c { display: flex; } .d { justify-content: space-between; } .e { padding-bottom: var(--spacing-md); } .f { padding-left: 5rem; } .g { padding-right: 5rem; } .h { padding-top: var(--spacing-md); } .i { color: rgb(72, 72, 72); } .j { font-size: var(--text-sm-size); } .k { font-weight: 600; } .l { width: 400px; } .m { border: 1px solid rgb(235, 235, 235); } .n { border-radius: var(--border-df-radius); } .o { box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 4px; } .p { font-size: var(--text-df-size); } .q { font-weight: 800; } .r { height: 48px; } .s { padding-left: var(--spacing-md); } .t { width: 460px; } .u { margin: auto; } .v { max-width: 1760px; } .w { font-family: var(--typography-font-text); } .x { word-wrap: break-word; } .y { color: var(--palette-neutral-color-80); } .z { line-height: var(--text-df-line-height); } .a1 { display: inline-block; } .b1 { margin-top: var(--spacing-df); } .c1 { padding: var(--spacing-df); } .d1 { text-decoration: underline; } .e1 { margin-left: NaNpx; } .f1:hover { background-color: var(--palette-tertiary-bg-hovered); } .g1:hover { border-radius: 5px; } .h1 { padding-bottom: var(--spacing-xl); } .i1 { padding-top: var(--spacing-xl); } .j1 { margin-bottom: var(--spacing-md); } .k1 { font-family: var(--typography-font-heading); } .l1 { letter-spacing: var(--heading-l1-letter-spacing); } .m1 { line-height: var(--heading-l1-line-height); } .n1 { font-size: var(--heading-l1-size); } .o1 { margin-bottom: 0; } .p1 { font-weight: normal; } .q1 { font-size: var(--text-lg-size); } .r1 { line-height: var(--text-lg-line-height); } .s1 { margin-top: var(--spacing-sm); } .t1 { border-radius: 12px; } .u1 { box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 8px; } .v1 { flex: 1px; } .w1 { flex-direction: row; } .x1 { height: 84px; } .y1 { margin: 0 8px; } .c2:first-child { margin-left: 0; } .d2:last-child { margin-right: 0; } .e2 { padding: 16px; } .f2 { border-bottom-left-radius: 12px; } .g2 { border-top-left-radius: 12px; } .k2 { flex: 1 1 auto; } .l2 { margin: 0rem 0.5rem; } .m2 { max-width: 50%; } .n2 { padding: var(--spacing-lg); } .o2 { margin-top: 0.75rem; } .p2 { box-sizing: border-box; } .q2 { margin: var(--spacing-df); } .r2 { border-top-right-radius: 12px; } .s2 { height: 483px; } .t2 { line-height: var(--text-sm-line-height); } .u2 { margin-bottom: var(--spacing-df); } .v2 { display: none; } .w2 { width: 100%; } .x2 { border-top: 1px solid rgb(221, 221, 221); } .g3 { margin: 0; } .h3 { padding: 0; } .i3 { display: block; } .j3 { flex-direction: column; } .k3 { margin-bottom: var(--spacing-xl); } .l3 { border-bottom: 1px solid rgb(221, 221, 221); } .n3 { list-style: none; } .w3:hover { text-decoration: underline; } </style> <style id="aesthetic-conditions" type="text/css" media="screen" data-aesthetic-type="conditions" data-aesthetic-hydrate-index="22" data-aesthetic-rule-index="100" > @media (min-width: 46.5em) { .t3 { flex-basis: 33.33333333333333%; } } @media (min-width: 70.5em) { .v3 { padding-top: var(--spacing-md); } } @media (min-width: 70.5em) { .u3 { padding: 0; } } @media (min-width: 46.5em) { .s3 { padding-right: var(--spacing-df); } } @media (min-width: 46.5em) { .r3 { padding-left: var(--spacing-df); } } @media (min-width: 46.5em) { .q3 { padding-top: var(--spacing-df); } } @media (min-width: 46.5em) { .o3 { flex-wrap: wrap; } } @media (min-width: 70.5em) { .p3 { display: block; } } @media (min-width: 46.5em) { .m3 { border: none; } } @media (min-width: 46.5em) { .b3 { padding-right: var(--spacing-lg); } } @media (min-width: 70.5em) { .f3 { padding-right: var(--spacing-xl); } } @media (min-width: 70.5em) { .e3 { padding-left: var(--spacing-xl); } } @media (min-width: 70.5em) { .d3 { flex-direction: row; } } @media (min-width: 70.5em) { .c3 { justify-content: space-around; } } @media (min-width: 46.5em) { .a3 { padding-left: var(--spacing-lg); } } @media (min-width: 46.5em) { .z2 { flex-direction: column; } } @media (min-width: 46.5em) { .y2 { display: flex; } } @media (max-width: 1112px) { .j2 { height: 200px; } } @media (max-width: 1112px) { .i2 { border-top-right-radius: 12px; } } @media (max-width: 1112px) { .h2 { border-bottom-left-radius: 0; } } @media (max-width: 1112px) { .b2 { width: 290px; } } @media (max-width: 1112px) { .a2 { height: 250px; } } @media (max-width: 1112px) { .z1 { flex-direction: column; } } </style>
Right now, it duplicates a lot.