/* @group @variables */

[class*="m-support-detail"] {
}

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

[class*="m-support-detail"] {
--support-detail-grid-template-columns: repeat(2, 1fr);
}

}

/* @end @variables */

/* @group @m-support-detail */

[class*="m-support-detail"] {
overflow: clip;
display: grid;
grid-template-columns: var(--support-detail-grid-template-columns);
grid-template-rows: var(--support-detail-grid-template-rows);
gap: var(--support-detail-gap);
border-radius: .5rem;
}

[class*="m-support-detail"] {
background-color: hsl(177deg 100% 100%);
}

/* @end @m-support-detail */

/* @group @variables */

[class*="a-support-detail-body"] {
--support-detail-body-padding: 1.5rem;
}

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

[class*="a-support-detail-body"] {
/*--support-detail-body-min-height: 36rem;*/
--support-detail-body-padding: 2.25rem;
}

}

/* @end @variables */

/* @group @a-support-detail-body */

[class*="a-support-detail-body"] {
box-sizing: border-box;
display: grid;
align-items: center;
align-content: center;
gap: 2.25rem;
min-height: var(--support-detail-body-min-height);
padding: var(--support-detail-body-padding);
}

[class*="a-support-detail-body"] :where(h3, p, ul, ol) {
margin-bottom: 0;
padding-left: 0;
list-style: none;
}

[class*="a-support-detail-body"] h3 {
font-size: clamp(1.5rem, 1.357rem + 0.71vw, 2rem); /* 24〜36 / 320〜1440 */
line-height: 1.5;
color: hsl(347deg 85% 64%);
font-weight: 600;
font-variation-settings-strong: "wght" 600;
}

[class*="a-support-detail-body"] h3 span {
font-size: clamp(1.125rem, 1.018rem + 0.54vw, 1.5rem); /* 18〜24 / 320〜1440 */
}

[class*="a-support-detail-overview"] {
display: grid;
grid-auto-flow: row;
gap: .75rem;
}

[class*="a-support-detail-overview"] em {
font-weight: 600;
font-variation-settings-strong: "wght" 600;
color: hsl(63deg 50% 37%);
}

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

[class*="a-support-detail-media"] {
position: relative;
z-index: 1;
overflow: clip;
}

[class*="a-support-detail-media"] img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
}

}

/* @end @a-support-detail-body */