.result-hero .container { min-height: 420px; padding-top: 74px; padding-bottom: 74px; } .hero-copy { position: relative; padding-left: 28px; } .hero-copy:before { content: ""; position: absolute; left: 0; top: 58px; width: 4px; height: 132px; border-radius: 999px; background: linear-gradient(180deg, var(--red), var(--gold)); } .result-search { display: grid; gap: 18px; align-content: center; } .result-search .toolbar { padding: 8px; border: 1px solid rgba(224, 211, 189, .78); border-radius: 999px; background: rgba(255, 250, 241, .82); } .result-search .input { flex: 1 1 260px; border: 0; background: transparent; } .result-list { display: grid; gap: 18px; max-width: 920px; margin: 0 auto; } .result-card { position: relative; overflow: hidden; padding: 26px; border: 1px solid var(--line); border-radius: 18px; background: rgba(255, 253, 248, .82); box-shadow: 0 18px 48px rgba(57, 48, 36, .07); transition: transform .24s ease, border-color .24s ease, box-shadow .24s ease; } .result-card:after { content: ""; position: absolute; right: -70px; bottom: -80px; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(circle, rgba(196, 146, 69, .13), transparent 68%); transition: transform .28s ease; } .result-card:hover { border-color: rgba(196, 146, 69, .42); box-shadow: 0 24px 60px rgba(57, 48, 36, .11); } .result-card:hover:after { transform: scale(1.2); } .result-card span { display: inline-flex; margin-bottom: 12px; padding: 7px 12px; border-radius: 999px; color: var(--green-dark); background: #e8f0eb; font-weight: 800; font-size: 13px; } .result-card p { margin: 0; color: var(--muted); line-height: 1.8; } .tilt-card { transform: perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateY(var(--lift, 0)); transition: transform .18s ease, box-shadow .24s ease, border-color .24s ease; } .tilt-card:hover { --lift: -6px; } @media (max-width: 720px) { .hero-copy { padding-left: 0; } .hero-copy:before { display: none; } .result-search .toolbar { border-radius: 18px; } }