.isn-detail .isn-hero {
--hero-pad-t: clamp(32px, 4.5vw, 72px);
--hero-pad-b: 32px;
}
.isn-detail .isn-hero-grid {
grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
column-gap: clamp(32px, 4vw, 64px);
row-gap: 28px;
align-content: start;
min-height: 0;
}
.isn-detail .isn-hero-copy {
max-width: 720px;
}
.isn-detail.isn .isn-hero-copy .isn-eyebrow {
font-size: clamp(12px, 1vw, 15px);
letter-spacing: 0.045em;
}
.isn-detail .isn-hero-line:last-child {
color: var(--i-blue);
}
.isn-detail .isn-hero-lead {
max-width: 49ch;
margin-top: 24px;
}
.isn-detail .isn-hero-perks {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
margin-top: 28px;
}
.isn-detail .isn-hero-perk {
gap: 10px;
}
.isn-detail .isn-hero-perk .isn-ic {
width: 42px;
height: 42px;
}
.isn-detail .isn-detail-tool {
grid-area: card;
display: flex;
flex-direction: column;
align-self: stretch;
min-width: 0;
padding: clamp(16px, 1.5vw, 22px);
border: 1px solid color-mix(in srgb, var(--i-blue) 12%, var(--i-white));
border-radius: 32px;
background: var(--i-blue-soft);
}
.isn-detail .isn-detail-tool--branche {
align-self: start;
}
.isn-detail .isn-detail-tool > .isn-scan {
flex: 1;
width: 100%;
max-width: none;
padding: clamp(18px, 2vw, 28px);
border-color: var(--i-line);
border-radius: 20px;
box-shadow: none;
}
.isn-detail .isn-detail-tool .isn-btn--solid {
background-color: var(--i-blue);
background-image: none;
box-shadow: none;
}
.isn-detail .isn-detail-tool .isn-btn--solid:hover:not(:disabled) {
background-color: color-mix(in srgb, var(--i-blue) 85%, var(--i-ink));
}
.isn-detail .isn-detail-tool .isn-calc-form,
.isn-detail .isn-detail-tool .isn-calc-out,
.isn-detail .isn-detail-tool .isn-step {
min-width: 0;
}
.isn-detail .isn-detail-tool .isn-scan-pill {
max-width: 100%;
}
.isn-detail .isn-detail-tool .isn-btn {
min-width: 0;
max-width: 100%;
padding-inline: 16px;
white-space: normal;
}
.isn-detail .isn-calc-row {
align-items: flex-start;
}
.isn-detail .isn-calc-row-value {
min-width: 10ch;
min-height: 1lh;
}
.isn-detail .isn-calc-figure {
align-items: flex-end;
}
.isn-detail [data-calc-saving] {
min-width: 8ch;
min-height: 1lh;
}
.isn-detail .isn-cat-spot {
width: 100%;
border-color: transparent;
border-radius: 20px;
background: var(--i-paper);
}
.isn-detail .isn-cat-spot .isn-visual {
background: var(--i-white);
}
.isn-detail .isn-head > .isn-lead {
max-width: 66ch;
}
.isn-detail .isn-head > .isn-h {
overflow-wrap: anywhere;
hyphens: auto;
}
.isn-detail .isn-section--catindex,
.isn-detail .isn-section--brindex {
padding-top: clamp(32px, 4.5vw, 72px);
}
.isn-detail--index .isn-head > .isn-h {
max-width: 22ch;
}
.isn-detail .isn-cattile {
gap: 6px;
border-radius: 20px;
}
.isn-detail .isn-cattile .isn-visual {
border-radius: 14px;
}
.isn-detail .isn-br {
padding: 20px;
border-radius: 16px;
box-shadow: none;
}
.isn-detail .isn-br:hover {
background: var(--i-blue-soft);
box-shadow: none;
}
@media (max-width: 1200px) {
.isn-detail .isn-hero-grid {
grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
grid-template-areas:
'copy card'
'spot card';
column-gap: 28px;
}
.isn-detail.isn .isn-hero .isn-hero-h {
font-size: clamp(34px, 8.4cqw, 60px);
}
.isn-detail .isn-hero-perk {
grid-template-columns: minmax(0, 1fr);
align-content: start;
justify-items: start;
gap: 8px;
}
}
@media (max-width: 760px) {
.isn-detail .isn-hero {
--hero-pad-t: 48px;
--hero-pad-b: 24px;
}
.isn-detail .isn-hero-grid {
grid-template-columns: minmax(0, 1fr);
grid-template-areas:
'copy'
'card'
'spot';
row-gap: 28px;
}
.isn-detail .isn-hero-copy {
text-align: center;
}
.isn-detail.isn .isn-hero-copy .isn-eyebrow {
margin-bottom: 24px;
}
.isn-detail.isn .isn-hero .isn-hero-h {
margin-inline: auto;
font-size: clamp(28px, 10.2cqw, 56px);
line-height: 1.08;
}
.isn-detail .isn-hero-lead {
margin-top: 32px;
margin-inline: auto;
}
.isn-detail .isn-section--catindex,
.isn-detail .isn-section--brindex {
padding-top: 48px;
}
.isn-detail .isn-hero-perks {
gap: 10px;
margin-top: 24px;
margin-inline: auto;
}
.isn-detail .isn-hero-perk {
justify-items: center;
text-align: center;
}
.isn-detail .isn-hero-perk .isn-ic {
width: 38px;
height: 38px;
}
.isn-detail .isn-hero-perk .isn-perk-img {
width: 22px;
height: 22px;
}
.isn-detail .isn-hero-perk-title {
font-size: 12px;
white-space: normal;
}
.isn-detail .isn-detail-tool {
justify-self: center;
width: 100%;
max-width: 600px;
padding: 12px;
border-radius: 24px;
}
.isn-detail .isn-detail-tool .isn-scan-pill {
padding-inline: 10px;
font-family: var(--i-body);
font-size: 13px;
letter-spacing: 0;
}
.isn-detail .isn-cat-spot {
justify-self: center;
max-width: 600px;
}
.isn-detail .isn-head > .isn-h,
.isn-detail .isn-head > .isn-lead,
.isn-detail .isn-brindex-claim {
margin-inline: auto;
text-align: center;
}
.isn-detail .isn-final {
grid-template-columns: minmax(0, 1fr);
}
.isn-detail .isn-final-note {
min-width: 0;
max-width: 100%;
gap: 8px;
}
.isn-detail .isn-final-note > span {
min-width: 0;
max-width: 22ch;
}
.isn-detail .isn-brask-actions {
display: flex;
justify-content: center;
}
}