.intent-map { margin: clamp(55px, 7vw, 95px) 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); padding: 22px 0 28px; } .intent-map figcaption { margin: 0 0 36px; } .intent-map__eyebrow { display: block; margin-bottom: 20px; font-size: 12px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; } .intent-map__title { display: block; max-width: 650px; font-size: clamp(36px, 5.2vw, 58px); font-weight: 700; letter-spacing: -.06em; line-height: 1.02; } .intent-map__title em { font-style: normal; font-weight: 400; } .intent-map__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); border-top: 1px solid var(--line); } .intent-map__choices { border-right: 1px solid var(--line); } .intent-map__choice { display: grid; grid-template-columns: 38px 1fr 18px; align-items: center; gap: 10px; width: 100%; min-height: 112px; border: 0; border-bottom: 1px solid var(--line); padding: 16px 16px 16px 0; background: transparent; color: var(--ink); text-align: left; cursor: pointer; transition: background .2s, padding .2s; } .intent-map__choice:last-child { border-bottom: 0; } .intent-map__choice:hover { padding-left: 8px; background: #f7f8f7; } .intent-map__choice[aria-pressed="true"] { padding-left: 8px; background: #f5fafc; box-shadow: inset 4px 0 var(--logo-cyan); } .intent-map__choice:nth-child(2)[aria-pressed="true"] { background: #fdf6f9; box-shadow: inset 4px 0 var(--accent); } .intent-map__choice:nth-child(3)[aria-pressed="true"] { background: #f8faef; box-shadow: inset 4px 0 var(--logo-lime); } .intent-map__number { align-self: start; padding-top: 4px; color: #5f5f5f; font-size: 12px; font-weight: 700; letter-spacing: .08em; } .intent-map__query { font-size: clamp(19px, 2.5vw, 25px); font-weight: 700; letter-spacing: -.035em; line-height: 1.15; } .intent-map__arrow { font-size: 20px; line-height: 1; } .intent-map__answer { display: flex; flex-direction: column; justify-content: center; min-height: 336px; padding: 25px clamp(19px, 3vw, 30px); background: #f1f5f5; } .intent-map__screen { min-height: 280px; border: 1px solid #aebcbd; background: #fff; box-shadow: 12px 14px 0 #e2e9e9; } .intent-map__screen-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 35px; border-bottom: 1px solid #d7e0e0; padding: 0 12px; color: #666; font-size: 10px; font-weight: 700; letter-spacing: .04em; } .intent-map__screen-mark { display: flex; gap: 4px; } .intent-map__screen-mark i { display: block; width: 4px; height: 4px; background: var(--accent); } .intent-map__screen-mark i:nth-child(2) { background: var(--logo-cyan); } .intent-map__screen-mark i:nth-child(3) { background: var(--logo-lime); } .intent-map__screen-content { padding: 22px 20px 20px; } .intent-map__label { display: block; margin: 0 0 7px; font-size: 10px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; } .intent-map__page { display: block; margin: 0 0 14px; font-size: clamp(24px, 3vw, 32px); font-weight: 700; letter-spacing: -.055em; line-height: 1.05; } .article-body .intent-map__need { margin: 0 0 18px; color: #454545; font-size: 15px; line-height: 1.35; } .intent-map__screen-lines { display: grid; gap: 5px; width: 80%; margin: 0 0 22px; } .intent-map__screen-lines i { display: block; height: 4px; background: #dce4e4; } .intent-map__screen-lines i:nth-child(2) { width: 68%; } .intent-map__screen-action { display: inline-block; border-bottom: 2px solid var(--ink); padding-bottom: 2px; font-size: 11px; font-weight: 700; } .intent-map__path { display: block; margin-top: 23px; color: #4d5d5d; font-size: 12px; overflow-wrap: anywhere; } .article-body .intent-map__foot { margin: 21px 0 0; color: #555; font-size: 13px; line-height: 1.5; } @media (max-width: 620px) { .intent-map__body { grid-template-columns: 1fr; } .intent-map__choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-right: 0; border-bottom: 1px solid var(--line); } .intent-map__choice { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 8px; min-height: 130px; border-right: 1px solid var(--line); border-bottom: 0; padding: 13px 10px; } .intent-map__choice:last-child { border-right: 0; } .intent-map__choice:hover, .intent-map__choice[aria-pressed="true"] { padding-left: 10px; } .intent-map__query { font-size: 16px; } .intent-map__arrow { display: none; } .intent-map__answer { min-height: 300px; padding: 22px; } .intent-map__screen { min-height: 245px; } } @media (max-width: 380px) { .intent-map__choices { grid-template-columns: 1fr; } .intent-map__choice { display: grid; grid-template-columns: 26px 1fr; min-height: 66px; border-right: 0; border-bottom: 1px solid var(--line); } .intent-map__choice:last-child { border-bottom: 0; } } @media (prefers-reduced-motion: reduce) { .intent-map__choice { transition: none; } }