@import url('/assets/image/image-common.css');

.image-guide{
    display:grid;
    gap:28px;
}
.image-guide__header,
.image-guide section{
    padding:28px;
    border:1px solid var(--line);
    border-radius:20px;
    background:var(--surface);
}
.image-guide__header span{
    color:var(--primary);
    font-weight:900;
}
.image-guide__header h1{
    margin:10px 0 12px;
    font-size:34px;
}
.image-guide__header p{
    margin:0;
    color:var(--muted);
    line-height:1.8;
}
.image-guide h2{
    margin:0 0 16px;
}
.image-guide p,
.image-guide li{
    line-height:1.8;
}
.image-guide__grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
}
.image-guide__grid article{
    padding:18px;
    border:1px solid var(--line);
    border-radius:15px;
    background:var(--surface-soft);
}
.image-guide__grid h3{
    margin:0 0 8px;
}
.image-guide__grid p{
    margin:0;
}
.image-guide__example{
    padding:16px;
    border-radius:14px;
    background:var(--surface-soft);
    font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
    white-space:pre-wrap;
    word-break:break-all;
}
.image-guide__cta{
    text-align:center;
}
.image-guide__cta a{
    display:inline-flex;
    margin-top:10px;
    padding:13px 18px;
    border-radius:12px;
    background:var(--primary);
    color:#fff;
    font-weight:900;
}
@media(max-width:720px){
    .image-guide__header h1{font-size:28px}
    .image-guide__grid{grid-template-columns:1fr}
    .image-guide__header,.image-guide section{padding:22px}
}