.rc-blog-strip{ position:relative; width:100%; }
.rc-blog-strip *{ box-sizing:border-box; }
.rc-blog-strip__header{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:24px;
margin-bottom:26px;
}
.rc-blog-strip__title{
margin:0;
line-height:1;
text-transform:uppercase;
}
.rc-blog-strip__explore{
position: relative;
display:inline-flex;
align-items:center;
gap:18px;
text-decoration:none;
color:inherit;
font-weight:700;
white-space:nowrap;
padding: 0;
}
.rc-blog-strip__arrow{
font-size:24px;
line-height:1;
display:inline-block;
transition: transform .18s ease;
}
.rc-blog-strip__explore-text{
position: relative;
display:inline-block;
padding: 12px 22px;
border-radius: 0;
transition: background .18s ease, color .18s ease;
}
.rc-blog-strip__explore:hover .rc-blog-strip__explore-text{
background:#000;
color:#fff;
}
.rc-blog-strip__explore:hover .rc-blog-strip__arrow{
transform: translateX(16px);
}
.rc-blog-strip__items{
display:flex;
gap:var(--rc-gap, 60px);
align-items:flex-start;
overflow-x:auto;
padding-bottom:8px;
scroll-snap-type:x mandatory;
-webkit-overflow-scrolling: touch;
}
.rc-blog-strip__items::-webkit-scrollbar{ height:6px; }
.rc-blog-strip__items::-webkit-scrollbar-thumb{ background: rgba(0,0,0,.2); border-radius:8px; }
.rc-blog-strip__items::-webkit-scrollbar-track{ background: rgba(0,0,0,.06); border-radius:8px; }
.rc-blog-strip__item{
flex:0 0 auto;
display:flex;
align-items:center;
gap:var(--rc-item-gap, 18px);
min-width: clamp(520px, 40vw, 720px);
scroll-snap-align:start;
}
.rc-blog-strip__thumb{
width: var(--rc-img-w, 220px);
height: var(--rc-img-h, 120px);
flex:0 0 auto;
position:relative;
overflow:hidden;
background:#e6e6e6;
}
.rc-blog-strip__thumb img{
width:100%;
height:100%;
object-fit:cover;
display:block;
}
.rc-blog-strip__content{ min-width: 0; }
.rc-blog-strip__post-title{
margin:0 0 10px 0;
line-height:1.05;
text-transform:uppercase;
}
.rc-blog-strip__post-title a{
text-decoration:none;
color:inherit;
}
.rc-blog-strip__meta{
display:flex;
gap:10px;
align-items:baseline;
font-size:14px;
opacity:.8;
}
.rc-blog-strip__date{ white-space:nowrap; }
.rc-blog-strip__sep{ opacity:.6; }
.rc-blog-strip__cats a{
color:#2aa4ff;
text-decoration:underline;
}
@media (max-width: 1024px){
.rc-blog-strip__item{ min-width: min(92vw, 680px); }
}
@media (max-width: 640px){
.rc-blog-strip__header{ align-items:center; }
.rc-blog-strip__title{ font-size: 44px !important; }
.rc-blog-strip__thumb{ width: 160px; height: 96px; }
.rc-blog-strip__item{ gap:14px; }
} .rc-blog-strip__items{
display:flex;
gap:var(--rc-gap, 60px);
align-items:flex-start;
overflow: visible;
padding-bottom: 0;
scroll-snap-type: none;
}
.rc-blog-strip__item{
flex: 1 1 0;
min-width: 0;
display:flex;
align-items:center;
gap:var(--rc-item-gap, 18px);
}
.rc-blog-strip__post-title{
margin:0 0 10px 0;
line-height:1.1;
text-transform:uppercase;
font-size: 22px;
font-weight: 900;
}
.rc-blog-strip__meta{
font-size:13px;
}
.rc-blog-strip__arrow{
font-size:24px;
line-height:1;
display:inline-block;
transition: transform .18s ease, opacity .18s ease;
}
.rc-blog-strip__arrow--right{
opacity: 0;
transform: translateX(-8px);
}
.rc-blog-strip__explore:hover .rc-blog-strip__arrow--left{
opacity: 0;
transform: translateX(8px);
}
.rc-blog-strip__explore:hover .rc-blog-strip__arrow--right{
opacity: 1;
transform: translateX(0);
} @media (max-width: 1024px){
.rc-blog-strip__items{ flex-wrap: wrap; }
.rc-blog-strip__item{ flex: 1 1 calc(50% - var(--rc-gap, 40px)); }
} @media (max-width: 640px){
.rc-blog-strip__items{
flex-wrap: nowrap;
overflow-x:auto;
padding-bottom:8px;
scroll-snap-type:x mandatory;
}
.rc-blog-strip__item{
flex: 0 0 92vw;
scroll-snap-align:start;
}
}