.article-preview { .article-banner { position: relative; } .article-banner--image { width: 100%; } .article-banner--strip { color: #fff; position: absolute; bottom: 15%; right: 0; width: 50%; text-align: center; @each $category, $color in $categories { .#{$category} & { background-color: $color; } } @media (max-width: $screen-sm){ position: relative; width: 100%; } } .article-banner--title { font-size: 32px; text-transform: uppercase; margin-top: 0; padding-top: 20px; } .article-banner--title, .article-banner--abstract { font-weight: bold; } .article-banner--abstract { padding-bottom: 10px; } .show-content-row { .button--themed { .btn { font-size: 38px; @media (max-width: $screen-sm){ font-size: 20px; } } } } .talk-proposal { margin-top: -20px; } .proposal-box { // padding: 10px 20px; .proposal-box--title { font-size: 38px; font-weight: 400; text-align: center; margin-bottom: 20px; } .proposal-box--text { font-size: 24px; font-weight: 700; line-height: 1.2; margin-bottom: 20px; } @each $category, $color in $categories { .#{$category} & { border-color: $color; .proposal-box--title { color: $color; } } } } .row-height { border-spacing: 20px; } .col-height { border: 1px solid #000; border-radius: 3px; @each $category, $color in $categories { .#{$category} & { border-color: $color; } } @media (max-width: $screen-sm){ display: block; border: none; } } }