.code-carousel{display:grid;grid-template-columns:5fr 7fr;grid-gap:var(--spacer-lg);overflow:hidden;.code-carousel-nav{z-index:1}.code-carousel-trigger:not(.active){color:var(--fg-800);cursor:pointer;p{display:none}&:hover{color:var(--primary)}}.code-carousel-trigger{border-left:2px solid var(--border);padding:var(--spacer-md) 0 var(--spacer-md) var(--spacer-md);h3,p{margin:0}&.active{border-color:var(--primary)}}.code-carousel-item{opacity:0;transition:all .2s ease-in-out;z-index:0;.codeblock-wrapper{.codeblock{margin-bottom:0}}&.active{display:block;opacity:1;z-index:1;transform:translateY(0)}&.before{transform:translateY(-20%)}&.after{transform:translateY(20%)}}.code-carousel-content{display:grid;>*{grid-row:1;grid-column:1}}}@media (max-width:768px){.code-carousel{grid-template-columns:1fr}}