```json
{
"summary

```json
{
"summary": "已将TailwindCSS类提炼到SCSS中，使用@apply语法嵌套，并优化了图片链接",
"widget": {
"type": "custom-template",
"isAPI": false,
"fullWidth": true,
"html": "<style lang=\"scss\">\n.feature-section {\n @apply py-16 px-8 bg-white;\n \n .container-wrapper {\n @apply grid gap-8 md:grid-cols-12 md:gap-x-12 items-start;\n \n .image-container {\n @apply md:col-span-5;\n \n img {\n @apply w-full h-auto shadow-xl;\n max-width: 260px;\n height: 370px;\n object-fit: cover;\n }\n }\n \n .content-container {\n @apply md:col-span-7 flex flex-col gap-y-6;\n \n .title {\n @apply text-4xl font-bold text-gray-900 tracking-wide;\n }\n \n .description {\n @apply text-lg text-gray-600 leading-relaxed;\n }\n \n .preview-btn {\n @apply border-2 border-solid border-blue-600 py-3 px-6 bg-transparent mt-4 w-fit flex items-center gap-x-2 hover:bg-blue-50 transition-colors duration-200;\n \n .btn-text {\n @apply text-base font-medium text-blue-600;\n }\n \n .icon {\n @apply w-5 h-5 text-blue-600;\n }\n }\n }\n }\n}\n</style>\n\n<div class=\"feature-section\">\n <div class=\"container container-wrapper\">\n <div class=\"image-container\">\n <img src=\"https://placehold.co/260x370\" alt=\"全球每日要情报告封面\">\n </div>\n <div class=\"content-container\">\n <h2 class=\"title\">《全球每日要情》</h2>\n <p class=\"description\">信息构筑认知，判断引领方向，时效决定胜负。本产品为政府、企业与社会提供高度凝练的情报式简讯，助力用户把握全球风向的\"首发智识\"。</p>\n <a href=\"#\" class=\"preview-btn\">\n <span class=\"btn-text\">查看第一期预览</span>\n <svg class=\"icon\" fill=\"currentColor\" viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\">\n <path fill-rule=\"evenodd\" d=\"M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z\" clip-rule=\"evenodd\"></path>\n </svg>\n </a>\n </div>\n </div>\n</div>"
},
"next": [
"优化SCSS嵌套结构",
"添加变量控制颜色",
"提取重复样式",
"优化响应式断点",
"添加动画效果"
]
}
```