.msa-uknc {
--msa-uknc-accent: #549648;
--msa-uknc-gap: 24px;
--msa-uknc-slides: 3;
--msa-uknc-speed: 450ms;
position: relative;
width: 100%;
}
.msa-uknc *,
.msa-uknc *::before,
.msa-uknc *::after {
box-sizing: border-box;
}
.msa-uknc__viewport {
overflow: hidden;
width: 100%;
}
.msa-uknc__track {
display: flex;
align-items: stretch;
gap: var(--msa-uknc-gap);
transition: transform var(--msa-uknc-speed) cubic-bezier(.22, .61, .36, 1);
will-change: transform;
}
.msa-uknc__track.is-dragging {
transition: none;
}
.msa-uknc__slide {
display: flex;
flex: 0 0 calc((100% - (var(--msa-uknc-gap) * (var(--msa-uknc-slides) - 1))) / var(--msa-uknc-slides));
min-width: 0;
}
.msa-uknc__card {
display: flex;
flex: 1;
flex-direction: column;
overflow: hidden;
min-width: 0;
}
.msa-uknc__image {
display: block;
overflow: hidden;
width: 100%;
background: #eef1f4;
}
.msa-uknc__image img {
display: block;
width: 100%;
height: 230px;
object-fit: cover;
transition: transform 350ms ease;
}
.msa-uknc--zoom .msa-uknc__card:hover .msa-uknc__image img {
transform: scale(1.035);
}
.msa-uknc__content {
display: flex;
flex: 1;
flex-direction: column;
align-items: flex-start;
padding: 22px 22px 24px;
}
.msa-uknc__meta {
display: flex;
flex-wrap: wrap;
gap: 7px;
margin: 0 0 10px;
font-size: 12px;
font-weight: 600;
line-height: 1.4;
text-transform: uppercase;
}
.msa-uknc__meta > * + *::before {
margin-inline-end: 7px;
content: "•";
}
.msa-uknc__terms {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin: 0 0 10px;
}
.msa-uknc__term {
display: inline-flex;
padding: 5px 9px;
border-radius: 999px;
font-size: 11px;
font-weight: 700;
line-height: 1.2;
}
.msa-uknc__title {
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
margin: 0 0 12px;
font-size: 20px;
line-height: 1.35;
}
.msa-uknc__title a {
text-decoration: none;
}
.msa-uknc__excerpt {
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
margin: 0 0 18px;
line-height: 1.65;
}
.msa-uknc__button {
display: inline-flex;
align-items: center;
justify-content: center;
margin-top: auto;
padding: 10px 18px;
border-radius: 3px;
font-size: 14px;
font-weight: 600;
line-height: 1.2;
text-decoration: none;
transition: background-color 200ms ease, color 200ms ease, transform 200ms ease;
}
.msa-uknc__button:hover,
.msa-uknc__button:focus {
color: #fff;
transform: translateY(-1px);
}
.msa-uknc__arrow {
position: absolute;
top: 50%;
z-index: 3;
display: inline-flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
padding: 0;
border: 1px solid rgba(15, 45, 78, .12);
border-radius: 50%;
background: #fff;
box-shadow: 0 5px 18px rgba(15, 45, 78, .14);
color: var(--msa-uknc-accent);
cursor: pointer;
transform: translateY(-50%);
transition: opacity 200ms ease, transform 200ms ease;
}
.msa-uknc__arrow:hover,
.msa-uknc__arrow:focus {
transform: translateY(-50%) scale(1.06);
}
.msa-uknc__arrow:disabled {
opacity: .35;
cursor: default;
}
.msa-uknc__arrow svg {
width: 22px;
height: 22px;
fill: none;
stroke: currentColor;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 2;
}
.msa-uknc__arrow--prev {
left: -21px;
}
.msa-uknc__arrow--next {
right: -21px;
}
.msa-uknc__dots {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 12px;
margin-top: 24px;
}
.msa-uknc__dot {
width: 8px;
height: 8px;
padding: 0;
border: 0;
border-radius: 50%;
background: #cbd2d9;
cursor: pointer;
transition: width 200ms ease, border-radius 200ms ease, background-color 200ms ease;
}
.msa-uknc__dot.is-active {
width: 24px;
border-radius: 999px;
background: var(--msa-uknc-accent);
}
.msa-uknc__empty {
padding: 24px;
border: 1px dashed #c6ccd2;
color: #56616c;
text-align: center;
}
@media (max-width: 767px) {
.msa-uknc__arrow--prev {
left: 8px;
}
.msa-uknc__arrow--next {
right: 8px;
}
}
@media (prefers-reduced-motion: reduce) {
.msa-uknc__track,
.msa-uknc__image img,
.msa-uknc__button,
.msa-uknc__arrow,
.msa-uknc__dot {
transition: none;
}
}