.material-studio{padding:120px 0;background:#eee7df}.studio-heading{display:grid;grid-template-columns:1.25fr .75fr;gap:90px;align-items:end;margin-bottom:55px}.studio-heading h2{margin-bottom:0}.studio-heading>p{color:var(--muted);font-size:17px;margin:0}.studio-stage{display:grid;grid-template-columns:1.2fr .8fr;min-height:720px;background:white;box-shadow:0 30px 80px rgba(54,29,23,.12)}.studio-stage figure{position:relative;margin:0;overflow:hidden}.studio-stage figure img{width:100%;height:100%;object-fit:cover}.studio-stage figcaption{position:absolute;left:24px;bottom:24px;padding:10px 14px;background:rgba(61,19,26,.92);color:white;text-transform:uppercase;letter-spacing:.15em;font-size:10px}.palette-panel{padding:52px 46px;display:flex;flex-direction:column}.palette-kicker{text-transform:uppercase;letter-spacing:.16em;font-size:10px;font-weight:bold;color:var(--accent);margin:0 0 20px}.palette-options{display:grid;grid-template-columns:1fr 1fr;gap:8px}.palette-options button{display:flex;align-items:center;gap:11px;padding:12px;border:1px solid var(--line);background:#faf8f5;text-align:left;cursor:pointer;transition:.25s}.palette-options button:hover,.palette-options button.active{border-color:var(--wine);box-shadow:inset 0 0 0 1px var(--wine);transform:translateY(-2px)}.palette-options i{width:35px;height:35px;flex:0 0 35px;border-radius:50%;background:var(--swatch);box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}.palette-options span{font-weight:800;color:var(--ink)}.palette-options small{display:block;margin-top:2px;color:var(--muted);font-weight:400;font-size:10px}.palette-detail{position:relative;margin:30px 0;padding:30px 30px 30px 38px;background:#f2ece6;overflow:hidden;min-height:225px}.palette-detail:before{content:"";position:absolute;left:0;top:0;bottom:0;width:8px;background:var(--active-colour);transition:background .45s}.palette-detail>span{font-size:9px;text-transform:uppercase;letter-spacing:.16em;color:var(--muted)}.palette-detail h3{font:400 34px Georgia,serif;color:var(--wine);margin:8px 0 12px}.palette-detail p{color:var(--muted);font-size:14px;line-height:1.65}.palette-detail b{display:block;margin-top:18px;font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--active-colour);transition:color .45s}
@media(max-width:1050px){.studio-heading,.studio-stage{grid-template-columns:1fr}.studio-stage figure{min-height:520px}.palette-panel{padding:42px}}
@media(max-width:700px){.material-studio{padding:75px 0}.studio-heading{gap:24px;margin-bottom:35px}.studio-stage figure{min-height:410px}.palette-panel{padding:30px 20px}.palette-options{grid-template-columns:1fr}.palette-detail{padding:26px 24px 26px 32px}}