| | |
| | | line-height: 1.4rem; |
| | | |
| | | &:has(> img) { |
| | | background-color: none; |
| | | background-color: transparent; |
| | | border-radius: 0; |
| | | padding: 0; |
| | | } |
| | |
| | | column-gap: #{map-get($desktopGrid, columnGap)}; |
| | | row-gap: #{map-get($desktopGrid, rowGap)}; |
| | | grid-template-areas: #{map-get($desktopGrid, templateAreas)}; |
| | | @media all and ($desktop) { |
| | | @media all and ($tablet) { |
| | | grid-template-columns: #{map-get($tabletGrid, templateColumns)}; |
| | | grid-template-rows: #{map-get($tabletGrid, templateRows)}; |
| | | column-gap: #{map-get($tabletGrid, columnGap)}; |
| | |
| | | grid-template-areas: #{map-get($mobileGrid, templateAreas)}; |
| | | } |
| | | |
| | | @media all and ($desktop) { |
| | | @media all and not ($desktop) { |
| | | padding: 0 1rem; |
| | | } |
| | | @media all and ($mobile) { |
| | |
| | | margin-left: inherit; |
| | | margin-right: inherit; |
| | | } |
| | | @media all and ($desktop) { |
| | | @media all and not ($desktop) { |
| | | position: initial; |
| | | height: unset; |
| | | width: 100%; |
| | |
| | | min-width: 100%; |
| | | margin-left: auto; |
| | | margin-right: auto; |
| | | @media all and ($desktop) { |
| | | @media all and ($tablet) { |
| | | margin-right: 0; |
| | | } |
| | | @media all and ($mobile) { |
| | | margin-right: 0; |
| | | margin-left: 0; |
| | | } |
| | | } |
| | |
| | | font-size: 0.9rem; |
| | | padding: 0.1rem 0.5rem; |
| | | border: 1px solid var(--lightgray); |
| | | width: max-content; |
| | | border-radius: 5px; |
| | | margin-bottom: -0.5rem; |
| | | color: var(--darkgray); |
| | |
| | | width: 100%; |
| | | border-radius: 5px; |
| | | } |
| | | |
| | | .navigation-progress { |
| | | position: fixed; |
| | | top: 0; |
| | | left: 0; |
| | | width: 0; |
| | | height: 3px; |
| | | background: var(--secondary); |
| | | transition: width 0.2s ease; |
| | | z-index: 9999; |
| | | } |