| .index-page { | |
| max-width: 100dvw; | |
| } | |
| @media (orientation: portrait) { | |
| .index-page-content { | |
| padding-left: 10px; | |
| padding-right: 10px; | |
| } | |
| } | |
| @media (orientation: landscape) { | |
| .index-page-content { | |
| padding-left: 50px; | |
| padding-right: 50px; | |
| } | |
| } | |
| .index-page-container { | |
| display: flex; | |
| flex-direction: column; | |
| flex: 1; | |
| } | |
| .index-page-content { | |
| width: 100dvw; | |
| z-index: 1; | |
| } | |
| .section-title { | |
| color: #ffffff; | |
| font-size: 1.4rem; | |
| font-weight: bold; | |
| margin: 16px 0; | |
| padding-left: 16px; | |
| } | |
| .grid-container { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); | |
| gap: 16px; | |
| padding: 0 16px; | |
| } | |