assets/css/snippets/carousel-item.css

69 lines
1.4 KiB
CSS

.carousel-item {
scroll-snap-align: center;
}
@media (min-width: 400px) {
.carousel-item {
padding: 2rem;
margin-right: var(--space-5);
}
}
.carousel-item--candidate,
.carousel-item--livestream,
.carousel-item--blog-post,
.carousel-item--press-release,
.carousel-item--press-external {
padding: 0;
}
.carousel-item-preview {
padding: 1.5rem;
height: 100%;
}
.carousel-item-preview p:last-child {
margin-bottom: 0;
}
.carousel-item-label {
margin-bottom: var(--space-2);
font-family: var(--text);
font-weight: var(--text-semi-bold);
color: var(--green);
font-size: 0.8rem;
}
.carousel-item-title {
font-family: var(--headline);
font-weight: var(--headline-extrabold);
margin-bottom: var(--space-2);
}
.carousel-item-date {
margin-top: auto;
font-family: var(--text);
font-weight: var(--text-semi-bold);
color: var(--grey);
font-size: 1rem;
}
[data-whatintent="keyboard"] .carousel-item:focus.carousel-item:focus {
border-color: var(--black);
background-color: var(--black);
color: var(--white);
outline: 0;
}
.carousel-item:first-child {
margin-left: var(--grid-gutter);
}
@media (min-width: 1200px) {
.carousel-item:first-child {
margin-left: calc((100vw - 1120px) / 2);
}
}
.carousel-item-text {
font-size: 0.875rem;
margin-bottom: var(--space-2);
}
@media (min-width: 400px) {
.carousel-item-text {
font-size: 1rem;
}
}
.carousel-item-link {
margin-top: auto;
}