.whippet-examples details{margin-bottom:15px;transition:opacity .15s linear}.whippet-examples details:last-child{margin-bottom:0}.whippet-examples details:not([open]) .tab-label{opacity:.4}.whippet-examples details .tab-label{align-items:center;cursor:pointer;display:grid;gap:15px;grid-template-columns:50px 1fr}.whippet-examples details .tab-label .icon{align-items:center;align-self:start;aspect-ratio:1/1;background:#e2e1f4;border-radius:50%;display:flex;justify-content:center;padding:10px}.whippet-examples details .tab-label .icon svg{--size:30px;height:var(--size);width:var(--size)}.whippet-examples details .tab-label .title{font-size:1.25rem;font-weight:700;line-height:1.25em}.whippet-examples details .tab-content{margin:30px 0}.whippet-examples details .tab-content .image img{border-radius:10px;display:block;width:100%}.whippet-examples details .tab-content .text{margin-top:20px}.whippet-examples details .tab-content .text .title{font-size:1.5rem;font-weight:700;line-height:1.25em}.whippet-examples details .tab-content .text .button{display:flex}@media only screen and (min-width:769px){.whippet-examples{-moz-column-gap:10px;column-gap:10px;display:grid;grid-template-columns:repeat(var(--items),1fr)}.whippet-examples details{display:grid;grid-column:1/-1;grid-row:1/span 2;grid-template-columns:subgrid;grid-template-rows:subgrid;margin:0}.whippet-examples details .tab-label{align-items:start;cursor:pointer;display:grid;gap:10px;grid-column:var(--n)/span 1;grid-row:1;grid-template-columns:1fr 60px 1fr;grid-template-rows:60px 1fr;z-index:var(--n)}.whippet-examples details .tab-label .icon{grid-column:2/3;grid-row:1/2}.whippet-examples details .tab-label .icon svg{--size:40px}.whippet-examples details .tab-label .title{font-size:1rem;grid-column:-1/1;grid-row:2/3;text-align:center}.whippet-examples details::details-content{grid-column:1/-1;grid-row:2}.whippet-examples details:not([open])::details-content{display:none}.whippet-examples details[open] .tab-content{position:relative;z-index:1}.whippet-examples details .tab-content{display:grid;gap:20px;grid-template-columns:repeat(2,minmax(0,1fr));margin:40px 0 0}.whippet-examples details .tab-content .image{order:2}.whippet-examples details .tab-content .text{margin-top:0;order:1}}@media only screen and (min-width:1025px){.whippet-examples{-moz-column-gap:20px;column-gap:20px}}