.grape-catalog{display:grid;grid-template-columns:.75fr 1.25fr;gap:35px 70px;align-items:start;background:#fff}
.catalog-heading{grid-row:1/3}.catalog-heading p{max-width:390px;color:#667267;line-height:1.7}
.variety-selector{display:flex;flex-wrap:wrap;gap:8px}
.variety-selector button{padding:10px 14px;border:1px solid #cbdac4;border-radius:999px;background:#fff;color:var(--green);font:700 11px 'DM Sans',Arial,sans-serif;text-transform:uppercase;letter-spacing:.03em;cursor:pointer;transition:.2s}
.variety-selector button:hover,.variety-selector button.active{background:var(--green);border-color:var(--green);color:#fff;transform:translateY(-2px)}
.grape-detail{display:grid;grid-template-columns:230px 1fr;min-height:350px;background:var(--cream);transition:opacity .16s,transform .16s}.grape-detail.changing{opacity:.35;transform:translateY(5px)}
.grape-illustration{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;color:#fff;transition:background .25s}.grape-illustration span{font-size:130px;filter:drop-shadow(10px 16px 12px #17202a44)}.grape-illustration small{font-size:9px;letter-spacing:.18em;font-weight:700}
.grape-illustration.red{background:linear-gradient(145deg,#8e2941,#40152a)}.grape-illustration.ruby{background:linear-gradient(145deg,#b52f4c,#5a162f)}.grape-illustration.green{background:linear-gradient(145deg,#95b936,#3f712a)}.grape-illustration.gold{background:linear-gradient(145deg,#c7cf56,#668934)}
.grape-bunch{position:relative;display:block!important;width:150px;height:190px;padding:0;filter:drop-shadow(9px 14px 9px #17202a55)!important}
.grape-bunch:before{content:'';position:absolute;width:9px;height:46px;background:#54772a;border-radius:8px;top:0;left:68px;transform:rotate(12deg)}
.grape-bunch:after{content:'';position:absolute;width:55px;height:27px;background:#6d9937;border-radius:100% 0 100% 0;top:8px;left:72px;transform:rotate(-14deg)}
.grape-bunch i{position:absolute;display:block;width:34px;height:34px;border-radius:50%;background:radial-gradient(circle at 32% 28%,#dc7182,#9c2445 65%,#64152e);box-shadow:inset -3px -4px 6px #53142e55}
.grape-bunch i:nth-child(1){left:57px;top:31px}.grape-bunch i:nth-child(2){left:37px;top:52px}.grape-bunch i:nth-child(3){left:77px;top:52px}.grape-bunch i:nth-child(4){left:17px;top:75px}.grape-bunch i:nth-child(5){left:57px;top:74px}.grape-bunch i:nth-child(6){left:97px;top:75px}.grape-bunch i:nth-child(7){left:28px;top:99px}.grape-bunch i:nth-child(8){left:68px;top:98px}.grape-bunch i:nth-child(9){left:88px;top:102px}.grape-bunch i:nth-child(10){left:42px;top:123px}.grape-bunch i:nth-child(11){left:78px;top:126px}.grape-bunch i:nth-child(12){left:52px;top:148px}.grape-bunch i:nth-child(13){left:68px;top:151px}.grape-bunch i:nth-child(14){left:60px;top:171px}.grape-bunch i:nth-child(15){display:none}
.system-access{border:1px solid var(--green);border-radius:999px;padding:10px 15px!important;color:var(--green)!important;font-weight:700;white-space:nowrap}.system-access:hover{background:var(--green);color:#fff!important}
.grape-illustration.green .grape-bunch i,.grape-illustration.gold .grape-bunch i{background:radial-gradient(circle at 32% 28%,#edf59a,#a8bf3e 64%,#668a29);box-shadow:inset -3px -4px 6px #536e2455}
.grape-illustration.ruby .grape-bunch i{background:radial-gradient(circle at 32% 28%,#f07b86,#bd2c4b 65%,#7b1734)}
.grape-illustration.red,.grape-illustration.ruby,.grape-illustration.green,.grape-illustration.gold{background:linear-gradient(145deg,#f0f3eb,#dce5d5);color:#52634f}
.grape-copy{padding:32px}.grape-number{font-size:10px;letter-spacing:.16em;color:var(--green);font-weight:700}.grape-copy h3{font:600 38px 'Playfair Display',serif;margin:10px 0 15px}.grape-copy>p{color:#667267;line-height:1.65;margin:0}
.grape-features{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin-top:28px;padding-top:20px;border-top:1px solid #d5dcd1}.grape-features small,.grape-features strong{display:block}.grape-features small{font-size:8px;letter-spacing:.14em;color:#7a8579;margin-bottom:6px}.grape-features strong{font-size:12px;line-height:1.45}
@media(max-width:900px){.grape-catalog{grid-template-columns:1fr}.catalog-heading{grid-row:auto}.grape-detail{grid-template-columns:180px 1fr}}
@media(max-width:600px){.grape-detail{grid-template-columns:1fr}.grape-illustration{min-height:220px}.grape-features{grid-template-columns:1fr}.variety-selector{display:grid;grid-template-columns:1fr 1fr}.variety-selector button:last-child{grid-column:1/-1}}