#app{width:100%}
#main{width:100%;padding:12px 20px 0;min-width:0}
#main .category-title{font-size:20px;line-height:30px;font-weight:500;color:var(--text);margin-bottom:12px}

#app .card .icon{width:60px;height:60px;border-radius:12px;box-shadow:0 1px 2px 0 rgba(0,0,0,.25)}
.apps{width:100%;display:flex;flex-direction:column;gap:8px}
.apps li{width:100%;padding:12px;border-radius:12px;background-color:var(--surface);min-width:0}
.apps li .get-button{width:60px}

#aside .category-container{width:100%;padding:22px 20px 0}

@media (min-width:1024px){
  #app{padding:22px var(--content-gutter);display:flex;gap:24px;flex-wrap:wrap}
  #app > .ads-box{flex:1 0 100%}
  #main{width:auto;flex:1 1 auto;display:flex;flex-direction:column;gap:8px;padding:0}
  #app .card .icon{width:80px;height:80px;border-radius:var(--radius-lg);box-shadow:var(--shadow-icon)}
  #app .card .information{gap:10px}
  #app .card .information .information-text .title{font-size:18px;line-height:27px}
  #app .card .information .information-text .developer{font-size:14px;line-height:21px}
  #main .category-title{font-size:24px;line-height:36px;margin-bottom:0}
  #main .divider{border-bottom:1px solid var(--border)}

  .apps{gap:0}
  .apps li{padding:12px 22px 12px 12px;border-radius:0;background-color:transparent}
  .apps li:hover{padding:11px 21px 11px 11px;border-radius:12px;border:1px solid var(--primary);background:#e4f0ff}
  .apps li:hover .card .title{color:var(--primary)}
  .apps li:hover .card .get-button{background:var(--primary);color:var(--surface);box-shadow:var(--shadow-cta)}
  .apps li .get-button{width:83px}

  #aside{width:300px;flex:0 0 auto;display:flex;flex-direction:column;gap:22px}
  #aside .category-container{padding:0;background-color:var(--surface);border-radius:8px;overflow:hidden}
  #aside .category-container .category-header{height:50px;background-color:#00c9a9;padding-left:20px;display:flex;align-items:center;margin-bottom:0}
  #aside .category-container .category-header .header-title{font-size:18px;font-weight:500;color:var(--surface);line-height:normal}
  #aside .category-content{padding:8px;background-color:transparent;border-radius:0;grid-template-columns:repeat(2,calc((100% - 8px) / 2));gap:8px}
  #aside .category-content li{height:46px;padding-bottom:0;border-radius:8px;border:1px solid var(--border);background-color:rgba(0,0,0,.03)}
  #aside .category-content li:hover{border-color:var(--primary)}
  #aside .category-content li a{position:static;flex-direction:row;justify-content:flex-start;padding:8px;gap:8px}
  #aside .category-content li a .category-icon{width:30px;height:30px;flex:0 0 auto}
  #aside .category-content li a .category-name{font-size:12px;font-weight:400;color:var(--text-secondary);text-align:left;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
}