/* @group @variables */

[class*="m-writer-detail"] {
--font-size: .875rem;
--line-height: 1.71428571;
--paragraph-line-height: var(--line-height);
--color: var(--color-dimgray);
}

[class*="a-writer-name"] {
--head-3-font-size: 1rem;
--head-3-line-height: 1.5;
--head-3-font-weight: 300;
--head-3-font-variation-settings: "wght" 300;
--head-3-color: var(--color-black);
--head-4-font-size: .75rem;
--head-4-line-height: 1.5;
--head-4-font-weight: 300;
--head-4-font-variation-settings: "wght" 300;
--head-4-color: var(--color-black);
--font-size: .75rem;
--line-height: 1.5;
--paragraph-line-height: var(--line-height);
}

[class*="a-writer-portrait"] {
--max-width: 9rem;
}

@media all and (max-width:47.9375em) {

[class*="a-products-media"] {
order: -2;
}

[class*="m-writer-detail"] {
--grid-template-columns: repeat(1, 1fr);
--gap: .75rem 1.125rem;
}

[class*="a-writer-portrait"] {
--margin-right: auto;
--margin-left: auto;
}

}

@media all and (min-width:48em) {

[class*="m-writer-detail"] {
--grid-template-columns: 9rem 1fr;
--grid-template-rows: auto 1fr;
--gap: .75rem 1.125rem;
--writer-portrait-grid-column: 1;
--writer-portrait-grid-row: 1 / span 2;
--writer-name-grid-column: 2;
--writer-name-grid-row: 1;
--writer-summary-grid-column: 2;
--writer-summary-grid-row: 2;
}

}

/* @end @variables */

/* @group @m-writer-detail */

[class*="m-writer-detail"] {
display: grid;
grid-template-columns: var(--grid-template-columns);
grid-template-rows: var(--grid-template-rows);
gap: var(--gap);
}

[class*="a-writer-portrait"] {
grid-column: var(--writer-portrait-grid-column);
grid-row: var(--writer-portrait-grid-row);
}

[class*="a-writer-name"] {
grid-column: var(--writer-name-grid-column);
grid-row: var(--writer-name-grid-row);
}

[class*="a-writer-summary"] {
grid-column: var(--writer-summary-grid-column);
grid-row: var(--writer-summary-grid-row);
}

/* @end @m-writer-detail */

/* @group @a-writer-portrait */

[class*="a-writer-portrait"] {
width: 100%;
max-width: var(--max-width);
margin-right: var(--margin-right);
margin-left: var(--margin-left);
}

[class*="a-writer-portrait"] img {
border-radius: 50%;
}

/* @end @a-writer-portrait */