.s4-breadcrumbs {
padding: 20px 30px 20px clamp(30px, 2.5vw, 50px);
font-weight: 350;
}
.s4-breadcrumbs.breadcrumbs-bg-red {
color: #fff;
background: #c14b54; }
.s4-breadcrumbs.breadcrumbs-bg-black {
color: #fff;
background: #2A2A2B;
backdrop-filter: blur(30px);
-webkit-backdrop-filter: blur(30px);
}
.s4-breadcrumbs.breadcrumbs-bg-white {
color: #000;
background: #ffffff;
backdrop-filter: blur(30px);
-webkit-backdrop-filter: blur(30px);
}
.s4-breadcrumbs #breadcrumbs a,
.s4-breadcrumbs #breadcrumbs .breadcrumb_last {
font-size: max(1rem, 13px);
opacity: 0.4;
margin: 0 5px;
}
.s4-breadcrumbs #breadcrumbs a {
text-decoration: none;
position: relative;
display: inline-block;
color: inherit;
}
.s4-breadcrumbs #breadcrumbs a::after {
content: '';
position: absolute;
top: calc(100% + 1px);
left: 0;
width: 0;
height: 1.5px;
background: currentColor;
transition: width 0.3s ease;
}
.s4-breadcrumbs #breadcrumbs a:hover::after {
width: 100%;
}
.s4-breadcrumbs #breadcrumbs .breadcrumb_last {
opacity: 1;
}
@media screen and (max-width: 575px) {
.s4-breadcrumbs {
padding: 10px 20px;
}
}