.top-category{padding-top:12px}
.top-category .section-content{width:100%;margin:0;padding:0 14px;display:grid;grid-template-columns:repeat(2,1fr);grid-auto-flow:row}
.top-category .section-content li{width:100%;padding:5px;align-items:center}
.top-category .section-content li a{display:flex;color:var(--text);font-size:14px;height:42px;align-items:center}
.top-category .section-content li a .category-icon{width:32px;margin-right:10px;flex:0 0 auto}

.trending-container{padding-top:12px}
.trending-content{width:100%;padding:0 0 0 14px}
.trending-track{display:flex;gap:0;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.trending-track::-webkit-scrollbar{display:none}
.trending-slide{flex:0 0 248px;scroll-snap-align:start}
.trending-slide li{width:248px;padding:6px;display:flex;gap:8px;align-items:center}
.trending-slide li .sequence{font-size:16px;font-weight:700}
.trending-slide:first-child li:nth-child(1) .sequence{color:var(--rating-gold)}
.trending-slide:first-child li:nth-child(2) .sequence{color:var(--rank-2)}
.trending-slide:first-child li:nth-child(3) .sequence{color:var(--rank-3)}

.choice-container{width:100%;padding:40px var(--page-gutter) 0}
.choice-header{width:100%;height:32px;display:flex;align-items:center;justify-content:center;margin-bottom:12px}
.choice-header .header-title{font-size:20px;font-weight:500;color:var(--text);text-transform:capitalize}
.choice-content{width:100%;height:450px;border-radius:var(--radius-md);background-color:var(--surface);overflow:hidden}
.choice-content .choice-list{width:100%;height:100%;overflow-y:scroll;scrollbar-width:none}
.choice-content .choice-list::-webkit-scrollbar{display:none}
.choice-content .choice-list li{width:100%;padding:12px;display:flex;gap:8px;align-items:center}
.choice-content .choice-list li .sequence{width:24px;font-size:18px;font-weight:400;color:var(--rank-rest);text-align:center}

.category-container{width:100%;padding:40px var(--page-gutter) 0}
.category-content{margin-top:10px}

@media (min-width:1024px){

:root{
  --section-column:6;
  --content-gutter:max(36px,(100% - 1080px) / 2);
}
#app{padding:22px var(--content-gutter);display:flex;flex-direction:column;gap:40px}
.section-header{height:36px;padding:0 8px 8px;border-bottom:1px solid var(--border)}
.section-header .header-title{font-size:24px}
.section-content{width:100%;display:grid;grid-template-columns:repeat(var(--section-column),calc(100% / var(--section-column)))}
.section-content li{padding:17px 20px;display:flex;gap:12px;align-items:center}
.top-category{padding-top:0}
.top-category .section-content{grid-template-columns:repeat(5,1fr);padding:0}
.top-category .section-content li{width:100%;padding:10px;align-items:center}
.top-category .section-content li a{display:flex;color:var(--text);font-size:14px;height:42px;align-items:center}
.top-category .section-content li a .category-icon{width:32px;margin-right:10px;flex:0 0 auto}
.card .icon{width:80px;height:80px;border-radius:var(--radius-lg);box-shadow:var(--shadow-icon)}
.card-vertical .icon{width:100%;height:auto}
.card .information{gap:10px}
.card .get-button{width:85px;height:37px}
.card .information .information-text .title{font-size:18px;line-height:27px}
.card .information .information-text .developer{font-size:14px;line-height:21px}
.card-vertical .information .information-text .title{font-size:16px;line-height:24px}
.card-vertical .information .information-text .developer{font-size:12px;line-height:18px}
.choices,.footer-category{width:100%;display:flex;gap:22px}
.choices > div,.footer-category > div{width:50%;flex:1 1 auto;min-width:0}
.choice-header,.footer-header{width:100%;height:36px;padding:0 28px 0 10px;display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.choice-header .header-title,.footer-header .header-title{font-size:24px;font-weight:500;color:var(--text);text-transform:capitalize}
.choice-header a,.footer-header a{font-size:16px;color:var(--primary);font-weight:300;display:flex;align-items:center;gap:4px}
.choice-content{width:100%;height:auto;overflow:visible;border-radius:var(--radius-lg);background-color:var(--surface)}
.choice-content li{width:100%;padding:17px 18px;display:flex;gap:12px;align-items:center}
.choice-content li .sequence{width:22px;font-size:18px;font-weight:400;color:var(--rank-rest);text-align:center}
.category-content{margin-top:16px}
.category-content li a .category-icon{width:60px;height:60px}
.category-content li a .category-name{font-size:16px}

}