.trs-testi {
background: var(--trs-beige);
padding: var(--trs-space-xl) var(--trs-spacing-h);
position: relative;
} .trs-testi__nav {
position: absolute;
top: var(--trs-space-xl);
right: var(--trs-spacing-h);
display: flex;
gap: var(--trs-space-sm);
z-index: 2;
}
.trs-testi__arrow {
background: none;
border: none;
cursor: pointer;
padding: 4px;
color: var(--trs-red);
display: flex;
align-items: center;
justify-content: center;
transition: opacity var(--trs-dur-fast) ease;
}
.trs-testi__arrow:hover,
.trs-testi__arrow:active,
.trs-testi__arrow:focus {
color: var(--trs-terracotta);
background: none ;
box-shadow: none;
}
.trs-testi__arrow:disabled { opacity: .25; cursor: default; }
.trs-testi__arrow svg      { width: 30px; height: 30px; }  .trs-testi__slider {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
}
.trs-testi__slide {
grid-area: 1 / 1; opacity: 0;
visibility: hidden;
transition:
opacity    500ms var(--trs-ease),
visibility 500ms var(--trs-ease);
pointer-events: none;
}
.trs-testi__slide.is-active {
opacity: 1;
visibility: visible;
pointer-events: auto;
} .trs-testi__content {
max-width: 66.666%; }
.trs-testi__text {
font-family: var(--trs-font-body);
font-size: var(--trs-fs-p-lg);
font-weight: 400;
line-height: var(--trs-lh-loose);
color: var(--trs-black);
margin: 0 0 var(--trs-space-sm);
font-style: normal; border-left: 3px solid var(--trs-black);
padding-left: var(--trs-space-md);
}
.trs-testi__author {
display: block;
font-family: var(--trs-font-nav);
font-size: var(--trs-fs-p-sm);
font-weight: 500;
color: var(--trs-black);
text-transform: uppercase;
letter-spacing: var(--trs-ls-wider);
font-style: normal;
padding-left: var(--trs-space-md); } @media (max-width: 767px) {
.trs-testi__content {
max-width: 100%;
}
.trs-testi__nav {
position: static;
justify-content: flex-end;
margin-bottom: var(--trs-space-lg);
}
}