Newer
Older
font-family: var(--main-font-family);
margin-bottom: 1rem;
}
.hy-general-list-item__link {
&:hover,
&:focus {
.hy-general-list-item__type {
background-color: var(--brand-main);
.hy-general-list-item__title {
color: var(--brand-main);
text-decoration: underline;
.hy-general-list-item__image-container {
display: flex;
justify-content: stretch;
margin: 0;
position: relative;
width: 100%;
@include breakpoint($narrow) {
max-width: 35.7%;
@include breakpoint($wide) {
max-width: 23.13%;
}
@include breakpoint($extrawide) {
max-width: 23.03%;
}
img {
.hy-general-list-item__image {
background-color: #ececec;
width: 100%;
height: 100%;
}
.hy-general-list-item__type {
@include font-size(12px, 14px);
@include font-weight($bold);
background-color: var(--grayscale-black);
color: #ffffff;
left: -8px;
letter-spacing: -0.1px;
padding: 5px 8px;
position: absolute;
text-transform: uppercase;
top: 16px;
}
.hy-general-list-item__text-container {
background-color: var(--grayscale-background-box);
display: flex;
flex-direction: column;
flex-grow: 1;
padding: 16px 12px;
@include breakpoint($wide) {
padding: 14px 32px 24px 24px;
}
@include breakpoint($extrawide) {
padding: 20px 104px 32px 32px;
}
.hy-general-list-item__title {
@include font-size(18px, 22px);
@include font-weight($bold);
color: var(--brand-main-nearly-black);
letter-spacing: -0.45px;
margin-bottom: 8px;
margin-top: 0;
.hy-general-list-item__description {
@include font-size(15px, 20px);
color: var(--grayscale-dark);
letter-spacing: -0.09px;
margin: 0;
@include breakpoint($narrow) {
@include font-size(14px, 18px);
@include breakpoint($extrawide) {
@include font-size(14px, 20px);
}