.mc-project-catalog {
width: 100%;
padding: 36px 0 76px;
}
.mc-project-catalog__hero {
max-width: 760px;
margin-bottom: 42px;
}
.mc-project-catalog__hero h1 {
margin: 0;
color: #102f4d;
font-size: clamp(40px, 5vw, 60px);
line-height: 1.02;
letter-spacing: -.045em;
}
.mc-project-catalog__lead {
max-width: 680px;
margin: 20px 0 0;
color: #5c7183;
font-size: 18px;
line-height: 1.58;
}
.mc-project-catalog__directions {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 20px;
margin-bottom: 36px;
}
.mc-project-catalog__direction {
position: relative;
display: grid;
grid-template-columns: 54px minmax(0, 1fr) auto;
min-height: 150px;
align-items: center;
gap: 20px;
padding: 28px;
overflow: hidden;
border: 1px solid #d7e2e9;
border-radius: 22px;
background: #fff;
color: #17364e;
text-decoration: none;
box-shadow: 0 8px 28px rgba(28, 61, 81, .035);
transition:
transform .18s ease,
border-color .18s ease,
box-shadow .18s ease;
}
.mc-project-catalog__direction::after {
position: absolute;
right: -54px;
bottom: -82px;
width: 180px;
height: 180px;
border-radius: 50%;
background: #f2f7fa;
content: '';
pointer-events: none;
}
.mc-project-catalog__direction:hover {
transform: translateY(-3px);
border-color: #b7cbd7;
box-shadow: 0 16px 38px rgba(28, 61, 81, .09);
}
.mc-project-catalog__direction.is-active {
border-color: #23689a;
box-shadow: 0 14px 34px rgba(35, 104, 154, .12);
}
.mc-project-catalog__direction.is-empty {
opacity: .72;
}
.mc-project-catalog__direction-icon {
display: grid;
width: 54px;
height: 54px;
place-items: center;
border-radius: 16px;
background: #edf5fa;
color: #16659b;
font-size: 18px;
font-weight: 800;
}
.mc-project-catalog__direction-content {
position: relative;
z-index: 1;
display: block;
}
.mc-project-catalog__direction-title {
display: block;
color: #12334d;
font-size: 22px;
line-height: 1.2;
letter-spacing: -.025em;
}
.mc-project-catalog__direction-description {
display: block;
max-width: 420px;
margin-top: 9px;
color: #708391;
font-size: 14px;
line-height: 1.45;
}
.mc-project-catalog__direction-count {
position: relative;
z-index: 1;
display: grid;
min-width: 44px;
height: 44px;
place-items: center;
border-radius: 999px;
background: #123b5a;
color: #fff;
font-size: 14px;
font-weight: 800;
}
.mc-project-catalog__direction.is-empty
.mc-project-catalog__direction-count {
background: #eaf0f3;
color: #728490;
}
.mc-project-catalog__toolbar {
display: flex;
min-height: 58px;
align-items: center;
justify-content: space-between;
gap: 24px;
margin: 8px 0 28px;
padding-bottom: 18px;
border-bottom: 1px solid #e2e9ed;
}
.mc-project-catalog__back {
color: #31556b;
font-size: 14px;
font-weight: 750;
text-decoration: none;
}
.mc-project-catalog__years {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 8px;
}
.mc-project-catalog__years a {
display: inline-flex;
min-height: 38px;
align-items: center;
padding: 8px 15px;
border: 1px solid #d7e1e6;
border-radius: 999px;
color: #38596c;
font-size: 14px;
font-weight: 700;
text-decoration: none;
}
.mc-project-catalog__years a.is-active {
border-color: #163f5e;
background: #163f5e;
color: #fff;
}
.mc-project-catalog__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
}
.mc-project-catalog__card {
min-width: 0;
overflow: hidden;
border: 1px solid #dbe4e9;
border-radius: 20px;
background: #fff;
box-shadow: 0 8px 26px rgba(23, 54, 78, .035);
transition:
transform .18s ease,
box-shadow .18s ease;
}
.mc-project-catalog__card:hover {
transform: translateY(-3px);
box-shadow: 0 16px 38px rgba(23, 54, 78, .08);
}
.mc-project-catalog__card-link {
display: flex;
min-height: 330px;
height: 100%;
flex-direction: column;
padding: 24px;
color: inherit;
text-decoration: none;
}
.mc-project-catalog__card-top {
display: flex;
min-height: 78px;
align-items: flex-start;
justify-content: space-between;
gap: 18px;
}
.mc-project-catalog__logo {
display: flex;
width: 138px;
height: 72px;
align-items: center;
}
.mc-project-catalog__logo img {
display: block;
max-width: 100%;
max-height: 72px;
width: auto;
height: auto;
object-fit: contain;
}
.mc-project-catalog__logo--empty {
width: 72px;
justify-content: center;
border-radius: 16px;
background: #eef4f7;
color: #17364e;
font-size: 28px;
font-weight: 800;
}
.mc-project-catalog__badges {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 6px;
}
.mc-project-catalog__year,
.mc-project-catalog__ozp {
display: inline-flex;
min-height: 28px;
align-items: center;
padding: 5px 9px;
border-radius: 999px;
font-size: 12px;
font-weight: 800;
}
.mc-project-catalog__year {
background: #f0f4f6;
color: #566e7d;
}
.mc-project-catalog__ozp {
background: #123f60;
color: #fff;
}
.mc-project-catalog__card-body {
margin-top: 24px;
}
.mc-project-catalog__card h2 {
margin: 0;
color: #14364f;
font-size: 22px;
line-height: 1.18;
letter-spacing: -.025em;
}
.mc-project-catalog__card p {
margin: 13px 0 0;
color: #5a7181;
font-size: 15px;
line-height: 1.52;
}
.mc-project-catalog__more {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: auto;
padding-top: 28px;
color: #1e5779;
font-size: 14px;
font-weight: 800;
}
.mc-project-catalog__hint,
.mc-project-catalog__empty {
display: flex;
gap: 18px;
align-items: center;
padding: 24px 26px;
border: 1px solid #e2e9ed;
border-radius: 18px;
background: #f7f9fa;
color: #5b7180;
}
.mc-project-catalog__hint span {
display: grid;
width: 42px;
height: 42px;
flex: 0 0 auto;
place-items: center;
border-radius: 12px;
background: #e9f1f5;
color: #1d5b81;
font-size: 13px;
font-weight: 850;
}
.mc-project-catalog__hint p {
margin: 0;
}
.mc-project-catalog__empty {
align-items: flex-start;
flex-direction: column;
gap: 5px;
}
.mc-project-catalog__empty strong {
color: #294b60;
}
@media (max-width: 980px) {
.mc-project-catalog__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 760px) {
.mc-project-catalog {
padding-top: 22px;
}
.mc-project-catalog__directions,
.mc-project-catalog__grid {
grid-template-columns: 1fr;
}
.mc-project-catalog__direction {
min-height: 126px;
padding: 22px;
}
.mc-project-catalog__toolbar {
align-items: flex-start;
flex-direction: column;
}
.mc-project-catalog__years {
justify-content: flex-start;
}
}
@media (max-width: 520px) {
.mc-project-catalog__direction {
grid-template-columns: 46px minmax(0, 1fr) auto;
gap: 14px;
}
.mc-project-catalog__direction-icon {
width: 46px;
height: 46px;
}
.mc-project-catalog__direction-title {
font-size: 19px;
}
.mc-project-catalog__direction-description {
display: none;
}
.mc-project-catalog__card-link {
min-height: 285px;
}
}
.mc-project-catalog__logo--fallback {
box-sizing: border-box;
width: 92px;
height: 64px;
justify-content: center;
padding: 12px 14px;
border: 1px solid #e1e9ed;
border-radius: 16px;
background: #f5f8fa;
}
.mc-project-catalog__logo--fallback img {
display: block;
width: 100%;
max-width: 64px;
height: auto;
max-height: 38px;
object-fit: contain;
opacity: .72;
}
.mc-project-catalog {
--mc-project-navy: #082b46;
--mc-project-navy-deep: #06243b;
--mc-project-blue: #0c8bd3;
--mc-project-blue-bright: #14a4ef;
--mc-project-blue-soft: #eaf6fc;
--mc-project-text: #153149;
--mc-project-muted: #667d90;
--mc-project-border: #dbe6ed;
--mc-project-surface: #ffffff;
--mc-project-surface-soft: #f5f9fc;
width: min(1360px, calc(100% - 48px));
margin: 0 auto;
padding-bottom: 72px;
}
.mc-project-landing__hero {
position: relative;
overflow: hidden;
display: grid;
grid-template-columns:
minmax(0, 1.45fr)
minmax(260px, .55fr);
gap: 48px;
align-items: center;
min-height: 430px;
margin: 22px 0 26px;
padding: 58px 64px;
border-radius: 24px;
background:
radial-gradient(
circle at 90% 20%,
rgba(23, 161, 235, .22),
transparent 31%
),
radial-gradient(
circle at 68% 105%,
rgba(24, 132, 204, .18),
transparent 38%
),
linear-gradient(
135deg,
#06243b 0%,
#083450 58%,
#07537a 100%
);
box-shadow:
0 22px 60px
rgba(5, 42, 68, .13);
}
.mc-project-landing__hero::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
opacity: .24;
background:
linear-gradient(
120deg,
transparent 0 58%,
rgba(255,255,255,.08) 58.2% 58.5%,
transparent 58.7%
),
linear-gradient(
145deg,
transparent 0 72%,
rgba(255,255,255,.06) 72.2% 72.45%,
transparent 72.7%
);
}
.mc-project-landing__hero-copy,
.mc-project-landing__hero-mark {
position: relative;
z-index: 1;
}
.mc-project-landing__eyebrow {
display: inline-flex;
margin-bottom: 18px;
padding: 7px 11px;
color: #8ed7ff;
border:
1px solid rgba(132, 211, 255, .24);
border-radius: 999px;
background:
rgba(255,255,255,.055);
font-size: 12px;
font-weight: 760;
letter-spacing: .06em;
line-height: 1.2;
text-transform: uppercase;
}
.mc-project-landing__hero h1 {
max-width: 900px;
margin: 0;
color: #fff;
font-size:
clamp(38px, 4.2vw, 68px);
font-weight: 760;
letter-spacing: -.04em;
line-height: 1.02;
}
.mc-project-landing__hero h1 span {
display: block;
color: #8ed7ff;
}
.mc-project-landing__hero
.mc-project-catalog__lead {
max-width: 790px;
margin: 24px 0 0;
color: rgba(238, 248, 255, .82);
font-size: 17px;
line-height: 1.65;
}
.mc-project-landing__hero-action {
display: inline-flex;
align-items: center;
gap: 10px;
margin-top: 30px;
padding: 12px 18px;
color: #fff;
border:
1px solid rgba(255,255,255,.16);
border-radius: 10px;
background:
rgba(255,255,255,.08);
font-size: 14px;
font-weight: 720;
text-decoration: none;
transition:
transform .16s ease,
background .16s ease,
border-color .16s ease;
}
.mc-project-landing__hero-action:hover {
color: #fff;
border-color:
rgba(255,255,255,.28);
background:
rgba(255,255,255,.13);
transform:
translateY(-1px);
}
.mc-project-landing__hero-mark {
display: flex;
align-items: center;
justify-content: center;
min-height: 260px;
}
.mc-project-landing__hero-mark-ring {
position: absolute;
width: 250px;
height: 250px;
border:
1px solid rgba(138, 216, 255, .19);
border-radius: 50%;
box-shadow:
0 0 0 38px
rgba(108, 202, 255, .035),
0 0 0 78px
rgba(108, 202, 255, .025);
}
.mc-project-landing__hero-mark-core {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 152px;
height: 152px;
color: #fff;
border:
1px solid rgba(255,255,255,.16);
border-radius: 50%;
background:
radial-gradient(
circle at 35% 30%,
rgba(31,177,246,.42),
rgba(8,61,92,.82)
);
box-shadow:
inset 0 0 42px
rgba(120,215,255,.09),
0 18px 50px
rgba(2,27,46,.25);
font-size: 26px;
font-weight: 780;
letter-spacing: .04em;
}
.mc-project-landing__metrics {
display: grid;
grid-template-columns:
repeat(3, minmax(0, 1fr));
overflow: hidden;
margin: 0 0 62px;
border:
1px solid var(--mc-project-border);
border-radius: 18px;
background: #fff;
box-shadow:
0 10px 32px
rgba(8, 43, 70, .055);
}
.mc-project-landing__metric {
min-width: 0;
padding: 24px 28px;
border-right:
1px solid var(--mc-project-border);
}
.mc-project-landing__metric:last-child {
border-right: 0;
}
.mc-project-landing__metric strong {
display: block;
margin-bottom: 5px;
color: var(--mc-project-navy);
font-size: 30px;
font-weight: 780;
line-height: 1;
}
.mc-project-landing__metric span {
color: var(--mc-project-muted);
font-size: 13px;
line-height: 1.35;
}
.mc-project-landing__metric--accent strong {
color: var(--mc-project-blue);
}
.mc-project-landing__section-heading {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 32px;
margin-bottom: 22px;
}
.mc-project-landing__section-kicker {
display: block;
margin-bottom: 6px;
color: var(--mc-project-blue);
font-size: 12px;
font-weight: 760;
letter-spacing: .055em;
text-transform: uppercase;
}
.mc-project-landing__section-heading h2 {
margin: 0;
color: var(--mc-project-navy);
font-size:
clamp(26px, 2.5vw, 38px);
font-weight: 760;
letter-spacing: -.025em;
line-height: 1.1;
}
.mc-project-landing__section-heading > p {
max-width: 470px;
margin: 0;
color: var(--mc-project-muted);
font-size: 14px;
line-height: 1.55;
}
.mc-project-landing__section-heading > a {
flex: 0 0 auto;
color: var(--mc-project-blue);
font-size: 14px;
font-weight: 720;
text-decoration: none;
}
.mc-project-landing__featured {
margin-bottom: 66px;
}
.mc-project-landing__featured-grid {
display: grid;
grid-template-columns:
1.35fr 1fr 1fr;
gap: 18px;
}
.mc-project-landing__featured-card {
overflow: hidden;
display: flex;
flex-direction: column;
min-height: 390px;
color: var(--mc-project-text);
border:
1px solid var(--mc-project-border);
border-radius: 18px;
background: #fff;
box-shadow:
0 9px 28px
rgba(8,43,70,.05);
text-decoration: none;
transition:
transform .18s ease,
border-color .18s ease,
box-shadow .18s ease;
}
.mc-project-landing__featured-card:hover {
color: var(--mc-project-text);
border-color: #bcd9e9;
box-shadow:
0 18px 42px
rgba(8,43,70,.09);
transform:
translateY(-3px);
}
.mc-project-landing__featured-card--primary {
background:
linear-gradient(
145deg,
#fff 0%,
#f6fbfe 100%
);
}
.mc-project-landing__featured-visual {
display: flex;
align-items: center;
justify-content: center;
min-height: 180px;
padding: 22px;
border-bottom:
1px solid var(--mc-project-border);
background:
linear-gradient(
145deg,
#f5f9fc,
#edf6fb
);
}
.mc-project-landing__featured-card--primary
.mc-project-landing__featured-visual {
min-height: 220px;
}
.mc-project-landing__featured-logo,
.mc-project-landing__featured-image {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
.mc-project-landing__featured-logo img,
.mc-project-landing__featured-image img {
display: block;
width: 100%;
max-width: 100%;
max-height: 190px;
object-fit: contain;
}
.mc-project-landing__featured-fallback {
display: flex;
align-items: center;
justify-content: center;
width: 88px;
height: 88px;
color: #fff;
border-radius: 22px;
background:
linear-gradient(
145deg,
var(--mc-project-blue),
#066699
);
font-size: 38px;
font-weight: 800;
}
.mc-project-landing__featured-content {
display: flex;
flex: 1;
flex-direction: column;
padding: 22px 24px 24px;
}
.mc-project-landing__featured-type {
margin-bottom: 10px;
color: var(--mc-project-blue);
font-size: 11px;
font-weight: 760;
letter-spacing: .035em;
text-transform: uppercase;
}
.mc-project-landing__featured-content h3 {
margin: 0;
color: var(--mc-project-navy);
font-size: 20px;
font-weight: 760;
line-height: 1.22;
}
.mc-project-landing__featured-content p {
display: -webkit-box;
overflow: hidden;
margin: 11px 0 18px;
color: var(--mc-project-muted);
font-size: 14px;
line-height: 1.5;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
.mc-project-landing__featured-more {
margin-top: auto;
color: var(--mc-project-blue);
font-size: 13px;
font-weight: 720;
}
.mc-project-landing__explore {
margin: 0 0 18px;
}
.mc-project-catalog__directions {
margin-bottom: 48px;
}
.mc-project-catalog__direction {
border-radius: 14px;
transition:
transform .16s ease,
border-color .16s ease,
box-shadow .16s ease;
}
.mc-project-catalog__direction:not(.is-empty):hover {
transform:
translateY(-2px);
box-shadow:
0 10px 28px
rgba(8,43,70,.07);
}
.mc-project-catalog__catalog-anchor {
position: relative;
top: -22px;
height: 1px;
scroll-margin-top: 100px;
}
.mc-project-catalog__card {
overflow: hidden;
border-radius: 16px;
box-shadow:
0 7px 24px
rgba(8,43,70,.045);
}
.mc-project-catalog__card:hover {
box-shadow:
0 15px 38px
rgba(8,43,70,.085);
transform:
translateY(-2px);
}
@media (max-width: 1050px) {
.mc-project-landing__hero {
grid-template-columns: 1fr;
min-height: 0;
}
.mc-project-landing__hero-mark {
display: none;
}
.mc-project-landing__featured-grid {
grid-template-columns: 1fr 1fr;
}
.mc-project-landing__featured-card--primary {
grid-column: 1 / -1;
}
}
@media (max-width: 760px) {
.mc-project-catalog {
width: min(
100% - 28px,
1360px
);
}
.mc-project-landing__hero {
margin-top: 12px;
padding: 36px 26px;
border-radius: 18px;
}
.mc-project-landing__hero h1 {
font-size: 38px;
}
.mc-project-landing__hero
.mc-project-catalog__lead {
font-size: 15px;
}
.mc-project-landing__metrics {
grid-template-columns: 1fr;
margin-bottom: 46px;
}
.mc-project-landing__metric {
border-right: 0;
border-bottom:
1px solid var(--mc-project-border);
}
.mc-project-landing__metric:last-child {
border-bottom: 0;
}
.mc-project-landing__section-heading {
display: block;
}
.mc-project-landing__section-heading
> :is(a, p) {
display: block;
margin-top: 13px;
}
.mc-project-landing__featured-grid {
grid-template-columns: 1fr;
}
.mc-project-landing__featured-card--primary {
grid-column: auto;
}
.mc-project-landing__featured-card {
min-height: 0;
}
}
.mc-project-catalog__status-filter {
display: inline-flex;
flex-wrap: wrap;
gap: 6px;
margin: 0 0 30px;
padding: 5px;
border: 1px solid #dbe6ed;
border-radius: 13px;
background: #f2f7fa;
}
.mc-project-catalog__status-option {
display: inline-flex;
align-items: center;
gap: 9px;
min-height: 40px;
padding: 7px 12px;
color: #49667a;
border: 1px solid transparent;
border-radius: 9px;
font-size: 13px;
font-weight: 700;
text-decoration: none;
transition:
color .15s ease,
border-color .15s ease,
background .15s ease,
box-shadow .15s ease;
}
.mc-project-catalog__status-option:hover {
color: #082b46;
background: rgba(255,255,255,.8);
}
.mc-project-catalog__status-option.is-active {
color: #082b46;
border-color: #d2e2eb;
background: #fff;
box-shadow:
0 4px 12px
rgba(8,43,70,.065);
}
.mc-project-catalog__status-option strong {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 26px;
height: 23px;
padding: 0 7px;
color: #617d90;
border-radius: 999px;
background: #e5eff5;
font-size: 11px;
font-weight: 780;
}
.mc-project-catalog__status-option.is-active strong {
color: #0879ba;
background: #e7f5fd;
}
.mc-project-catalog__state {
display: inline-flex;
align-items: center;
min-height: 24px;
padding: 4px 8px;
border-radius: 999px;
font-size: 10px;
font-weight: 760;
line-height: 1;
white-space: nowrap;
}
.mc-project-catalog__state--completed {
color: #25754f;
border: 1px solid #c8e7d8;
background: #edf9f3;
}
.mc-project-catalog__state--progress {
color: #91600f;
border: 1px solid #efdaaa;
background: #fff7e5;
}
@media (max-width: 640px) {
.mc-project-catalog__status-filter {
display: grid;
grid-template-columns: 1fr;
width: 100%;
}
.mc-project-catalog__status-option {
justify-content: space-between;
}
}
.mc-project-catalog__result-tools {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
margin: 0 0 24px;
padding: 14px 16px;
border: 1px solid #dbe6ed;
border-radius: 13px;
background: #fff;
}
.mc-project-catalog__result-count {
flex: 0 0 auto;
color: #6a8092;
font-size: 12px;
line-height: 1.3;
}
.mc-project-catalog__result-count strong {
margin-left: 3px;
color: #0a476d;
font-size: 13px;
font-weight: 780;
}
.mc-project-catalog__sort {
display: flex;
align-items: center;
gap: 12px;
min-width: 0;
}
.mc-project-catalog__sort-title {
color: #718697;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .045em;
}
.mc-project-catalog__sort-options {
display: inline-flex;
flex-wrap: wrap;
gap: 4px;
padding: 4px;
border-radius: 10px;
background: #f2f7fa;
}
.mc-project-catalog__sort-option {
display: inline-flex;
align-items: center;
min-height: 34px;
padding: 6px 10px;
color: #567185;
border: 1px solid transparent;
border-radius: 7px;
font-size: 11px;
font-weight: 700;
text-decoration: none;
transition:
color .15s ease,
border-color .15s ease,
background .15s ease,
box-shadow .15s ease;
}
.mc-project-catalog__sort-option:hover {
color: #082b46;
background: rgba(255,255,255,.75);
}
.mc-project-catalog__sort-option.is-active {
color: #0879ba;
border-color: #d4e4ed;
background: #fff;
box-shadow:
0 3px 10px
rgba(8,43,70,.055);
}
@media (max-width: 900px) {
.mc-project-catalog__result-tools {
display: block;
}
.mc-project-catalog__sort {
display: block;
margin-top: 12px;
}
.mc-project-catalog__sort-title {
display: block;
margin-bottom: 7px;
}
}
@media (max-width: 640px) {
.mc-project-catalog__sort-options {
display: grid;
grid-template-columns: 1fr 1fr;
width: 100%;
}
.mc-project-catalog__sort-option {
justify-content: center;
}
}
.mc-project-catalog__load-more {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
margin: 34px 0 4px;
}
.mc-project-catalog__load-more-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 9px;
min-height: 46px;
padding: 10px 17px;
color: #0a4c75;
border:
1px solid #cfe0ea;
border-radius:
11px;
background:
#ffffff;
box-shadow:
0 6px 16px
rgba(8, 43, 70, .055);
font-size:
13px;
font-weight:
720;
text-decoration:
none;
transition:
color .16s ease,
border-color .16s ease,
background .16s ease,
box-shadow .16s ease,
transform .16s ease;
}
.mc-project-catalog__load-more-button:hover {
color:
#0876b6;
border-color:
#aed2e5;
background:
#f7fbfd;
box-shadow:
0 9px 22px
rgba(8, 43, 70, .08);
transform:
translateY(-1px);
}
.mc-project-catalog__load-more-button strong {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 28px;
height: 24px;
padding:
0 7px;
color:
#0879ba;
border-radius:
999px;
background:
#e8f5fc;
font-size:
11px;
font-weight:
800;
}
.mc-project-catalog__load-more-progress {
color:
#788c9a;
font-size:
11px;
line-height:
1.3;
}
@media (max-width: 640px) {
.mc-project-catalog__load-more-button {
width: 100%;
box-sizing: border-box;
}
}
.mc-project-catalog__card.is-load-more-new {
opacity: 0;
transform: translateY(12px);
}
.mc-project-catalog__card.is-load-more-new.is-load-more-visible {
opacity: 1;
transform: translateY(0);
transition:
opacity .28s ease,
transform .28s ease;
}
.mc-project-catalog__load-more-button.is-loading {
pointer-events: none;
opacity: .72;
cursor: wait;
}
.mc-project-catalog__load-more-button.is-loading::after {
content: "";
width: 14px;
height: 14px;
box-sizing: border-box;
border:
2px solid rgba(8, 121, 186, .2);
border-top-color:
#0879ba;
border-radius:
50%;
animation:
marble-project-load-more-spin
.7s linear infinite;
}
@keyframes marble-project-load-more-spin {
to {
transform: rotate(360deg);
}
}
@media (prefers-reduced-motion: reduce) {
.mc-project-catalog__card.is-load-more-new,
.mc-project-catalog__card.is-load-more-new.is-load-more-visible {
opacity: 1;
transform: none;
transition: none;
}
.mc-project-catalog__load-more-button.is-loading::after {
animation: none;
}
}
.mc-project-catalog__direction-navigator {
margin: 0 0 42px;
}
.mc-project-catalog__direction-navigator
.mc-project-landing__section-heading {
margin-bottom: 18px;
}
.mc-project-catalog__directions {
display: grid;
grid-template-columns:
repeat(
auto-fit,
minmax(250px, 1fr)
);
gap: 14px;
margin: 0;
}
.mc-project-catalog__direction {
position: relative;
display: grid;
grid-template-columns:
46px minmax(0, 1fr) auto;
gap: 14px;
align-items: center;
min-height: 92px;
padding: 16px 17px;
color: #153149;
border:
1px solid #d9e5ec;
border-radius:
15px;
background:
linear-gradient(
145deg,
#ffffff 0%,
#f8fbfd 100%
);
box-shadow:
0 7px 22px
rgba(8,43,70,.045);
text-decoration: none;
transition:
transform .17s ease,
border-color .17s ease,
background .17s ease,
box-shadow .17s ease;
}
.mc-project-catalog__direction:hover {
color: #153149;
border-color: #b9d8e8;
background:
linear-gradient(
145deg,
#ffffff 0%,
#f1f9fd 100%
);
box-shadow:
0 14px 32px
rgba(8,43,70,.075);
transform:
translateY(-2px);
}
.mc-project-catalog__direction.is-active {
border-color: #81c5e8;
background:
linear-gradient(
145deg,
#f3fbff 0%,
#eaf7fd 100%
);
box-shadow:
0 14px 34px
rgba(8,121,186,.09);
}
.mc-project-catalog__direction.is-active::after {
content: "";
position: absolute;
inset: auto 14px 0 14px;
height: 3px;
border-radius:
999px 999px 0 0;
background:
linear-gradient(
90deg,
#087fc8,
#19a8ee
);
}
.mc-project-catalog__direction--all {
background:
linear-gradient(
145deg,
#f9fcfe 0%,
#eef8fd 100%
);
}
.mc-project-catalog__direction-icon {
display: flex;
align-items: center;
justify-content: center;
width: 46px;
height: 46px;
color: #0a6ea9;
border:
1px solid #d5e7f0;
border-radius:
12px;
background:
#edf8fd;
font-size: 13px;
font-weight: 800;
letter-spacing: .02em;
}
.mc-project-catalog__direction.is-active
.mc-project-catalog__direction-icon {
color: #fff;
border-color: transparent;
background:
linear-gradient(
145deg,
#0b8bd1,
#0871ad
);
box-shadow:
0 7px 16px
rgba(8,121,186,.16);
}
.mc-project-catalog__direction-copy {
display: block;
min-width: 0;
}
.mc-project-catalog__direction-copy strong {
display: block;
margin-bottom: 5px;
color: #0b2f49;
font-size: 14px;
font-weight: 760;
line-height: 1.25;
}
.mc-project-catalog__direction-copy small {
display: block;
color: #738898;
font-size: 11px;
line-height: 1.35;
}
.mc-project-catalog__direction-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 34px;
height: 29px;
padding: 0 8px;
color: #567486;
border-radius: 999px;
background: #e8f0f5;
font-size: 11px;
font-weight: 800;
}
.mc-project-catalog__direction.is-active
.mc-project-catalog__direction-count {
color: #0878b7;
background: #dff2fc;
}
.mc-project-catalog__direction.is-empty {
opacity: .52;
pointer-events: none;
}
@media (max-width: 760px) {
.mc-project-catalog__directions {
grid-template-columns: 1fr;
}
.mc-project-catalog__direction {
min-height: 82px;
}
}
.mc-supported-overview {
display: grid;
grid-template-columns: repeat(3, 1fr);
margin:
22px
0
52px;
border:
1px solid
rgba(8, 42, 67, .12);
border-radius: 18px;
overflow: hidden;
background: #fff;
}
.mc-supported-overview__item {
padding:
24px
28px;
}
.mc-supported-overview__item + .mc-supported-overview__item {
border-left:
1px solid
rgba(8, 42, 67, .10);
}
.mc-supported-overview__item strong {
display: block;
margin-bottom: 5px;
color: #082a43;
font-size: 30px;
line-height: 1;
}
.mc-supported-overview__item span {
color: #668095;
font-size: 13px;
}
.mc-supported-overview__item--active strong {
color: #087fc8;
}
.mc-supported-showcase {
position: relative;
margin:
0
0
66px;
}
.mc-supported-showcase__viewport {
position: relative;
min-height: 360px;
overflow: hidden;
}
.mc-supported-showcase__track {
position: relative;
min-height: 360px;
}
.mc-supported-showcase__card {
position: absolute;
inset: 0;
opacity: 0;
visibility: hidden;
transform:
translateX(24px)
scale(.985);
transition:
opacity .45s ease,
transform .45s ease,
visibility .45s ease;
pointer-events: none;
}
.mc-supported-showcase__card.is-active {
opacity: 1;
visibility: visible;
transform:
translateX(0)
scale(1);
pointer-events: auto;
}
.mc-supported-showcase__link {
display: grid;
grid-template-columns:
minmax(300px, .9fr)
minmax(0, 1.1fr);
min-height: 340px;
color: inherit;
text-decoration: none;
overflow: hidden;
border:
1px solid
rgba(8, 42, 67, .12);
border-radius: 20px;
background:
linear-gradient(
135deg,
#f8fcff 0%,
#ffffff 100%
);
}
.mc-supported-showcase__media {
display: flex;
align-items: center;
justify-content: center;
min-width: 0;
padding: 28px;
overflow: hidden;
background:
linear-gradient(
135deg,
#062b4a,
#087fc8
);
}
.mc-supported-showcase__media img {
display: block;
width: 100%;
height: 100%;
max-height: 285px;
object-fit: contain;
}
.mc-supported-showcase__body {
display: flex;
flex-direction: column;
justify-content: center;
min-width: 0;
padding:
42px
48px;
}
.mc-supported-showcase__status {
width: fit-content;
margin-bottom: 18px;
padding:
7px
11px;
border-radius: 999px;
color: #087fc8;
background: #eaf7ff;
font-size: 11px;
font-weight: 800;
letter-spacing: .06em;
text-transform: uppercase;
}
.mc-supported-showcase__company {
margin-bottom: 13px;
color: #506d82;
font-size: 13px;
font-weight: 800;
text-transform: uppercase;
}
.mc-supported-showcase__body h3 {
max-width: 740px;
margin:
0
0
15px;
color: #082a43;
font-size: clamp(25px, 3vw, 38px);
line-height: 1.06;
letter-spacing: -.035em;
text-wrap: balance;
}
.mc-supported-showcase__body p {
max-width: 720px;
margin: 0;
color: #526f84;
font-size: 15px;
line-height: 1.6;
}
.mc-supported-showcase__more {
margin-top: 28px;
color: #087fc8;
font-size: 13px;
font-weight: 800;
}
.mc-supported-showcase__dots {
display: flex;
justify-content: center;
gap: 7px;
margin-top: 18px;
}
.mc-supported-showcase__dot {
width: 7px;
height: 7px;
padding: 0;
border: 0;
border-radius: 999px;
background: #cfe0ea;
cursor: pointer;
transition:
width .2s ease,
background .2s ease;
}
.mc-supported-showcase__dot.is-active {
width: 24px;
background: #087fc8;
}
@media (max-width: 900px) {
.mc-supported-showcase__link {
grid-template-columns: 1fr;
}
.mc-supported-showcase__viewport,
.mc-supported-showcase__track {
min-height: 590px;
}
.mc-supported-showcase__media {
min-height: 260px;
}
}
@media (max-width: 700px) {
.mc-supported-overview {
grid-template-columns: 1fr;
}
.mc-supported-overview__item
+ .mc-supported-overview__item {
border-left: 0;
border-top:
1px solid
rgba(8, 42, 67, .10);
}
.mc-supported-showcase__body {
padding:
30px
24px;
}
.mc-supported-showcase__body h3 {
font-size: 25px;
}
}
.mc-project-catalog__hero,
.mc-project-landing__hero {
width: 100%;
max-width: none;
min-height: 0;
margin-left: 0;
margin-right: 0;
border-radius: 22px;
}
.mc-project-catalog__hero-inner,
.mc-project-landing__hero-inner {
min-height: 340px;
}
.mc-project-catalog__hero-copy,
.mc-project-landing__hero-copy {
padding-top: 42px;
padding-bottom: 42px;
}
.mc-project-catalog__hero h1,
.mc-project-landing__hero h1 {
max-width: 820px;
font-size: clamp(38px, 4.4vw, 62px);
line-height: .98;
text-wrap: balance;
}
.mc-supported-overview {
margin:
18px
0
50px;
}
.mc-supported-overview__item {
min-height: 94px;
display: flex;
flex-direction: column;
justify-content: center;
padding:
20px
26px;
}
.mc-supported-overview__item strong {
font-size: 30px;
}
.mc-supported-overview__item span {
font-size: 13px;
}
.mc-supported-showcase {
margin-top: 0;
}
@media (min-width: 1100px) {
.mc-project-catalog__hero,
.mc-project-landing__hero,
.mc-supported-overview,
.mc-supported-showcase,
.mc-project-catalog__direction-navigator,
.mc-project-catalog__catalog-heading,
.mc-project-catalog__grid {
width: 100%;
}
}
@media (max-width: 900px) {
.mc-project-catalog__hero-inner,
.mc-project-landing__hero-inner {
min-height: 300px;
}
.mc-project-catalog__hero h1,
.mc-project-landing__hero h1 {
font-size: clamp(34px, 6vw, 48px);
}
}
@media (max-width: 700px) {
.mc-project-catalog__hero,
.mc-project-landing__hero {
border-radius: 18px;
}
.mc-project-catalog__hero-inner,
.mc-project-landing__hero-inner {
min-height: 0;
}
.mc-project-catalog__hero-copy,
.mc-project-landing__hero-copy {
padding-top: 30px;
padding-bottom: 30px;
}
.mc-supported-overview {
margin-bottom: 36px;
}
}
.mc-project-catalog__hero,
.mc-project-landing__hero {
width: min(1080px, 100%);
max-width: 1080px;
margin-left: auto;
margin-right: auto;
}
.mc-supported-showcase__link {
grid-template-columns:
260px
minmax(0, 1fr);
min-height: 300px;
background: #fff;
}
.mc-supported-showcase__media {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 260px;
min-width: 260px;
min-height: 300px;
padding: 26px;
overflow: hidden;
background:
linear-gradient(
145deg,
#073451 0%,
#075d91 58%,
#087fc8 100%
);
}
.mc-supported-showcase__media-inner {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
min-width: 0;
min-height: 0;
}
.mc-supported-showcase__media-inner .field,
.mc-supported-showcase__media-inner .field__item {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
.mc-supported-showcase__media img,
.mc-supported-showcase__media-inner img {
display: block;
width: auto !important;
height: auto !important;
max-width: 180px !important;
max-height: 180px !important;
margin: auto;
object-fit: contain !important;
}
.mc-supported-showcase__media-fallback {
display: flex;
align-items: center;
justify-content: center;
width: 150px;
height: 150px;
border:
1px solid
rgba(255, 255, 255, .22);
border-radius: 28px;
background:
radial-gradient(
circle at 70% 25%,
rgba(64, 184, 255, .32),
rgba(8, 42, 67, .12) 55%
);
box-shadow:
inset 0 0 0 1px
rgba(255, 255, 255, .04);
}
.mc-supported-showcase__media-fallback span {
color: #fff;
font-size: 20px;
font-weight: 800;
letter-spacing: .08em;
}
.mc-supported-showcase__body {
justify-content: center;
min-width: 0;
padding:
34px
42px;
}
.mc-supported-showcase__status {
margin-bottom: 16px;
}
.mc-supported-showcase__company {
display: block;
max-width: 680px;
margin-bottom: 10px;
overflow-wrap: anywhere;
}
.mc-supported-showcase__body h3 {
max-width: 760px;
margin:
0
0
14px;
font-size: clamp(22px, 2.5vw, 32px);
line-height: 1.08;
letter-spacing: -.025em;
overflow-wrap: anywhere;
word-break: normal;
text-wrap: balance;
}
.mc-supported-showcase__body p {
display: -webkit-box;
max-width: 720px;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
line-clamp: 3;
font-size: 14px;
line-height: 1.55;
}
.mc-supported-showcase__more {
margin-top: 22px;
}
.mc-supported-showcase__viewport,
.mc-supported-showcase__track {
min-height: 300px;
}
.mc-supported-showcase__dots {
margin-top: 14px;
}
@media (max-width: 1000px) {
.mc-project-catalog__hero,
.mc-project-landing__hero {
width: min(940px, 100%);
max-width: 940px;
}
.mc-supported-showcase__link {
grid-template-columns:
220px
minmax(0, 1fr);
}
.mc-supported-showcase__media {
width: 220px;
min-width: 220px;
padding: 22px;
}
.mc-supported-showcase__media img,
.mc-supported-showcase__media-inner img {
max-width: 150px !important;
max-height: 150px !important;
}
}
@media (max-width: 760px) {
.mc-project-catalog__hero,
.mc-project-landing__hero {
width: 100%;
max-width: 100%;
}
.mc-supported-showcase__link {
grid-template-columns: 1fr;
}
.mc-supported-showcase__viewport,
.mc-supported-showcase__track {
min-height: 520px;
}
.mc-supported-showcase__media {
width: 100%;
min-width: 0;
min-height: 210px;
padding: 24px;
}
.mc-supported-showcase__media img,
.mc-supported-showcase__media-inner img {
max-width: 150px !important;
max-height: 150px !important;
}
.mc-supported-showcase__body {
padding:
28px
24px
32px;
}
.mc-supported-showcase__body h3 {
font-size: 24px;
}
}
.mc-project-catalog__hero,
.mc-project-landing__hero {
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
min-height: 0 !important;
border-radius: 20px;
}
.mc-project-catalog__hero-inner,
.mc-project-landing__hero-inner {
min-height: 270px !important;
height: auto;
padding-top: 0;
padding-bottom: 0;
}
.mc-project-catalog__hero-copy,
.mc-project-landing__hero-copy {
display: flex;
flex-direction: column;
justify-content: center;
min-height: 270px;
padding:
34px
42px !important;
}
.mc-project-catalog__hero h1,
.mc-project-landing__hero h1 {
max-width: 760px;
margin-bottom: 16px;
font-size: clamp(34px, 3.5vw, 50px) !important;
line-height: 1.0 !important;
letter-spacing: -.04em;
text-wrap: balance;
}
.mc-project-catalog__hero p,
.mc-project-landing__hero p {
max-width: 760px;
margin-bottom: 0;
font-size: 14px;
line-height: 1.52;
}
.mc-project-catalog__hero-visual,
.mc-project-landing__hero-visual {
min-height: 270px !important;
}
.mc-supported-overview {
margin:
14px
0
42px !important;
}
.mc-supported-overview__item {
min-height: 78px !important;
padding:
16px
22px !important;
}
.mc-supported-overview__item strong {
margin-bottom: 4px;
font-size: 27px !important;
}
.mc-supported-overview__item span {
font-size: 12px;
}
.mc-supported-showcase {
margin-bottom: 50px;
}
.mc-supported-showcase__viewport,
.mc-supported-showcase__track {
min-height: 270px !important;
height: 270px;
}
.mc-supported-showcase__card {
height: 270px;
overflow: hidden;
}
.mc-supported-showcase__link {
display: grid;
grid-template-columns:
220px
minmax(0, 1fr) !important;
width: 100%;
height: 270px;
min-height: 270px !important;
overflow: hidden;
border-radius: 18px;
}
.mc-supported-showcase__media {
width: 220px !important;
min-width: 220px !important;
height: 270px;
min-height: 270px !important;
padding: 22px !important;
overflow: hidden;
}
.mc-supported-showcase__media-inner {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
.mc-supported-showcase__media-inner .field,
.mc-supported-showcase__media-inner .field__item {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
.mc-supported-showcase__media img,
.mc-supported-showcase__media-inner img {
display: block;
width: auto !important;
height: auto !important;
max-width: 150px !important;
max-height: 150px !important;
object-fit: contain !important;
}
.mc-supported-showcase__media-fallback {
width: 132px;
height: 132px;
border-radius: 24px;
}
.mc-supported-showcase__body {
display: flex;
flex-direction: column;
justify-content: center;
min-width: 0;
height: 270px;
padding:
25px
34px !important;
overflow: hidden;
}
.mc-supported-showcase__status {
flex: 0 0 auto;
margin-bottom: 10px !important;
padding:
5px
9px;
font-size: 9px;
}
.mc-supported-showcase__company {
display: block;
flex: 0 0 auto;
max-width: 760px;
margin-bottom: 7px !important;
overflow: hidden;
font-size: 11px !important;
line-height: 1.3;
white-space: nowrap;
text-overflow: ellipsis;
}
.mc-supported-showcase__body h3 {
display: -webkit-box;
flex: 0 0 auto;
max-width: 820px;
max-height: calc(1.08em * 4);
margin:
0
0
9px !important;
overflow: hidden;
font-size: clamp(19px, 2vw, 26px) !important;
line-height: 1.08 !important;
letter-spacing: -.025em;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
line-clamp: 4;
overflow-wrap: anywhere;
}
.mc-supported-showcase__body p {
display: -webkit-box;
flex: 0 0 auto;
max-width: 780px;
max-height: calc(1.48em * 2);
margin: 0;
overflow: hidden;
color: #577187;
font-size: 12px !important;
line-height: 1.48 !important;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
}
.mc-supported-showcase__more {
flex: 0 0 auto;
margin-top: 12px !important;
font-size: 11px;
}
.mc-supported-showcase__dots {
margin-top: 11px !important;
}
.mc-supported-showcase__dot {
width: 6px;
height: 6px;
}
.mc-supported-showcase__dot.is-active {
width: 20px;
}
.mc-project-catalog__direction-navigator {
margin-top: 42px;
}
@media (max-width: 900px) {
.mc-project-catalog__hero-inner,
.mc-project-landing__hero-inner,
.mc-project-catalog__hero-copy,
.mc-project-landing__hero-copy {
min-height: 245px !important;
}
.mc-project-catalog__hero h1,
.mc-project-landing__hero h1 {
font-size: clamp(31px, 5vw, 42px) !important;
}
.mc-supported-showcase__viewport,
.mc-supported-showcase__track,
.mc-supported-showcase__card,
.mc-supported-showcase__link {
height: 290px;
min-height: 290px !important;
}
.mc-supported-showcase__link {
grid-template-columns:
190px
minmax(0, 1fr) !important;
}
.mc-supported-showcase__media {
width: 190px !important;
min-width: 190px !important;
height: 290px;
min-height: 290px !important;
}
.mc-supported-showcase__body {
height: 290px;
padding:
24px
28px !important;
}
}
@media (max-width: 700px) {
.mc-project-catalog__hero-inner,
.mc-project-landing__hero-inner,
.mc-project-catalog__hero-copy,
.mc-project-landing__hero-copy {
min-height: 0 !important;
}
.mc-project-catalog__hero-copy,
.mc-project-landing__hero-copy {
padding:
28px
24px !important;
}
.mc-project-catalog__hero h1,
.mc-project-landing__hero h1 {
font-size: 32px !important;
}
.mc-supported-showcase__viewport,
.mc-supported-showcase__track {
height: 470px;
min-height: 470px !important;
}
.mc-supported-showcase__card,
.mc-supported-showcase__link {
height: 470px;
min-height: 470px !important;
}
.mc-supported-showcase__link {
grid-template-columns: 1fr !important;
}
.mc-supported-showcase__media {
width: 100% !important;
min-width: 0 !important;
height: 180px;
min-height: 180px !important;
}
.mc-supported-showcase__media img,
.mc-supported-showcase__media-inner img {
max-width: 120px !important;
max-height: 120px !important;
}
.mc-supported-showcase__body {
height: 290px;
padding:
24px !important;
}
.mc-supported-showcase__body h3 {
font-size: 21px !important;
-webkit-line-clamp: 4;
line-clamp: 4;
}
}
.mc-project-landing__hero .mc-project-landing__eyebrow,
.mc-project-catalog__hero .mc-project-landing__eyebrow,
.mc-project-landing__hero .mc-project-landing__kicker,
.mc-project-catalog__hero .mc-project-landing__kicker {
color: #69c8f4 !important;
border-color:
rgba(105, 200, 244, .42) !important;
background:
rgba(105, 200, 244, .07) !important;
}
.mc-project-landing__hero
[class*="eyebrow"],
.mc-project-catalog__hero
[class*="eyebrow"] {
color: #69c8f4 !important;
border-color:
rgba(105, 200, 244, .42) !important;
}
.mc-project-catalog__search-row {
display: flex;
justify-content: flex-end;
width: 100%;
margin:
20px
0
14px;
}
.mc-project-catalog__search {
width: min(520px, 100%);
}
.mc-project-catalog__search-label {
display: block;
margin-bottom: 7px;
color: #567286;
font-size: 11px;
font-weight: 800;
letter-spacing: .06em;
text-transform: uppercase;
}
.mc-project-catalog__search-control {
position: relative;
display: flex;
width: 100%;
min-height: 46px;
}
.mc-project-catalog__search-input {
width: 100%;
min-width: 0;
height: 46px;
padding:
0
142px
0
16px;
border:
1px solid
#cbdde8;
border-radius: 12px;
outline: none;
color: #082a43;
background: #fff;
font: inherit;
font-size: 13px;
transition:
border-color .2s ease,
box-shadow .2s ease;
}
.mc-project-catalog__search-input::placeholder {
color: #91a6b4;
}
.mc-project-catalog__search-input:hover {
border-color: #9fc6dd;
}
.mc-project-catalog__search-input:focus {
border-color: #087fc8;
box-shadow:
0 0 0 3px
rgba(8, 127, 200, .10);
}
.mc-project-catalog__search-submit {
position: absolute;
top: 5px;
right: 5px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
height: 36px;
padding:
0
14px;
border: 0;
border-radius: 9px;
color: #fff;
background: #087fc8;
font: inherit;
font-size: 12px;
font-weight: 800;
cursor: pointer;
transition:
background .2s ease,
transform .2s ease;
}
.mc-project-catalog__search-submit:hover {
background: #066ca9;
}
.mc-project-catalog__search-submit:active {
transform: translateY(1px);
}
.mc-project-catalog__search-clear {
position: absolute;
z-index: 2;
top: 50%;
right: 82px;
display: flex;
align-items: center;
justify-content: center;
width: 27px;
height: 27px;
border-radius: 50%;
color: #658094;
background: #edf5f9;
font-size: 18px;
line-height: 1;
text-decoration: none;
transform: translateY(-50%);
}
.mc-project-catalog__search-clear:hover {
color: #082a43;
background: #dfedf4;
}
.mc-project-catalog__search-row
+ .mc-project-catalog__results,
.mc-project-catalog__search-row
+ .mc-project-catalog__catalog-toolbar {
margin-top: 0;
}
@media (max-width: 700px) {
.mc-project-catalog__search-row {
justify-content: stretch;
}
.mc-project-catalog__search {
width: 100%;
}
.mc-project-catalog__search-input {
padding-right: 110px;
}
.mc-project-catalog__search-submit span:last-child {
display: none;
}
.mc-project-catalog__search-submit {
width: 38px;
padding:
0
10px;
}
.mc-project-catalog__search-clear {
right: 49px;
}
}
.mc-project-catalog__filter-search-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
width: 100%;
margin:
18px
0;
}
.mc-project-catalog__filter-search-row
.mc-project-catalog__status-filter,
.mc-project-catalog__filter-search-row
.mc-project-catalog__statuses {
flex: 0 1 auto;
margin:
0 !important;
}
.mc-project-catalog__search-compact {
flex:
0
1
330px;
width: 330px;
max-width: 40%;
margin-left: auto;
}
.mc-project-catalog__search-compact-control {
position: relative;
width: 100%;
}
.mc-project-catalog__search-compact-input {
display: block;
width: 100%;
height: 36px;
padding:
0
70px
0
13px;
border:
1px solid
#cbdde8;
border-radius: 9px;
outline: none;
color: #082a43;
background: #fff;
font: inherit;
font-size: 12px;
transition:
border-color .18s ease,
box-shadow .18s ease;
}
.mc-project-catalog__search-compact-input::placeholder {
color: #8da3b2;
}
.mc-project-catalog__search-compact-input:focus {
border-color: #087fc8;
box-shadow:
0 0 0 3px
rgba(8, 127, 200, .08);
}
.mc-project-catalog__search-compact-submit {
position: absolute;
top: 3px;
right: 3px;
display: flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
padding: 0;
border: 0;
border-radius: 7px;
color: #fff;
background: #087fc8;
font-size: 15px;
cursor: pointer;
}
.mc-project-catalog__search-compact-submit:hover {
background: #066da9;
}
.mc-project-catalog__search-compact-clear {
position: absolute;
z-index: 2;
top: 50%;
right: 39px;
display: flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: 50%;
color: #607d91;
background: #edf5f9;
font-size: 15px;
line-height: 1;
text-decoration: none;
transform: translateY(-50%);
}
.mc-project-catalog__search-compact-clear:hover {
color: #082a43;
background: #dfeef5;
}
.mc-project-catalog__search-row {
display: none !important;
}
@media (max-width: 850px) {
.mc-project-catalog__filter-search-row {
flex-direction: column;
align-items: stretch;
gap: 12px;
}
.mc-project-catalog__search-compact {
width: 100%;
max-width: 100%;
margin-left: 0;
}
}
.mc-project-catalog__search-compact-control {
position: relative;
display: grid;
grid-template-columns:
minmax(0, 1fr)
38px;
align-items: stretch;
gap: 7px;
width: 100%;
}
.mc-project-catalog__search-compact-input {
width: 100%;
height: 38px;
padding:
0
36px
0
13px !important;
border-radius: 9px;
}
.mc-project-catalog__search-compact-submit {
position: static !important;
display: flex;
align-items: center;
justify-content: center;
width: 38px !important;
height: 38px !important;
padding: 0;
border: 0;
border-radius: 9px !important;
color: #fff;
background: #087fc8;
cursor: pointer;
transition:
background .18s ease,
opacity .18s ease,
transform .18s ease;
}
.mc-project-catalog__search-compact-submit:hover {
background: #066da9;
}
.mc-project-catalog__search-compact-submit:active {
transform: translateY(1px);
}
.mc-project-catalog__search-compact-clear {
position: absolute;
z-index: 3;
top: 50%;
right: 52px !important;
display: flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
transform: translateY(-50%);
}
.mc-project-catalog__search-compact.is-loading
.mc-project-catalog__search-compact-submit {
opacity: .55;
cursor: wait;
}
.mc-project-catalog__search-compact.is-loading
.mc-project-catalog__search-compact-input {
background: #f8fbfd;
}
.mc-project-catalog__search-compact {
width: 330px;
max-width: 40%;
}
@media (max-width: 850px) {
.mc-project-catalog__search-compact {
width: 100%;
max-width: 100%;
}
}
/*
* Explicit visual ordering.
*
* The URLs are stable semantic identifiers:
* direction=11 -> development
* direction=12 -> implementation
*
* We deliberately do not alter filtering semantics or
* controller data. Only presentation order changes.
*/
.mc-project-catalog__directions
> .mc-project-catalog__direction--all {
order: 1;
}
.mc-project-catalog__directions
> .mc-project-catalog__direction[href*="direction=12"] {
order: 2;
}
.mc-project-catalog__directions
> .mc-project-catalog__direction[href*="direction=11"] {
order: 3;
}
/*
* Every direction card must be able to shrink inside the
* parent grid/flex track.
*/
.mc-project-catalog__direction {
min-width: 0;
max-width: 100%;
box-sizing: border-box;
overflow: hidden;
}
/*
* Do not allow intrinsic text width to expand the card.
*/
.mc-project-catalog__direction-copy {
min-width: 0;
max-width: 100%;
overflow: hidden;
}
/*
* Direction title.
*
* Keep normal Russian word wrapping first, but allow a
* defensive break for unusually long strings.
*/
.mc-project-catalog__direction-copy strong {
display: block;
min-width: 0;
max-width: 100%;
white-space: normal;
overflow-wrap: anywhere;
word-break: normal;
line-height: 1.22;
}
/*
* Direction description.
*/
.mc-project-catalog__direction-copy small {
display: block;
min-width: 0;
max-width: 100%;
white-space: normal;
overflow-wrap: anywhere;
word-break: normal;
line-height: 1.34;
}
/*
* Counter always occupies its own fixed-width area and must
* never be squeezed by the text.
*/
.mc-project-catalog__direction-count {
flex: 0 0 auto;
min-width: 2.35rem;
max-width: 3.25rem;
box-sizing: border-box;
text-align: center;
white-space: nowrap;
}
/*
* In case the original component is grid-based, make the
* middle text track explicitly shrinkable.
*/
.mc-project-catalog__direction {
grid-template-columns:
auto
minmax(0, 1fr)
auto;
}
/*
* The icon also must not consume unexpected width.
*/
.mc-project-catalog__direction-icon {
flex: 0 0 auto;
min-width: 0;
}
/*
* The direction container itself must not inherit an
* unshrinkable min-content width from its children.
*/
.mc-project-catalog__directions {
min-width: 0;
}
/*
* Desktop/tablet cards have enough room for the copy but
* should not need an oversized title.
*/
@media (min-width: 768px) {
.mc-project-catalog__direction-copy strong {
font-size: clamp(
0.82rem,
0.72rem + 0.18vw,
0.94rem
);
}
.mc-project-catalog__direction-copy small {
font-size: clamp(
0.69rem,
0.64rem + 0.1vw,
0.76rem
);
}
}
/*
* Narrow screens: keep cards readable and allow all content
* to flow naturally instead of overflowing horizontally.
*/
@media (max-width: 767px) {
.mc-project-catalog__direction {
width: 100%;
}
.mc-project-catalog__direction-copy strong {
font-size: 0.92rem;
}
.mc-project-catalog__direction-copy small {
font-size: 0.76rem;
}
}
/*
* Card establishes its own stacking context.
* Important: overflow MUST remain hidden so the decorative
* circle never leaks outside the card.
*/
.mc-project-catalog__direction {
position: relative;
isolation: isolate;
overflow: hidden;
}
/*
* Decorative pseudo-elements / decorative background layer
* are always behind content.
*/
.mc-project-catalog__direction::before,
.mc-project-catalog__direction::after {
z-index: 0 !important;
pointer-events: none;
}
/*
* Raise every real content block above decoration.
*/
.mc-project-catalog__direction-icon,
.mc-project-catalog__direction-copy,
.mc-project-catalog__direction-count {
position: relative;
z-index: 2;
}
/*
* Text must always stay visually above the decorative circle.
*/
.mc-project-catalog__direction-copy,
.mc-project-catalog__direction-copy strong,
.mc-project-catalog__direction-copy small {
position: relative;
z-index: 3;
}
/*
* Keep copy readable and allow normal wrapping.
*/
.mc-project-catalog__direction-copy {
min-width: 0;
}
.mc-project-catalog__direction-copy strong,
.mc-project-catalog__direction-copy small {
display: block;
white-space: normal;
word-break: normal;
overflow-wrap: break-word;
text-overflow: clip;
}
/*
* The count badge must also stay in front of the decorative
* circle.
*/
.mc-project-catalog__direction-count {
z-index: 4;
}
/*
* Defensive rule for any dedicated decorative child that may
* exist in the component.
*/
.mc-project-catalog__direction-decoration,
.mc-project-catalog__direction-bg,
.mc-project-catalog__direction-circle {
position: absolute;
z-index: 0 !important;
pointer-events: none;
}
.mc-project-external-catalog {
margin: 28px 0 34px;
}
.mc-project-external-catalog__link {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
gap: 32px;
padding: 28px 32px;
border: 1px solid rgba(105, 200, 244, .42);
border-radius: 18px;
background:
linear-gradient(
135deg,
rgba(105, 200, 244, .10),
rgba(255, 255, 255, .96)
);
color: inherit;
text-decoration: none;
transition:
transform .2s ease,
border-color .2s ease,
box-shadow .2s ease;
}
.mc-project-external-catalog__link:hover {
transform: translateY(-2px);
border-color: rgba(105, 200, 244, .82);
box-shadow:
0 18px 42px
rgba(24, 51, 72, .10);
}
.mc-project-external-catalog__copy {
min-width: 0;
max-width: 820px;
}
.mc-project-external-catalog__eyebrow {
display: block;
margin-bottom: 8px;
color: #469fc9;
font-size: 12px;
font-weight: 700;
line-height: 1.3;
letter-spacing: .09em;
text-transform: uppercase;
}
.mc-project-external-catalog h2 {
margin: 0;
font-size: clamp(
22px,
2.7vw,
32px
);
line-height: 1.12;
}
.mc-project-external-catalog p {
max-width: 720px;
margin: 10px 0 0;
color: rgba(30, 49, 63, .76);
font-size: 15px;
line-height: 1.55;
}
.mc-project-external-catalog__action {
display: inline-flex;
align-items: center;
gap: 10px;
flex: 0 0 auto;
font-size: 15px;
font-weight: 700;
white-space: nowrap;
}
.mc-project-external-catalog__action
span {
font-size: 22px;
transition:
transform .2s ease;
}
.mc-project-external-catalog__link:hover
.mc-project-external-catalog__action
span {
transform: translateX(4px);
}
@media (max-width: 760px) {
.mc-project-external-catalog {
margin:
20px 0 28px;
}
.mc-project-external-catalog__link {
align-items: flex-start;
flex-direction: column;
gap: 18px;
padding: 22px;
}
.mc-project-external-catalog__action {
white-space: normal;
}
}
/* ----------------------------------------------------------
* 1. PROJECTS IN WORK
* Full-bleed image inside the complete left media pane.
* ---------------------------------------------------------- */
.mc-project-catalog
.mc-supported-showcase__media {
position: relative;
align-self: stretch;
padding: 0 !important;
overflow: hidden;
background: #0b5f93;
}
.mc-project-catalog
.mc-supported-showcase__media-inner {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
margin: 0 !important;
padding: 0 !important;
overflow: hidden;
border-radius: inherit;
}
.mc-project-catalog
.mc-supported-showcase__media-inner > div,
.mc-project-catalog
.mc-supported-showcase__media-inner picture {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.mc-project-catalog
.mc-supported-showcase__media img {
display: block;
width: 100% !important;
height: 100% !important;
max-width: none !important;
max-height: none !important;
margin: 0 !important;
object-fit: cover !important;
object-position: center center;
border-radius: 0 !important;
}
/* ----------------------------------------------------------
* Keep the whole showcase card clipping consistently.
* ---------------------------------------------------------- */
.mc-project-catalog
.mc-supported-showcase__card,
.mc-project-catalog
.mc-supported-showcase__link {
overflow: hidden;
}
/* ----------------------------------------------------------
* 2. NORMAL PROJECT CATALOG CARDS
*
* Current project artwork/images inside catalog cards get
* a proper rounded mask instead of looking like a loose
* square image on the card.
*
* Scope several known catalog/card image structures only
* inside /projects.
* ---------------------------------------------------------- */
.mc-project-catalog
.mc-project-landing__explore-grid img,
.mc-project-catalog
.mc-project-catalog__grid img,
.mc-project-catalog
[class*="project-card"] img {
display: block;
border-radius: 12px;
overflow: hidden;
}
/*
* The immediate image wrappers become the visual mask.
* :has() is intentionally avoided for compatibility.
*/
.mc-project-catalog
.mc-project-landing__explore-grid picture,
.mc-project-catalog
.mc-project-landing__explore-grid .field--type-image,
.mc-project-catalog
.mc-project-catalog__grid picture,
.mc-project-catalog
.mc-project-catalog__grid .field--type-image {
display: block;
overflow: hidden;
border-radius: 12px;
}
/*
* If the card artwork is already rendered as a fixed square,
* preserve its current dimensions and only provide a proper
* Marble-style rounded crop.
*/
.mc-project-catalog
.mc-project-landing__explore-grid img,
.mc-project-catalog
.mc-project-catalog__grid img {
object-fit: cover;
object-position: center center;
}
/* ----------------------------------------------------------
* Mobile safeguard
* ---------------------------------------------------------- */
@media (max-width: 760px) {
.mc-project-catalog
.mc-supported-showcase__media-inner {
position: relative;
min-height: 220px;
}
.mc-project-catalog
.mc-supported-showcase__media img {
min-height: 220px;
}
}
/* ---------------------------------------------------------
* 1. "Направления поддержки" — убрать правое описание
* --------------------------------------------------------- */
.mc-project-catalog .mc-supported-directions__aside,
.mc-project-catalog .mc-supported-directions__description,
.mc-project-catalog .mc-supported-directions__text,
.mc-project-catalog .mc-supported-directions .section-description,
.mc-project-catalog .mc-supported-directions [class*="description"],
.mc-project-catalog .mc-project-directions__aside,
.mc-project-catalog .mc-project-directions__description {
display: none !important;
}
.mc-project-catalog .mc-supported-directions__header,
.mc-project-catalog .mc-project-directions__header,
.mc-project-catalog .mc-supported-directions__top,
.mc-project-catalog .mc-project-directions__top {
display: block !important;
}
/* ---------------------------------------------------------
* 2. Направления поддержки — заменить 2 и 3 иконки
* на стиль "Промышленность" и "Платформенное ПО"
* Тексты не трогаем, меняем только визуал иконки.
* --------------------------------------------------------- */
/* общий контейнер маленькой иконки */
.mc-project-catalog .mc-supported-directions__list > *:nth-child(2) [class*="icon"],
.mc-project-catalog .mc-supported-directions__list > *:nth-child(3) [class*="icon"],
.mc-project-catalog .mc-supported-directions__grid > *:nth-child(2) [class*="icon"],
.mc-project-catalog .mc-supported-directions__grid > *:nth-child(3) [class*="icon"],
.mc-project-catalog .mc-project-directions__list > *:nth-child(2) [class*="icon"],
.mc-project-catalog .mc-project-directions__list > *:nth-child(3) [class*="icon"],
.mc-project-catalog .mc-project-directions__grid > *:nth-child(2) [class*="icon"],
.mc-project-catalog .mc-project-directions__grid > *:nth-child(3) [class*="icon"] {
position: relative;
overflow: hidden;
}
/* скрываем старый внутренний glyph */
.mc-project-catalog .mc-supported-directions__list > *:nth-child(2) [class*="icon"] > *,
.mc-project-catalog .mc-supported-directions__list > *:nth-child(3) [class*="icon"] > *,
.mc-project-catalog .mc-supported-directions__grid > *:nth-child(2) [class*="icon"] > *,
.mc-project-catalog .mc-supported-directions__grid > *:nth-child(3) [class*="icon"] > *,
.mc-project-catalog .mc-project-directions__list > *:nth-child(2) [class*="icon"] > *,
.mc-project-catalog .mc-project-directions__list > *:nth-child(3) [class*="icon"] > *,
.mc-project-catalog .mc-project-directions__grid > *:nth-child(2) [class*="icon"] > *,
.mc-project-catalog .mc-project-directions__grid > *:nth-child(3) [class*="icon"] > * {
opacity: 0 !important;
}
/* 2-я карточка — "Промышленность" / gear */
.mc-project-catalog .mc-supported-directions__list > *:nth-child(2) [class*="icon"]::after,
.mc-project-catalog .mc-supported-directions__grid > *:nth-child(2) [class*="icon"]::after,
.mc-project-catalog .mc-project-directions__list > *:nth-child(2) [class*="icon"]::after,
.mc-project-catalog .mc-project-directions__grid > *:nth-child(2) [class*="icon"]::after {
content: '';
position: absolute;
inset: 8px;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
background-image: url("data:image/svg+xml;utf8,\
");
}
/* 3-я карточка — "Платформенное ПО" / code */
.mc-project-catalog .mc-supported-directions__list > *:nth-child(3) [class*="icon"]::after,
.mc-project-catalog .mc-supported-directions__grid > *:nth-child(3) [class*="icon"]::after,
.mc-project-catalog .mc-project-directions__list > *:nth-child(3) [class*="icon"]::after,
.mc-project-catalog .mc-project-directions__grid > *:nth-child(3) [class*="icon"]::after {
content: '';
position: absolute;
inset: 8px;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
background-image: url("data:image/svg+xml;utf8,\
");
}
/* ---------------------------------------------------------
* 3. "Проекты в работе" — 2 карточки на экран
* Слайдер оставляем, уменьшаем растягивание.
* --------------------------------------------------------- */
@media (min-width: 1200px) {
.mc-project-catalog .mc-supported-showcase .slick-track,
.mc-project-catalog .mc-supported-showcase .swiper-wrapper,
.mc-project-catalog .mc-supported-showcase [class*="track"] {
display: flex !important;
gap: 24px;
}
.mc-project-catalog .mc-supported-showcase .slick-slide,
.mc-project-catalog .mc-supported-showcase .swiper-slide,
.mc-project-catalog .mc-supported-showcase [class*="slide"] {
width: calc(50% - 12px) !important;
min-width: calc(50% - 12px) !important;
flex: 0 0 calc(50% - 12px) !important;
height: auto !important;
}
.mc-project-catalog .mc-supported-showcase__card,
.mc-project-catalog .mc-supported-showcase__link {
height: 100%;
}
}
/* ---------------------------------------------------------
* 4. Если найден 1 проект — не растягивать на весь экран
* --------------------------------------------------------- */
.mc-project-catalog .mc-project-catalog__grid,
.mc-project-catalog .mc-project-list__grid,
.mc-project-catalog .mc-projects-grid,
.mc-project-catalog .views-view-grid,
.mc-project-catalog .view-content {
align-items: start;
}
.mc-project-catalog .mc-project-catalog__grid > :only-child,
.mc-project-catalog .mc-project-list__grid > :only-child,
.mc-project-catalog .mc-projects-grid > :only-child,
.mc-project-catalog .views-view-grid > :only-child,
.mc-project-catalog .view-content > :only-child {
width: 100%;
max-width: 430px !important;
justify-self: start;
}
/* ---------------------------------------------------------
* Общая форма карточек проекта — аккуратнее и стабильнее
* --------------------------------------------------------- */
.mc-project-catalog .mc-project-card,
.mc-project-catalog [class*="project-card"] {
max-width: 100%;
}
.mc-project-catalog .mc-project-card__media,
.mc-project-catalog [class*="project-card"] [class*="media"] {
overflow: hidden;
border-radius: 16px;
}
.mc-project-catalog .mc-project-card__media img,
.mc-project-catalog [class*="project-card"] [class*="media"] img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
/* ---------------------------------------------------------
* Мобильный safeguard
* --------------------------------------------------------- */
@media (max-width: 1199px) {
.mc-project-catalog .mc-supported-showcase .slick-slide,
.mc-project-catalog .mc-supported-showcase .swiper-slide,
.mc-project-catalog .mc-supported-showcase [class*="slide"] {
width: 100% !important;
min-width: 100% !important;
flex: 0 0 100% !important;
}
}
/* ----------------------------------------------------------
* Direction icons.
* ---------------------------------------------------------- */
.mc-project-catalog
.mc-project-catalog__direction-icon {
overflow: hidden;
}
.mc-project-catalog
.mc-project-catalog__direction-icon img {
display: block;
width: 100%;
height: 100%;
padding: 5px;
object-fit: contain;
}
/* ----------------------------------------------------------
* "Проекты в работе"
*
* Actual carousel is:
* data-supported-carousel
* > viewport
* > data-supported-track
* > data-supported-card
*
* Desktop: show active + next = 2 cards.
* Slider logic continues changing .is-active.
* ---------------------------------------------------------- */
@media (min-width: 1000px) {
.mc-project-catalog
.mc-supported-showcase__track {
display: grid !important;
grid-template-columns:
repeat(2, minmax(0, 1fr)) !important;
gap: 18px !important;
transform: none !important;
}
.mc-project-catalog
.mc-supported-showcase__card {
display: none !important;
width: auto !important;
min-width: 0 !important;
max-width: none !important;
margin: 0 !important;
}
.mc-project-catalog
.mc-supported-showcase__card.is-active,
.mc-project-catalog
.mc-supported-showcase__card.is-active
+ .mc-supported-showcase__card {
display: block !important;
}
.mc-project-catalog
.mc-supported-showcase__link {
height: 100%;
}
}
/* Tablet / mobile stays one card like before. */
@media (max-width: 999px) {
.mc-project-catalog
.mc-supported-showcase__track {
display: block;
}
}
/* ----------------------------------------------------------
* Keep showcase image full-bleed inside its media column.
* ---------------------------------------------------------- */
.mc-project-catalog
.mc-supported-showcase__media {
overflow: hidden;
padding: 0 !important;
}
.mc-project-catalog
.mc-supported-showcase__media-inner {
width: 100%;
height: 100%;
margin: 0 !important;
padding: 0 !important;
}
.mc-project-catalog
.mc-supported-showcase__media-inner img {
display: block;
width: 100% !important;
height: 100% !important;
min-width: 100%;
min-height: 100%;
max-width: none !important;
max-height: none !important;
object-fit: cover !important;
object-position: center;
}
/* ----------------------------------------------------------
* 1. Hero:
*
* Russian digital solutions
* ...
* "и особо значимые проекты" must stay one full line.
* ---------------------------------------------------------- */
.mc-project-catalog
.mc-project-landing__hero-copy
h1 > span {
display: block;
white-space: nowrap;
}
/*
* Give text pane enough width for the third line.
* Keep the existing hero visual proportions otherwise.
*/
@media (min-width: 1100px) {
.mc-project-catalog
.mc-project-landing__hero-copy {
min-width: 0;
max-width: 66%;
}
}
/* ----------------------------------------------------------
* Direction icons — use complete PNG artwork cleanly.
* ---------------------------------------------------------- */
.mc-project-catalog
.mc-project-catalog__direction-icon {
overflow: hidden;
}
.mc-project-catalog
.mc-project-catalog__direction-icon img {
display: block;
width: 100%;
height: 100%;
padding: 3px;
object-fit: contain;
}
/* ----------------------------------------------------------
* 2. "Проекты в работе" — TWO cards desktop.
*
* Original JS continues deciding which card is-active.
* V4 JS adds is-companion to the next card.
* ---------------------------------------------------------- */
@media (min-width: 1000px) {
.mc-project-catalog
.mc-supported-showcase__viewport {
overflow: hidden !important;
}
.mc-project-catalog
.mc-supported-showcase__track {
display: grid !important;
grid-template-columns:
repeat(2, minmax(0, 1fr)) !important;
gap: 18px !important;
width: 100% !important;
transform: none !important;
translate: none !important;
}
.mc-project-catalog
.mc-supported-showcase__card {
display: none !important;
width: 100% !important;
min-width: 0 !important;
max-width: none !important;
margin: 0 !important;
transform: none !important;
}
.mc-project-catalog
.mc-supported-showcase__card.is-active,
.mc-project-catalog
.mc-supported-showcase__card.is-companion {
display: block !important;
}
.mc-project-catalog
.mc-supported-showcase__link {
display: grid;
grid-template-columns:
minmax(150px, 34%)
minmax(0, 1fr);
width: 100%;
height: 100%;
}
.mc-project-catalog
.mc-supported-showcase__media {
width: 100% !important;
min-width: 0 !important;
padding: 0 !important;
}
.mc-project-catalog
.mc-supported-showcase__media-inner {
width: 100% !important;
height: 100% !important;
}
.mc-project-catalog
.mc-supported-showcase__media-inner img {
width: 100% !important;
height: 100% !important;
min-width: 100% !important;
min-height: 100% !important;
object-fit: cover !important;
}
.mc-project-catalog
.mc-supported-showcase__body {
min-width: 0;
}
}
/* Mobile/tablet keeps original one-card carousel. */
@media (max-width: 999px) {
.mc-project-catalog
.mc-supported-showcase__card.is-companion {
display: none !important;
}
}
@media (min-width: 1000px) {
.mc-project-catalog
.mc-supported-showcase__track {
display: block !important;
width: auto !important;
transform: initial !important;
translate: none !important;
}
.mc-project-catalog
.mc-supported-showcase__card {
width: auto !important;
min-width: 0 !important;
transform: initial !important;
}
.mc-project-catalog
.mc-supported-showcase__card.is-companion {
display: none !important;
}
}
.mc-project-catalog
.mc-project-landing__hero-copy h1 {
max-width: none !important;
}
.mc-project-catalog
.mc-project-landing__hero-copy h1 > span {
display: inline-block !important;
white-space: nowrap !important;
}
/* ----------------------------------------------------------
* "Все направления" / direction PNG artwork
* ---------------------------------------------------------- */
.mc-project-catalog
.mc-project-catalog__direction-icon {
overflow: hidden;
}
.mc-project-catalog
.mc-project-catalog__direction-icon img {
display: block;
width: 100%;
height: 100%;
padding: 3px;
object-fit: contain;
}
/* ----------------------------------------------------------
* Desktop two-up supported project carousel
* ---------------------------------------------------------- */
@media (min-width: 1000px) {
.mc-project-catalog
.mc-supported-showcase__viewport {
overflow: hidden !important;
}
.mc-project-catalog
.mc-supported-showcase__track {
display: grid !important;
grid-template-columns:
repeat(2, minmax(0, 1fr)) !important;
gap: 18px !important;
width: 100% !important;
transform: none !important;
}
.mc-project-catalog
.mc-supported-showcase__card {
display: none;
width: 100% !important;
min-width: 0 !important;
max-width: none !important;
margin: 0 !important;
}
.mc-project-catalog
.mc-supported-showcase__card.is-active,
.mc-project-catalog
.mc-supported-showcase__card.is-companion {
display: block !important;
}
.mc-project-catalog
.mc-supported-showcase__link {
display: grid !important;
grid-template-columns:
minmax(145px, 34%)
minmax(0, 1fr);
width: 100%;
height: 100%;
}
.mc-project-catalog
.mc-supported-showcase__media {
width: 100%;
min-width: 0;
padding: 0 !important;
overflow: hidden;
}
.mc-project-catalog
.mc-supported-showcase__media-inner {
width: 100%;
height: 100%;
padding: 0 !important;
margin: 0 !important;
}
.mc-project-catalog
.mc-supported-showcase__media-inner img {
display: block;
width: 100% !important;
height: 100% !important;
min-width: 100%;
min-height: 100%;
max-width: none !important;
max-height: none !important;
object-fit: cover !important;
object-position: center;
}
.mc-project-catalog
.mc-supported-showcase__body {
min-width: 0;
}
}
/* ----------------------------------------------------------
* Mobile/tablet remains one-up
* ---------------------------------------------------------- */
@media (max-width: 999px) {
.mc-project-catalog
.mc-supported-showcase__track {
display: block !important;
}
.mc-project-catalog
.mc-supported-showcase__card {
display: none;
}
.mc-project-catalog
.mc-supported-showcase__card.is-active {
display: block !important;
}
.mc-project-catalog
.mc-supported-showcase__card.is-companion {
display: none !important;
}
}
/* ----------------------------------------------------------
* HERO — EXACTLY THREE LINES
* ---------------------------------------------------------- */
.mc-project-catalog
.mc-project-landing__hero-copy h1 {
max-width: none !important;
}
.mc-project-catalog
.mc-project-landing__hero-copy
.mc-project-hero-line {
display: block !important;
white-space: nowrap !important;
}
/* ----------------------------------------------------------
* "ВСЕ НАПРАВЛЕНИЯ"
*
* Берём ту же иконку, что "Все отрасли" в ОЗП.
* Применяем к ПЕРВОЙ карточке направлений напрямую.
* ---------------------------------------------------------- */
.mc-project-catalog
.mc-project-catalog__direction-grid
> :first-child
.mc-project-catalog__direction-icon,
.mc-project-catalog
.mc-project-catalog__directions
> :first-child
.mc-project-catalog__direction-icon,
.mc-project-catalog
[class*="direction"]
> :first-child
.mc-project-catalog__direction-icon {
position: relative !important;
overflow: hidden !important;
background-image:
url("/modules/custom/marble_significant_projects/images/industry-icons/all-industries.png") !important;
background-repeat: no-repeat !important;
background-position: center !important;
background-size: 86% 86% !important;
}
/* скрываем старую звёздочку/глиф только в первой карточке */
.mc-project-catalog
.mc-project-catalog__direction-grid
> :first-child
.mc-project-catalog__direction-icon
> *,
.mc-project-catalog
.mc-project-catalog__directions
> :first-child
.mc-project-catalog__direction-icon
> * {
visibility: hidden !important;
}
/* ----------------------------------------------------------
* TWO-UP CAROUSEL
* ---------------------------------------------------------- */
@media (min-width: 1000px) {
.mc-project-catalog
[data-supported-track] {
display: grid !important;
grid-template-columns:
repeat(2, minmax(0, 1fr)) !important;
gap: 18px !important;
width: 100% !important;
transform: none !important;
}
.mc-project-catalog
[data-supported-card] {
width: 100% !important;
min-width: 0 !important;
max-width: none !important;
margin: 0 !important;
}
.mc-project-catalog
[data-supported-card].is-active,
.mc-project-catalog
[data-supported-card].is-companion {
display: block !important;
}
.mc-project-catalog
.mc-supported-showcase__link {
display: grid !important;
grid-template-columns:
minmax(140px, 34%)
minmax(0, 1fr) !important;
height: 100% !important;
}
.mc-project-catalog
.mc-supported-showcase__media {
min-width: 0 !important;
padding: 0 !important;
overflow: hidden !important;
}
.mc-project-catalog
.mc-supported-showcase__media-inner {
width: 100% !important;
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
.mc-project-catalog
.mc-supported-showcase__media-inner img {
display: block !important;
width: 100% !important;
height: 100% !important;
min-width: 100% !important;
min-height: 100% !important;
max-width: none !important;
max-height: none !important;
object-fit: cover !important;
object-position: center center !important;
}
}
/* ----------------------------------------------------------
* TABLET / MOBILE — ONE PROJECT
* ---------------------------------------------------------- */
@media (max-width: 999px) {
.mc-project-catalog
[data-supported-track] {
display: block !important;
}
.mc-project-catalog
[data-supported-card] {
width: 100% !important;
}
}
.mc-project-catalog
.mc-supported-showcase__track {
display: block !important;
width: 100% !important;
transform: none !important;
}
.mc-project-catalog
.mc-supported-showcase__pair {
display: none;
width: 100%;
}
.mc-project-catalog
.mc-supported-showcase__pair.is-active {
display: grid !important;
}
/* desktop = 2 projects */
@media (min-width: 1000px) {
.mc-project-catalog
.mc-supported-showcase__pair.is-active {
grid-template-columns:
repeat(2, minmax(0, 1fr));
gap: 18px;
}
.mc-project-catalog
.mc-supported-showcase__card {
display: block !important;
width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
}
.mc-project-catalog
.mc-supported-showcase__link {
display: grid !important;
grid-template-columns:
minmax(135px, 34%)
minmax(0, 1fr);
height: 100%;
}
.mc-project-catalog
.mc-supported-showcase__media {
min-width: 0;
padding: 0 !important;
overflow: hidden;
}
.mc-project-catalog
.mc-supported-showcase__media-inner {
width: 100%;
height: 100%;
margin: 0 !important;
padding: 0 !important;
}
.mc-project-catalog
.mc-supported-showcase__media-inner img {
display: block;
width: 100% !important;
height: 100% !important;
min-width: 100%;
min-height: 100%;
max-width: none !important;
max-height: none !important;
object-fit: cover !important;
object-position: center;
}
}
/* tablet/mobile = one column inside current pair */
@media (max-width: 999px) {
.mc-project-catalog
.mc-supported-showcase__pair.is-active {
grid-template-columns: 1fr;
}
}
/* every pair hidden by default */
.mc-project-catalog
.mc-supported-showcase__pair {
display: none !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
/* current pair visible */
.mc-project-catalog
.mc-supported-showcase__pair.is-active {
display: grid !important;
}
/* CRITICAL:
* inner project cards inside the visible pair must never
* inherit old "display:none" carousel rules.
*/
.mc-project-catalog
.mc-supported-showcase__pair.is-active
> .mc-supported-showcase__card {
display: block !important;
position: relative !important;
width: 100% !important;
min-width: 0 !important;
max-width: none !important;
height: auto !important;
margin: 0 !important;
opacity: 1 !important;
visibility: visible !important;
transform: none !important;
}
/* desktop: exactly two cards */
@media (min-width: 1000px) {
.mc-project-catalog
.mc-supported-showcase__pair.is-active {
grid-template-columns:
repeat(2, minmax(0, 1fr)) !important;
gap: 18px !important;
}
.mc-project-catalog
.mc-supported-showcase__pair.is-active
> .mc-supported-showcase__card {
grid-column: auto !important;
}
.mc-project-catalog
.mc-supported-showcase__pair
.mc-supported-showcase__link {
display: grid !important;
grid-template-columns:
minmax(135px, 34%)
minmax(0, 1fr) !important;
width: 100% !important;
height: 100% !important;
}
}
/* mobile = pair becomes vertical;
* both projects stay reachable rather than disappearing.
*/
@media (max-width: 999px) {
.mc-project-catalog
.mc-supported-showcase__pair.is-active {
grid-template-columns: 1fr !important;
gap: 14px !important;
}
}
/* Remove oversized empty carousel area if an older rule
* established an artificial height.
*/
.mc-project-catalog
.mc-supported-showcase__viewport,
.mc-project-catalog
.mc-supported-showcase__track {
min-height: 0 !important;
height: auto !important;
}
/* viewport */
.mc-project-catalog
.mc-supported-showcase__viewport {
width: 100% !important;
overflow: hidden !important;
min-height: 0 !important;
height: auto !important;
}
/* track */
.mc-project-catalog
[data-supported-track],
.mc-project-catalog
.mc-supported-showcase__track {
display: flex !important;
flex-wrap: nowrap !important;
align-items: stretch !important;
gap: 18px !important;
width: 100% !important;
min-height: 0 !important;
height: auto !important;
transform: translate3d(0, 0, 0);
will-change: transform;
}
/*
* Pair wrappers must have no visual/layout effect if one
* survives before JS flattening.
*/
.mc-project-catalog
.mc-supported-showcase__pair {
display: contents !important;
}
/* ==========================================================
* DESKTOP — exactly 2 equal projects in viewport
* ========================================================== */
@media (min-width: 1000px) {
.mc-project-catalog
.mc-supported-showcase__card {
display: block !important;
flex:
0
0
calc((100% - 18px) / 2) !important;
width:
calc((100% - 18px) / 2) !important;
min-width:
calc((100% - 18px) / 2) !important;
max-width:
calc((100% - 18px) / 2) !important;
height: auto !important;
margin: 0 !important;
opacity: 1 !important;
visibility: visible !important;
transform: none !important;
}
/*
* Card itself:
* media pane + content pane.
*/
.mc-project-catalog
.mc-supported-showcase__link {
display: grid !important;
grid-template-columns:
minmax(155px, 38%)
minmax(0, 62%) !important;
width: 100% !important;
min-height: 205px !important;
height: 100% !important;
overflow: hidden !important;
}
.mc-project-catalog
.mc-supported-showcase__media {
display: block !important;
width: 100% !important;
height: 100% !important;
min-width: 0 !important;
min-height: 205px !important;
padding: 0 !important;
margin: 0 !important;
overflow: hidden !important;
}
.mc-project-catalog
.mc-supported-showcase__media-inner {
width: 100% !important;
height: 100% !important;
min-height: 205px !important;
padding: 0 !important;
margin: 0 !important;
}
.mc-project-catalog
.mc-supported-showcase__media-inner img {
display: block !important;
width: 100% !important;
height: 100% !important;
min-width: 100% !important;
min-height: 205px !important;
max-width: none !important;
max-height: none !important;
margin: 0 !important;
padding: 0 !important;
object-fit: cover !important;
object-position: center center !important;
}
.mc-project-catalog
.mc-supported-showcase__body {
min-width: 0 !important;
padding:
22px
24px !important;
overflow: hidden;
}
.mc-project-catalog
.mc-supported-showcase__title {
overflow-wrap: anywhere;
}
}
/* ==========================================================
* MOBILE / TABLET — one card
* ========================================================== */
@media (max-width: 999px) {
.mc-project-catalog
.mc-supported-showcase__card {
display: block !important;
flex: 0 0 100% !important;
width: 100% !important;
min-width: 100% !important;
max-width: 100% !important;
}
}
/* dots */
.mc-project-catalog
.mc-supported-showcase__dots {
display: flex !important;
justify-content: center;
align-items: center;
gap: 6px;
margin-top: 12px;
}
.mc-project-catalog
.mc-supported-showcase__viewport {
position: relative;
width: 100% !important;
overflow-x: hidden !important;
overflow-y: visible !important;
scroll-behavior: smooth;
scrollbar-width: none;
}
.mc-project-catalog
.mc-supported-showcase__viewport::-webkit-scrollbar {
display: none;
}
/*
* Important: no transform on track anymore.
*/
.mc-project-catalog
[data-supported-track],
.mc-project-catalog
.mc-supported-showcase__track {
display: flex !important;
flex-flow:
row
nowrap !important;
align-items: stretch !important;
gap: 18px !important;
width: max-content !important;
min-width: 100% !important;
height: auto !important;
min-height: 0 !important;
transform: none !important;
translate: none !important;
transition: none !important;
will-change: auto !important;
}
/*
* Pair wrappers are irrelevant after JS flattening.
*/
.mc-project-catalog
.mc-supported-showcase__pair {
display: contents !important;
}
/* ----------------------------------------------------------
* Desktop: two cards exactly fill viewport.
* ---------------------------------------------------------- */
@media (min-width: 1000px) {
.mc-project-catalog
.mc-supported-showcase__card {
display: block !important;
flex:
0 0
calc(
(
100vw
- 18px
) / 2
);
width:
calc(
(
100vw
- 18px
) / 2
);
height: auto !important;
margin: 0 !important;
opacity: 1 !important;
visibility: visible !important;
transform: none !important;
}
/*
* Override 100vw above with actual carousel width.
* The track inherits --marble-carousel-width from viewport
* through percentage sizing of each card.
*/
.mc-project-catalog
.mc-supported-showcase__viewport
.mc-supported-showcase__card {
flex-basis:
calc(
(
100%
- 18px
) / 2
) !important;
width:
calc(
(
100%
- 18px
) / 2
) !important;
min-width:
calc(
(
100%
- 18px
) / 2
) !important;
}
.mc-project-catalog
.mc-supported-showcase__link {
display: grid !important;
grid-template-columns:
minmax(155px, 38%)
minmax(0, 62%) !important;
width: 100% !important;
min-height: 205px !important;
height: 100% !important;
}
}
/* ----------------------------------------------------------
* Mobile = one project.
* ---------------------------------------------------------- */
@media (max-width: 999px) {
.mc-project-catalog
.mc-supported-showcase__card {
display: block !important;
flex:
0 0
100% !important;
width: 100% !important;
min-width: 100% !important;
margin: 0 !important;
}
}
.mc-project-catalog
.mc-supported-showcase__viewport {
display: block !important;
width: 100% !important;
overflow-x: hidden !important;
overflow-y: hidden !important;
min-height: 205px !important;
height: auto !important;
scrollbar-width: none;
}
.mc-project-catalog
.mc-supported-showcase__viewport::-webkit-scrollbar {
display: none;
}
.mc-project-catalog
[data-supported-track],
.mc-project-catalog
.mc-supported-showcase__track {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: stretch !important;
gap: 18px !important;
min-height: 205px !important;
transform: none !important;
translate: none !important;
transition: none !important;
}
/*
* V8 wrappers are removed by JS.
* Until JS runs they must not hide anything.
*/
.mc-project-catalog
.mc-supported-showcase__pair {
display: contents !important;
}
/*
* Important:
* NEVER hide a carousel project card.
*/
.mc-project-catalog
.mc-supported-showcase__card,
.mc-project-catalog
.mc-supported-showcase__pair
> .mc-supported-showcase__card,
.mc-project-catalog
.mc-supported-showcase__pair.is-active
> .mc-supported-showcase__card {
display: block !important;
position: relative !important;
height: auto !important;
opacity: 1 !important;
visibility: visible !important;
transform: none !important;
}
/* desktop card contents */
@media (min-width: 1000px) {
.mc-project-catalog
.mc-supported-showcase__link {
display: grid !important;
grid-template-columns:
minmax(150px, 38%)
minmax(0, 62%) !important;
width: 100% !important;
min-height: 205px !important;
height: 100% !important;
overflow: hidden !important;
}
.mc-project-catalog
.mc-supported-showcase__media {
width: 100% !important;
height: 100% !important;
min-width: 0 !important;
min-height: 205px !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
}
.mc-project-catalog
.mc-supported-showcase__media-inner {
width: 100% !important;
height: 100% !important;
min-height: 205px !important;
margin: 0 !important;
padding: 0 !important;
}
.mc-project-catalog
.mc-supported-showcase__media-inner img {
display: block !important;
width: 100% !important;
height: 100% !important;
min-width: 100% !important;
min-height: 205px !important;
max-width: none !important;
max-height: none !important;
object-fit: cover !important;
object-position: center !important;
}
}
.mc-project-catalog
.mc-supported-showcase__viewport {
width: 100% !important;
overflow: hidden !important;
}
/*
* Do NOT assign width/flex-basis to cards here.
* V9.3 JS owns their exact pixel geometry.
*/
.mc-project-catalog
.mc-supported-showcase__card {
display: block !important;
height: auto !important;
opacity: 1 !important;
visibility: visible !important;
}
/*
* Card itself fills only its calculated slot.
*/
.mc-project-catalog
.mc-supported-showcase__link {
box-sizing: border-box !important;
width: 100% !important;
height: 100% !important;
}
/*
* Image remains constrained to the media column,
* not the complete carousel viewport.
*/
@media (min-width: 1000px) {
.mc-project-catalog
.mc-supported-showcase__link {
display: grid !important;
grid-template-columns:
minmax(145px, 38%)
minmax(0, 62%) !important;
min-height: 205px !important;
}
}
/*
* Public /projects catalog only.
*
* IMPORTANT:
* No filter/query/JS logic is changed here.
* Geometry only.
*/
/* ==========================================================
* DESKTOP
* ========================================================== */
@media (min-width: 1100px) {
.mc-project-catalog
.mc-project-catalog__grid {
display: grid !important;
grid-template-columns:
repeat(3, minmax(0, 1fr)) !important;
grid-auto-flow: row !important;
gap:
28px
24px !important;
align-items: stretch !important;
}
/*
* Fixed slot size is intentional.
* One filtered result therefore remains 1/3 width.
*/
.mc-project-catalog
.mc-project-catalog__card {
width: auto !important;
min-width: 0 !important;
max-width: none !important;
height: 390px !important;
min-height: 390px !important;
max-height: 390px !important;
align-self: stretch !important;
}
.mc-project-catalog
.mc-project-catalog__card-link {
display: flex !important;
flex-direction: column !important;
box-sizing: border-box !important;
width: 100% !important;
height: 100% !important;
min-height: 0 !important;
overflow: hidden !important;
}
.mc-project-catalog
.mc-project-catalog__card-top {
flex: 0 0 auto;
}
.mc-project-catalog
.mc-project-catalog__card-body {
flex: 1 1 auto;
min-height: 0;
overflow: hidden;
}
/*
* Company title:
* keep long names from changing card geometry.
*/
.mc-project-catalog
.mc-project-catalog__card-body h2 {
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
line-clamp: 3;
}
/*
* Project description:
* visual preview only; full text remains on project page.
*/
.mc-project-catalog
.mc-project-catalog__card-body p {
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 6;
line-clamp: 6;
}
/*
* All "О проекте" links line up along bottom edge.
*/
.mc-project-catalog
.mc-project-catalog__more {
flex: 0 0 auto;
margin-top: auto !important;
}
}
/* ==========================================================
* TABLET — TWO COLUMNS
* ========================================================== */
@media (min-width: 700px) and (max-width: 1099px) {
.mc-project-catalog
.mc-project-catalog__grid {
display: grid !important;
grid-template-columns:
repeat(2, minmax(0, 1fr)) !important;
gap:
22px
18px !important;
align-items: stretch !important;
}
.mc-project-catalog
.mc-project-catalog__card {
width: auto !important;
height: 380px !important;
min-height: 380px !important;
max-height: 380px !important;
}
.mc-project-catalog
.mc-project-catalog__card-link {
display: flex !important;
flex-direction: column !important;
height: 100% !important;
overflow: hidden !important;
}
.mc-project-catalog
.mc-project-catalog__card-body {
flex: 1 1 auto;
min-height: 0;
overflow: hidden;
}
.mc-project-catalog
.mc-project-catalog__card-body p {
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 5;
line-clamp: 5;
}
.mc-project-catalog
.mc-project-catalog__more {
margin-top: auto !important;
}
}
/* ==========================================================
* MOBILE
* ========================================================== */
@media (max-width: 699px) {
.mc-project-catalog
.mc-project-catalog__grid {
display: grid !important;
grid-template-columns:
minmax(0, 1fr) !important;
gap: 16px !important;
}
/*
* On mobile allow natural growth:
* no content should become inaccessible.
*/
.mc-project-catalog
.mc-project-catalog__card {
width: 100% !important;
height: auto !important;
min-height: 330px !important;
max-height: none !important;
}
.mc-project-catalog
.mc-project-catalog__card-link {
display: flex !important;
flex-direction: column !important;
min-height: 330px !important;
}
.mc-project-catalog
.mc-project-catalog__more {
margin-top: auto !important;
}
}
/*
* ONLY /projects Hero.
*
* Do not affect:
* - significant-projects
* - about / experts
* - documents
* - competence-center
*/
@media (max-width: 700px) {
/*
* /projects root catalog has mc-project-catalog
* but NOT mc-project-catalog--significant.
*/
.mc-project-catalog:not(.mc-project-catalog--significant)
.mc-project-landing__hero-copy {
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
.mc-project-catalog:not(.mc-project-catalog--significant)
.mc-project-landing__hero-copy h1 {
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
margin-right: 0 !important;
font-size: clamp(25px, 7vw, 30px) !important;
line-height: 1.06 !important;
letter-spacing: -.025em !important;
white-space: normal !important;
word-break: normal !important;
overflow-wrap: normal !important;
hyphens: none !important;
box-sizing: border-box !important;
}
.mc-project-catalog:not(.mc-project-catalog--significant)
.mc-project-landing__hero-copy h1 span {
display: inline !important;
white-space: normal !important;
word-break: normal !important;
overflow-wrap: normal !important;
hyphens: none !important;
}
}
.mc-project-catalog:not(.mc-project-catalog--significant)
.mc-project-catalog__card-body h2 {
white-space: normal !important;
word-break: normal !important;
overflow-wrap: normal !important;
hyphens: none !important;
}
@media (min-width: 700px) {
.mc-project-catalog:not(.mc-project-catalog--significant)
.mc-project-catalog__card-body h2 {
display: -webkit-box;
max-height: none !important;
overflow: hidden;
line-height: 1.08 !important;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
line-clamp: 4;
}
}
.mc-project-catalog--significant
.mc-project-landing__hero--significant {
border-radius: 0 !important;
}