#spark-code-features{width:100%;max-width:1000px;margin:100px auto 0;display:flex;align-items:center;gap:25px}#spark-code-features .block-left{width:400px;flex-shrink:0}#spark-code-features .block-left .text{width:100%}#spark-code-features .block-left .text h2{margin-bottom:50px}#spark-code-features .block-left .text h3{margin:25px 0}#spark-code-features .block-right{width:500px}#spark-code-features .block-right .row{display:flex;gap:10px;position:relative}#spark-code-features .block-right .row:nth-child(2){left:95px;top:-40px}#spark-code-features .block-right .row:nth-child(3){top:-80px}#spark-code-features .block-right .col{width:180px;height:200px;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center}#spark-code-features .block-right .col .hexa{width:100%;height:100%;display:flex;justify-content:center;align-items:center;background:var(--color-3);box-shadow:0 0 10px var(--color-3);clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);color:var(--color-4);cursor:pointer}#spark-code-features .block-right .col .hexa:hover{background-color:var(--color-6)}#spark-code-features .block-right .col .hexa svg{width:80px}@media screen and (max-width:800px){#spark-code-features{flex-direction:column-reverse}}#spark-code-screenshots{width:100%;max-width:1000px;margin:0 auto;display:flex;gap:25px;align-items:center;box-sizing:border-box;padding:10px}#spark-code-screenshots .screenshots{width:300px;min-height:500px;border-radius:2rem;background-color:var(--color-3);overflow:hidden;position:relative}#spark-code-screenshots .screenshots img{width:100%;display:block;transition:opacity .3s ease}#spark-code-screenshots .screenshots .button-icon{display:inline-flex;justify-content:center;align-items:center;box-sizing:border-box;cursor:pointer}#spark-code-screenshots .screenshots button.button-icon{outline:none;padding:0;border:none}#spark-code-screenshots .screenshots button.button-icon{width:40px;height:40px;border-radius:1rem;position:absolute;top:50%;transform:translateY(-50%);background-color:var(--color-4);color:var(--color-2)}#spark-code-screenshots .screenshots button.button-icon.btn-next{right:10px}#spark-code-screenshots .screenshots button.button-icon.btn-prev{left:10px}#spark-code-screenshots .text{flex:1;box-sizing:border-box;padding:10px;display:flex;flex-direction:column;align-items:center;gap:25px}#spark-code-screenshots .text p{font-size:1.3rem}@media screen and (max-width:700px){#spark-code-screenshots{flex-direction:column-reverse}}