|
|
| Line 1: |
Line 1: |
| /*
| |
|
| |
| MAIN GRID and standard grid elements
| |
|
| |
| */
| |
|
| |
| .main-grid {
| |
| display: grid;
| |
| grid: auto-flow dense/repeat( auto-fit, minmax( 10.2rem, 1fr ) );
| |
| grid-auto-rows: minmax( 3rem, auto );
| |
| grid-gap: var( --space-xs );
| |
| margin-top: 15px;
| |
| }
| |
|
| |
| .card {
| |
| position: relative;
| |
| /*border: 1px solid var( --border-color-base );*/
| |
| border-radius: 6px;
| |
| background: var( --card-background );
| |
| padding: var(--space-lg);
| |
| }
| |
|
| |
| .card__label {
| |
| color: var( --color-base--subtle );
| |
| font-size: 16px;
| |
| }
| |
|
| |
| .card__text {
| |
| margin-top: 15px;
| |
| }
| |
|
| |
| .card__image img {
| |
| width: 100%;
| |
| height: auto;
| |
| border-radius: 6px;
| |
| }
| |
|
| |
| .card__video video {
| |
| width: 100% !important;
| |
| height: auto !important;
| |
| }
| |
|
| |
| .card__header {
| |
| font-family: 'Saira Extra Condensed','Nunito','Saira',system-ui,-apple-system,sans-serif;
| |
| text-transform: uppercase;
| |
| font-weight: bold;
| |
| color: var( --color-base-emphasized );
| |
| font-size: 30px;
| |
| line-height: 1;
| |
| margin-bottom: 10px;
| |
| }
| |
|
| |
| .card--col2 {
| |
| grid-column: span 2;
| |
| }
| |
|
| |
| .card--col3 {
| |
| grid-column: span 3;
| |
| }
| |
|
| |
| .card--col6 {
| |
| grid-column: 1 / -1;
| |
| }
| |
|
| |
| .card--row2 {
| |
| grid-row: span 2;
| |
| }
| |
|
| |
| .card--row6 {
| |
| grid-row: span 6;
| |
| }
| |
|
| |
|
| |
| .card--row4 {
| |
| grid-row: span 4;
| |
| }
| |
|
| |
| .card--row3 {
| |
| grid-row: span 3;
| |
| }
| |
|
| |
| .card--row8 {
| |
| grid-row: span 8/auto;
| |
| }
| |
|
| |
| .card--text {
| |
| margin-top: 0px;
| |
| padding: 15px;
| |
| }
| |
|
| |
|
| |
| /*
| |
| NAVIGATION CARDS
| |
| */
| |
|
| |
| .category-card { | | .category-card { |
| padding: 0; | | padding: 0; |
| border: 0; | | border: 0; |
| transition: all 0.3s ease; | | transition: all 0.3s ease; |
| display: flex; | | display: inline-table; |
| flex-direction: column; | | margin: 5px; |
| } | | } |
|
| |
|
| Line 121: |
Line 26: |
| } | | } |
|
| |
|
| .category-card__label a { | | .category-card__image { |
| display: flex;
| |
| width: 100%;
| |
| justify-content: center;
| |
| text-decoration: none;
| |
| color: #fff;
| |
| }
| |
| | |
| .category-card__background {
| |
| background: #f1f2f4;
| |
| border-radius: 6px 6px 0 0;
| |
| }
| |
| | |
| .category-card__background img {
| |
| width: 100%; | | width: 100%; |
| height: auto; | | height: auto; |
.category-card {
padding: 0;
border: 0;
transition: all 0.3s ease;
display: inline-table;
margin: 5px;
}
.category-card:hover {
transform: scale(1.04);
}
.category-card__label {
width: 100%;
color: #ffffff;
background-color: #d21f3c;
display:flex;
align-items:center;
justify-content:center;
font-family: 'Saira Extra Condensed','Nunito','Saira',system-ui,-apple-system,sans-serif;
font-weight: bold;
font-size: 26px;
font-style: italic;
border-radius: 0 0 6px 6px;
text-transform: uppercase;
}
.category-card__image {
width: 100%;
height: auto;
padding: 20%;
object-position: center;
}
