/* ========================================================= YUDA CLINIC GINZA HOME PAGE / FIRST VIEW 2026-08-10 ========================================================= */ /* ========================================================= HERO ========================================================= */ .yuda-home-hero { position: relative; width: 100%; min-height: clamp(560px, 56.25vw, 820px); overflow: hidden; background: #080808; isolation: isolate; } /* ========================================================= HERO VIDEO / PC・MOBILE ========================================================= */ .yuda-home-hero-video { position: absolute; inset: 0; z-index: 0; display: block; pointer-events: none; width: 100%; height: 100%; object-fit: cover; object-position: center center; filter: brightness(0.68) contrast(1.02) saturate(0.92); transform: scale(1.01); } /* ========================================================= MOBILE FALLBACK IMAGE ========================================================= */ .yuda-home-hero-sp-visual { display: none; position: absolute; inset: 0; z-index: 0; background-image: url("../../../_common/img/img_mainvisual_video_bg_sp.webp"); background-position: center center; background-repeat: no-repeat; background-size: cover; } /* ========================================================= PC OVERLAY ========================================================= */ .yuda-home-hero-shade { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient( 90deg, rgba(0, 0, 0, 0.68) 0%, rgba(0, 0, 0, 0.60) 25%, rgba(0, 0, 0, 0.46) 45%, rgba(0, 0, 0, 0.28) 65%, rgba(0, 0, 0, 0.12) 82%, rgba(0, 0, 0, 0.04) 100% ); } /* ========================================================= HERO COPY ========================================================= */ .yuda-home-hero-copy { position: relative; z-index: 2; width: min(1180px, calc(100% - 80px)); min-height: inherit; margin: 0 auto; padding: 84px 0 72px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; box-sizing: border-box; color: #fff; } .yuda-home-hero-copy > * { max-width: 740px; } /* ========================================================= EYEBROW ========================================================= */ .yuda-home-hero-eyebrow { margin: 0 0 18px; font-size: 14px; font-weight: 400; line-height: 1.7; letter-spacing: 0.12em; color: rgba(255, 255, 255, 0.94); text-shadow: 0 2px 8px rgba(0, 0, 0, 0.65); } /* ========================================================= TITLE ========================================================= */ .yuda-home-hero-title { margin: 0; max-width: 760px; font-size: clamp(42px, 4.15vw, 66px); font-weight: 400; line-height: 1.38; letter-spacing: 0.035em; color: #fff; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.70), 0 6px 18px rgba(0, 0, 0, 0.55), 0 12px 36px rgba(0, 0, 0, 0.35); } /* ========================================================= LEAD ========================================================= */ .yuda-home-hero-lead { margin: 28px 0 0; max-width: 640px; font-size: 17px; font-weight: 400; line-height: 2; letter-spacing: 0.035em; color: rgba(255, 255, 255, 0.96); text-shadow: 0 2px 8px rgba(0, 0, 0, 0.70); } /* ========================================================= BUTTON AREA ========================================================= */ .yuda-home-hero-buttons { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; } /* ========================================================= BUTTON COMMON ========================================================= */ .yuda-home-hero-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 220px; min-height: 56px; padding: 12px 28px; box-sizing: border-box; border-radius: 2px; font-size: 14px; font-weight: 400; line-height: 1.4; letter-spacing: 0.055em; text-decoration: none; -webkit-tap-highlight-color: transparent; transition: background-color 0.22s ease, border-color 0.22s ease, color 0.22s ease, opacity 0.22s ease; } /* ========================================================= CASE BUTTON ========================================================= */ .yuda-home-hero-btn-sub { background: rgba(15, 15, 15, 0.38); border: 1px solid rgba(255, 255, 255, 0.82); color: #fff; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.16); } /* ========================================================= RESERVATION BUTTON ========================================================= */ .yuda-home-hero-btn-main { background: rgba(255, 255, 255, 0.97); border: 1px solid #fff; color: #242424; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.18); } /* ========================================================= BUTTON HOVER ========================================================= */ @media (hover: hover) { .yuda-home-hero-btn-sub:hover { background: #fff; color: #222; } .yuda-home-hero-btn-main:hover { background: rgba(255, 255, 255, 0.88); } } /* ========================================================= TABLET ========================================================= */ @media screen and (min-width: 768px) and (max-width: 1100px) { .yuda-home-hero-copy { width: calc(100% - 64px); } .yuda-home-hero-title { font-size: clamp(39px, 5vw, 54px); } .yuda-home-hero-lead { font-size: 16px; } } /* ========================================================= MOBILE / iPHONE ========================================================= */ @media screen and (max-width: 767px) { /* ----------------------------------------- HERO 高さを抑えて下寄りを解消 ----------------------------------------- */ .yuda-home-hero { min-height: 560px; background: #070707; } /* ----------------------------------------- iPhoneでもスマホ専用動画を表示 ----------------------------------------- */ .yuda-home-hero-video { z-index: 1; display: block !important; width: 100%; height: 100%; object-fit: cover; object-position: center center; filter: brightness(0.72) contrast(1.02) saturate(0.94); transform: scale(1.01); } /* ----------------------------------------- 動画読み込み前の背景画像 ----------------------------------------- */ .yuda-home-hero-sp-visual { z-index: 0; display: block; background-position: center center; filter: brightness(0.72) contrast(1.02); } /* ----------------------------------------- SP OVERLAY PCほど暗くしない ----------------------------------------- */ .yuda-home-hero-shade { z-index: 2; background: linear-gradient( 180deg, rgba(0, 0, 0, 0.10) 0%, rgba(0, 0, 0, 0.14) 25%, rgba(0, 0, 0, 0.30) 48%, rgba(0, 0, 0, 0.48) 70%, rgba(0, 0, 0, 0.62) 100% ); } /* ----------------------------------------- COPY ★ 上に移動する重要部分 ----------------------------------------- */ .yuda-home-hero-copy { z-index: 3; width: calc(100% - 40px); min-height: 560px; margin: 0 auto; padding: 28px 0 40px; justify-content: flex-start; transform: none; } .yuda-home-hero-copy > * { max-width: 100%; } /* ----------------------------------------- EYEBROW ----------------------------------------- */ .yuda-home-hero-eyebrow { margin: 0 0 13px; font-size: 11px; line-height: 1.65; letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.94); text-shadow: 0 2px 7px rgba(0, 0, 0, 0.70); } /* ----------------------------------------- TITLE ----------------------------------------- */ .yuda-home-hero-title { max-width: 100%; font-size: clamp(29px, 7.8vw, 35px); line-height: 1.46; letter-spacing: 0.01em; color: #fff; text-shadow: 0 2px 3px rgba(0, 0, 0, 0.80), 0 5px 15px rgba(0, 0, 0, 0.58), 0 10px 28px rgba(0, 0, 0, 0.38); } /* ----------------------------------------- LEAD ----------------------------------------- */ .yuda-home-hero-lead { margin-top: 18px; font-size: 14px; line-height: 1.82; letter-spacing: 0.02em; color: rgba(255, 255, 255, 0.96); text-shadow: 0 2px 7px rgba(0, 0, 0, 0.75); } /* ----------------------------------------- BUTTONS ----------------------------------------- */ .yuda-home-hero-buttons { width: 100%; margin-top: 25px; gap: 9px; } .yuda-home-hero-btn { width: 100%; min-width: 0; min-height: 52px; padding: 11px 18px; font-size: 13px; } .yuda-home-hero-btn-sub { background: rgba(10, 10, 10, 0.30); } .yuda-home-hero-btn-main { background: rgba(255, 255, 255, 0.97); } } /* ========================================================= SMALL iPHONE ========================================================= */ @media screen and (max-width: 390px) { .yuda-home-hero { min-height: 540px; } .yuda-home-hero-copy { width: calc(100% - 32px); min-height: 540px; padding: 24px 0 36px; justify-content: flex-start; transform: none; } .yuda-home-hero-title { font-size: 28px; } .yuda-home-hero-lead { font-size: 13px; } } /* ========================================================= REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { .yuda-home-hero-btn { transition: none; } .yuda-home-hero-video { transform: none; } } /* モニター募集を一時的に非表示 */ body.home #contents_index_monitor { display: none !important; } /* ========================================================= HOME PREMIUM CONVERSION LAYOUT v2.1.17 ========================================================= */ #yuda-home-premium { --yh-bg: #f8f3ef; --yh-bg-soft: #fffaf7; --yh-panel: #fff; --yh-line: rgba(189,161,133,.25); --yh-ink: #2f2724; --yh-copy: #5b504b; --yh-soft: #7f746e; --yh-gold: #b59262; --yh-gold-deep: #8d6f45; --yh-shadow: 0 18px 45px rgba(77,58,49,.09); color: var(--yh-ink); background: linear-gradient(180deg,#fffdfb 0%,#f8f2ee 100%); font-family: "Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif; } #yuda-home-premium *,#yuda-home-premium *::before,#yuda-home-premium *::after{box-sizing:border-box} #yuda-home-premium img{display:block;width:100%;height:auto} #yuda-home-premium a{text-decoration:none} #yuda-home-premium .yh-container{width:min(1180px,calc(100% - 32px));margin:0 auto} #yuda-home-premium section{padding:72px 0} #yuda-home-premium .yh-kicker{margin:0 0 11px;color:var(--yh-gold-deep);font-family:Georgia,"Times New Roman",serif;font-size:11px;font-weight:700;line-height:1.4;letter-spacing:.18em} #yuda-home-premium .yh-section-head{margin-bottom:27px} #yuda-home-premium .yh-section-head h2{margin:0 0 13px!important;padding:0!important;border:0!important;background:none!important;color:var(--yh-ink)!important;font-family:"Yu Mincho","Hiragino Mincho ProN","Noto Serif JP",serif!important;font-size:clamp(30px,3vw,42px)!important;line-height:1.45!important;letter-spacing:.02em} #yuda-home-premium .yh-section-head h2::before,#yuda-home-premium .yh-section-head h2::after{display:none!important;content:none!important} #yuda-home-premium .yh-section-head>p:last-child{margin:0;max-width:760px;color:var(--yh-copy);font-size:15px;line-height:1.95} #yuda-home-premium .yh-btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:14px 24px;border-radius:999px;font-size:15px;font-weight:700;line-height:1.4;transition:transform .2s ease,box-shadow .2s ease} #yuda-home-premium .yh-btn:hover,#yuda-home-premium .yh-btn:focus-visible{transform:translateY(-1px)} #yuda-home-premium .yh-btn--primary{background:linear-gradient(135deg,var(--yh-gold),var(--yh-gold-deep));color:#fff;box-shadow:0 16px 32px rgba(141,111,69,.22)} #yuda-home-premium .yh-btn--secondary{border:1px solid rgba(141,111,69,.28);background:rgba(255,255,255,.88);color:var(--yh-ink)} #yuda-home-premium .yh-text-link{display:inline-flex;align-items:center;gap:6px;color:var(--yh-gold-deep);font-size:14px;font-weight:700} #yuda-home-premium .yh-focus-nav{padding:18px 0;background:#fff;border-top:1px solid rgba(181,146,98,.14);border-bottom:1px solid rgba(181,146,98,.18)} #yuda-home-premium .yh-focus-nav__grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px} #yuda-home-premium .yh-focus-nav a{display:grid;gap:4px;padding:13px 14px;border-radius:16px;color:var(--yh-ink);transition:background .2s ease} #yuda-home-premium .yh-focus-nav a:hover{background:#fbf6f2} #yuda-home-premium .yh-focus-nav strong{font-size:14px;line-height:1.4} #yuda-home-premium .yh-focus-nav span{color:var(--yh-soft);font-family:Georgia,"Times New Roman",serif;font-size:9px;letter-spacing:.11em} #yuda-home-premium .yh-problems,#yuda-home-premium .yh-strengths,#yuda-home-premium .yh-articles{background:var(--yh-bg-soft)} #yuda-home-premium .yh-problems__grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:15px} #yuda-home-premium .yh-problems__grid a{display:grid;gap:8px;min-height:144px;padding:22px 18px;border:1px solid var(--yh-line);border-radius:23px;background:#fff;color:var(--yh-ink);box-shadow:0 12px 30px rgba(77,58,49,.05)} #yuda-home-premium .yh-problems__grid strong{font-size:16px;line-height:1.55} #yuda-home-premium .yh-problems__grid span{color:var(--yh-soft);font-size:12px;line-height:1.7} #yuda-home-premium .yh-core-services__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px} #yuda-home-premium .yh-core-card{display:grid;grid-template-columns:minmax(200px,.92fr) minmax(0,1.08fr);overflow:hidden;border:1px solid var(--yh-line);border-radius:28px;background:#fff;box-shadow:var(--yh-shadow)} #yuda-home-premium .yh-core-card:last-child{grid-column:1/-1;grid-template-columns:minmax(280px,.8fr) minmax(0,1.2fr)} #yuda-home-premium .yh-core-card__image{background:linear-gradient(180deg,#f8f2ee,#fff)} #yuda-home-premium .yh-core-card__image img{height:100%;min-height:286px;object-fit:cover} #yuda-home-premium .yh-core-card__body{display:grid;align-content:start;gap:10px;padding:24px 24px 26px} #yuda-home-premium .yh-core-card__eyebrow,#yuda-home-premium .yh-case-card__category,#yuda-home-premium .yh-article-card__meta{margin:0;color:var(--yh-gold-deep);font-family:Georgia,"Times New Roman",serif;font-size:10px;font-weight:700;letter-spacing:.16em} #yuda-home-premium .yh-core-card h3,#yuda-home-premium .yh-case-card h3,#yuda-home-premium .yh-strength-card h3,#yuda-home-premium .yh-article-card h3,#yuda-home-premium .yh-cases__cta h3,#yuda-home-premium .yh-final-cta h2,#yuda-home-premium .yh-links__copy h2{margin:0!important;padding:0!important;border:0!important;background:none!important;color:var(--yh-ink)!important;font-family:"Yu Mincho","Hiragino Mincho ProN",serif!important} #yuda-home-premium .yh-core-card h3::before,#yuda-home-premium .yh-core-card h3::after,#yuda-home-premium .yh-case-card h3::before,#yuda-home-premium .yh-case-card h3::after,#yuda-home-premium .yh-strength-card h3::before,#yuda-home-premium .yh-strength-card h3::after,#yuda-home-premium .yh-article-card h3::before,#yuda-home-premium .yh-article-card h3::after,#yuda-home-premium .yh-cases__cta h3::before,#yuda-home-premium .yh-cases__cta h3::after,#yuda-home-premium .yh-final-cta h2::before,#yuda-home-premium .yh-final-cta h2::after,#yuda-home-premium .yh-links__copy h2::before,#yuda-home-premium .yh-links__copy h2::after{display:none!important;content:none!important} #yuda-home-premium .yh-core-card h3{font-size:29px!important;line-height:1.45!important} #yuda-home-premium .yh-core-card__lead{margin:0;color:#443834;font-size:15px;font-weight:700;line-height:1.85} #yuda-home-premium .yh-core-card__text,#yuda-home-premium .yh-case-card p,#yuda-home-premium .yh-strength-card p,#yuda-home-premium .yh-cases__cta p,#yuda-home-premium .yh-final-cta p,#yuda-home-premium .yh-links__copy p{margin:0;color:var(--yh-copy);font-size:14px;line-height:1.9} #yuda-home-premium .yh-cases{background:linear-gradient(180deg,#fffdfb,#f8f2ee)} #yuda-home-premium .yh-cases__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px} #yuda-home-premium .yh-case-card{overflow:hidden;border:1px solid var(--yh-line);border-radius:24px;background:#fff;box-shadow:0 14px 38px rgba(77,58,49,.08)} #yuda-home-premium .yh-case-card__image{position:relative;display:block;overflow:hidden} #yuda-home-premium .yh-case-card__image img{aspect-ratio:4/5;object-fit:cover;transition:transform .35s ease} #yuda-home-premium .yh-case-card__image span{position:absolute;left:14px;right:14px;bottom:14px;display:flex;align-items:center;justify-content:center;min-height:39px;border-radius:999px;background:rgba(39,31,28,.82);color:#fff;font-size:12px;font-weight:700;letter-spacing:.08em} #yuda-home-premium .yh-case-card:hover .yh-case-card__image img{transform:scale(1.035)} #yuda-home-premium .yh-case-card__body{display:grid;gap:10px;padding:18px 18px 20px} #yuda-home-premium .yh-case-card h3{font-size:22px!important;line-height:1.5!important} #yuda-home-premium .yh-cases__cta{display:flex;align-items:center;justify-content:space-between;gap:18px 32px;margin-top:26px;padding:28px 30px;border-radius:28px;background:#fff;border:1px solid var(--yh-line);box-shadow:var(--yh-shadow)} #yuda-home-premium .yh-cases__cta h3{margin-bottom:8px!important;font-size:28px!important;line-height:1.5!important} #yuda-home-premium .yh-strengths__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px} #yuda-home-premium .yh-strength-card{padding:28px 24px;border-radius:26px;background:#fff;border:1px solid var(--yh-line);box-shadow:0 12px 32px rgba(77,58,49,.05)} #yuda-home-premium .yh-strength-card>span{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;margin-bottom:18px;border-radius:50%;background:linear-gradient(135deg,rgba(181,146,98,.16),rgba(141,111,69,.30));color:var(--yh-gold-deep);font-family:Georgia,"Times New Roman",serif;font-weight:700} #yuda-home-premium .yh-strength-card h3{margin-bottom:12px!important;font-size:25px!important;line-height:1.5!important} #yuda-home-premium .yh-links{padding-top:56px;padding-bottom:56px} #yuda-home-premium .yh-links__inner{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:28px;padding:34px;border-radius:30px;background:linear-gradient(135deg,rgba(245,236,232,.82),rgba(255,255,255,.96));border:1px solid var(--yh-line)} #yuda-home-premium .yh-links__copy h2{margin-bottom:12px!important;font-size:32px!important;line-height:1.45!important} #yuda-home-premium .yh-links__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px} #yuda-home-premium .yh-links__grid a{display:grid;gap:8px;min-height:132px;padding:22px 20px;border-radius:22px;background:#fff;border:1px solid rgba(181,146,98,.18);box-shadow:0 12px 28px rgba(77,58,49,.05);color:var(--yh-ink)} #yuda-home-premium .yh-links__grid strong{font-size:18px;line-height:1.5} #yuda-home-premium .yh-links__grid span{color:var(--yh-soft);font-size:13px;line-height:1.8} #yuda-home-premium .yh-articles__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px} #yuda-home-premium .yh-article-card{overflow:hidden;border-radius:24px;background:#fff;border:1px solid var(--yh-line);box-shadow:0 14px 34px rgba(77,58,49,.06)} #yuda-home-premium .yh-article-card__image img{aspect-ratio:4/3;object-fit:cover} #yuda-home-premium .yh-article-card__body{display:grid;gap:10px;padding:18px 18px 22px} #yuda-home-premium .yh-article-card h3{font-size:20px!important;line-height:1.55!important} #yuda-home-premium .yh-article-card h3 a{color:var(--yh-ink)} #yuda-home-premium .yh-article-card__link{color:var(--yh-gold-deep);font-size:14px;font-weight:700} #yuda-home-premium .yh-final-cta{background:linear-gradient(135deg,#3b2f2a,#6a5145)} #yuda-home-premium .yh-final-cta__inner{display:flex;align-items:center;justify-content:space-between;gap:24px 36px} #yuda-home-premium .yh-final-cta .yh-kicker,#yuda-home-premium .yh-final-cta h2,#yuda-home-premium .yh-final-cta p{color:#fff!important} #yuda-home-premium .yh-final-cta h2{margin-bottom:14px!important;font-size:clamp(32px,3vw,44px)!important;line-height:1.45!important} #yuda-home-premium .yh-final-cta__actions{display:flex;flex-wrap:wrap;gap:12px} #yuda-home-premium .yh-final-cta .yh-btn--secondary{border-color:rgba(255,255,255,.28);background:rgba(255,255,255,.08);color:#fff} @media(max-width:1100px){ #yuda-home-premium .yh-focus-nav__grid{grid-template-columns:repeat(3,minmax(0,1fr))} #yuda-home-premium .yh-problems__grid{grid-template-columns:repeat(3,minmax(0,1fr))} #yuda-home-premium .yh-core-services__grid,#yuda-home-premium .yh-cases__grid,#yuda-home-premium .yh-articles__grid{grid-template-columns:repeat(2,minmax(0,1fr))} #yuda-home-premium .yh-core-card:last-child{grid-column:auto;grid-template-columns:minmax(200px,.92fr) minmax(0,1.08fr)} #yuda-home-premium .yh-links__inner{grid-template-columns:1fr} } @media(max-width:767px){ #yuda-home-premium section{padding:54px 0} #yuda-home-premium .yh-container{width:calc(100% - 24px)} #yuda-home-premium .yh-focus-nav{padding:12px 0} #yuda-home-premium .yh-focus-nav__grid{display:flex;overflow-x:auto;gap:8px;padding-bottom:2px;scrollbar-width:none} #yuda-home-premium .yh-focus-nav__grid::-webkit-scrollbar{display:none} #yuda-home-premium .yh-focus-nav a{flex:0 0 auto;min-width:132px;padding:11px 12px;background:#fbf7f3} #yuda-home-premium .yh-problems__grid,#yuda-home-premium .yh-core-services__grid,#yuda-home-premium .yh-cases__grid,#yuda-home-premium .yh-strengths__grid,#yuda-home-premium .yh-links__grid,#yuda-home-premium .yh-articles__grid{grid-template-columns:1fr} #yuda-home-premium .yh-problems__grid a{min-height:auto} #yuda-home-premium .yh-core-card,#yuda-home-premium .yh-core-card:last-child{grid-template-columns:1fr} #yuda-home-premium .yh-core-card__image img{min-height:220px;max-height:320px} #yuda-home-premium .yh-core-card__body,#yuda-home-premium .yh-case-card__body,#yuda-home-premium .yh-strength-card,#yuda-home-premium .yh-article-card__body{padding-left:17px;padding-right:17px} #yuda-home-premium .yh-core-card h3,#yuda-home-premium .yh-cases__cta h3,#yuda-home-premium .yh-strength-card h3,#yuda-home-premium .yh-links__copy h2{font-size:24px!important} #yuda-home-premium .yh-cases__cta,#yuda-home-premium .yh-final-cta__inner{display:grid;gap:16px} #yuda-home-premium .yh-links__inner{padding:20px 16px} #yuda-home-premium .yh-final-cta h2{font-size:28px!important} } /* v2.1.18: focus treatment cards — show the full artwork without cropping */ #yuda-home-premium .yh-core-card__image{ display:flex; align-items:center; justify-content:center; padding:12px; background:#f6f1ed; } #yuda-home-premium .yh-core-card__image img{ width:100%; height:auto; min-height:0; max-height:360px; object-fit:contain; object-position:center; border-radius:18px; } #yuda-home-premium .yh-core-card:last-child .yh-core-card__image img{ max-height:400px; } @media (max-width:767px){ #yuda-home-premium .yh-core-card__image{padding:10px} #yuda-home-premium .yh-core-card__image img{ max-height:none; aspect-ratio:auto; } } /* v2.1.20: representative cases — full artwork, no desktop cropping */ #yuda-home-premium .yh-cases__grid{ grid-template-columns:repeat(3,minmax(0,1fr)); align-items:stretch; } #yuda-home-premium .yh-case-card{ display:flex; flex-direction:column; min-width:0; } #yuda-home-premium .yh-case-card__image{ display:flex; align-items:center; justify-content:center; aspect-ratio:1 / 1; padding:12px; background:#f5efeb; } #yuda-home-premium .yh-case-card__image img{ width:100%; height:100%; aspect-ratio:auto; object-fit:contain; object-position:center; border-radius:16px; transition:transform .35s ease; } #yuda-home-premium .yh-case-card__body{ flex:1; } #yuda-home-premium .yh-case-card:nth-child(4){ grid-column:1 / 2; } #yuda-home-premium .yh-case-card:nth-child(5){ grid-column:2 / 3; } @media(max-width:1100px){ #yuda-home-premium .yh-cases__grid{grid-template-columns:repeat(2,minmax(0,1fr))} #yuda-home-premium .yh-case-card:nth-child(4), #yuda-home-premium .yh-case-card:nth-child(5){grid-column:auto} } @media(max-width:767px){ #yuda-home-premium .yh-cases__grid{grid-template-columns:1fr} #yuda-home-premium .yh-case-card__image{ aspect-ratio:auto; min-height:0; padding:10px; } #yuda-home-premium .yh-case-card__image img{ width:100%; height:auto; max-height:none; } }