| .logo-view { | |
| display: flex; | |
| margin: 0 auto; | |
| + .logo-view.logo-view { | |
| margin-top: 0; | |
| } | |
| &.color { | |
| background-color: white; | |
| background-blend-mode: hard-light; | |
| } | |
| &.light { | |
| background-color: var(--color-fog); | |
| background-blend-mode: color-burn; | |
| } | |
| &.dark { | |
| color: var(--color-fog); | |
| background-color: var(--color-navy); | |
| background-blend-mode: soft-light; | |
| a { | |
| color: var(--color-mustard); | |
| } | |
| } | |
| .feature-box-inner { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 80px 160px; | |
| div { | |
| display: flex; | |
| flex-direction: column; | |
| img { | |
| max-width: calc(100vw - 2 * var(--feature-box-padding) * var(--variable-px)); | |
| } | |
| span { | |
| font-weight: 800; | |
| margin-top: 20px; | |
| white-space: nowrap; | |
| } | |
| a { | |
| white-space: nowrap; | |
| } | |
| } | |
| } | |
| } | |