.ckl-card {
display: flex;
flex-direction: column;
min-width: 0;
}
.ckl-card__thumb {
display: block;
overflow: hidden;
aspect-ratio: 148 / 100; } .ckl-card--grid .ckl-card__thumb {
background-color: #eaeaea;
}
.ckl-card--small .ckl-card__thumb {
background-color: var(--ckl-aqua-blue);
}
.ckl-card__thumb img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.35s var(--ckl-ease-entrance);
}
.ckl-card:hover .ckl-card__thumb img {
transform: scale(1.025);
}
.ckl-card__thumb-fallback {
display: block;
width: 100%;
height: 100%;
}
.ckl-card__content {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.ckl-card--grid .ckl-card__content {
padding-top: 2.275rem; }
.ckl-card--small .ckl-card__content {
padding-top: 1.48rem; }
.ckl-card__tag {
line-height: 1.27;
color: var(--ckl-blue);
transition: color 0.2s ease-in-out;
}
.ckl-card--grid .ckl-card__tag {
font-size: 1.225rem; }
.ckl-card--small .ckl-card__tag {
font-size: 0.7875rem; }
.ckl-card__tag:hover,
.ckl-card__tag:focus-visible {
color: var(--ckl-dark);
}
.ckl-card__link {
display: block;
}
.ckl-card--grid .ckl-card__link {
margin-top: 1.1875rem; }
.ckl-card--small .ckl-card__link {
margin-top: 0.7725rem; }
.ckl-card__title {
font-family: var(--ckl-font-title);
font-weight: var(--ckl-fw-title);
line-height: 85%;
color: var(--ckl-dark);
margin: 0;
transition: color 0.2s ease-in-out;
}
.ckl-card--grid .ckl-card__title {
font-size: clamp(1.75rem, 2.84vw, 2.625rem); }
.ckl-card--small .ckl-card__title {
font-size: clamp(1.5rem, 2.37vw, 2.1875rem); } .ckl-card:hover .ckl-card__title,
.ckl-card__link:focus-visible .ckl-card__title {
color: var(--ckl-blue);
}
@media (hover: hover) {
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
.ckl-card__title {
background-color: var(--ckl-dark);
background-image: linear-gradient(var(--ckl-blue), var(--ckl-blue));
background-repeat: no-repeat;
background-position: left center;
background-size: 0% 100%;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
transition: background-size 0.5s var(--ckl-ease-entrance);
}
.ckl-card:hover .ckl-card__title,
.ckl-card__link:focus-visible .ckl-card__title {
background-size: 100% 100%;
}
}
}
@media (prefers-reduced-motion: reduce) {
.ckl-card__title {
transition: none;
}
}
.ckl-card__excerpt {
font-size: 1.05rem; line-height: 127.3%;
letter-spacing: 0.02em;
color: var(--ckl-dark);
margin: 1.1875rem 0 0;
max-width: 32.2rem; }
.ckl-card__author {
display: flex;
flex-direction: column;
margin-top: 1.1875rem;
}
.ckl-card__author-name {
font-weight: 700;
font-size: 1.225rem; line-height: 147%;
letter-spacing: 0.02em;
color: var(--ckl-dark);
}
.ckl-card__author-role {
font-size: 0.875rem; line-height: 147%;
color: var(--ckl-dark);
} .ckl-card-grid {
display: grid;
gap: 2.275rem 2.5375rem; }
.ckl-card-grid--2col {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ckl-card-grid--3col {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 2.275rem 1.65rem; }
@media (max-width: 991px) {
.ckl-card-grid--2col,
.ckl-card-grid--3col {
grid-template-columns: minmax(0, 1fr);
}
}
@media (min-width: 481px) and (max-width: 991px) {
.ckl-card-grid--3col {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
} .ckl-filter-bar {
display: flex;
flex-wrap: wrap;
gap: 0.5rem 2.14rem; margin-top: 3.325rem; }
.ckl-filter-bar__item {
font-family: var(--ckl-font-tag);
font-weight: var(--ckl-fw-tag);
text-transform: uppercase;
font-size: clamp(0.875rem, 1.33vw, 1.225rem); line-height: 1.29;
color: var(--ckl-dark);
transition: color 0.2s ease-in-out;
}
.ckl-filter-bar__item:hover,
.ckl-filter-bar__item:focus-visible {
color: var(--ckl-blue);
}
.ckl-filter-bar__item.is-active {
color: var(--ckl-blue);
}  .ckl-curated {
padding-block: clamp(4rem, 8.04vw, 7.4375rem); } .ckl-curated--gray {
background-color: var(--ckl-gray);
}
.ckl-curated__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
margin-bottom: 2.275rem; } .ckl-curated__head .ckl-see-more {
font-size: 0.9375rem; }
.ckl-curated__title {
font-family: var(--ckl-font-title);
font-weight: var(--ckl-fw-title);
font-size: clamp(2rem, 3.784vw, 3.5rem); line-height: 85%;
color: var(--ckl-blue);
margin: 0;
}
.ckl-curated__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 2.275rem 1.65rem;
}
@media (max-width: 991px) {
.ckl-curated__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 480px) {
.ckl-curated__grid {
grid-template-columns: minmax(0, 1fr);
}
}