f3a3bf35f8
The color we used offered a contrast of 3.94 against the background. The minimum requirement for AA level is a contrast of 4.5, and we usually aim for a contrast of 5 at least. So we're making the text slightly darker so it's easier to read.
79 lines
1.6 KiB
SCSS
79 lines
1.6 KiB
SCSS
.investments-list {
|
|
@include flex-grid-row;
|
|
margin-top: $line-height;
|
|
|
|
> header {
|
|
@include grid-column-gutter;
|
|
width: 100%;
|
|
}
|
|
|
|
.investments-list-item {
|
|
@extend %panel;
|
|
@include xy-gutters;
|
|
border-radius: rem-calc(6);
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 0;
|
|
margin-bottom: $line-height / 2;
|
|
position: relative;
|
|
width: 100%;
|
|
|
|
@include breakpoint(medium) {
|
|
$gap: rem-calc(map-get($grid-margin-gutters, medium));
|
|
width: calc(33.33% - #{$gap});
|
|
}
|
|
|
|
img {
|
|
border-top-left-radius: rem-calc(6);
|
|
border-top-right-radius: rem-calc(6);
|
|
height: $line-height * 10;
|
|
width: fit-content;
|
|
object-fit: cover;
|
|
|
|
@include breakpoint(medium only) {
|
|
height: $line-height * 10;
|
|
}
|
|
}
|
|
|
|
.budget-investment-content {
|
|
display: flex;
|
|
flex: 1;
|
|
flex-direction: column;
|
|
padding: 0 rem-calc(12) rem-calc(6);
|
|
min-height: $line-height * 8;
|
|
|
|
.investment-project-info {
|
|
flex: 1;
|
|
margin-bottom: $line-height * 2;
|
|
}
|
|
}
|
|
|
|
.read-more {
|
|
align-self: flex-end;
|
|
}
|
|
}
|
|
|
|
.supports-and-price {
|
|
@include has-fa-icon(award, solid, after);
|
|
background: $light;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
padding: rem-calc(6) rem-calc(12);
|
|
|
|
.price-title,
|
|
.supports-title {
|
|
color: #696969;
|
|
font-size: $small-font-size;
|
|
text-transform: uppercase;
|
|
width: 100%;
|
|
}
|
|
|
|
&::after {
|
|
font-size: 2em;
|
|
margin-left: auto;
|
|
margin-right: 0;
|
|
transform: translateY(-25%);
|
|
}
|
|
}
|
|
}
|