.button-wrapper[data-astro-cid-bd2qewjy]{display:flex;gap:var(--size-2);flex-wrap:wrap}.webp-converter[data-astro-cid-ka66dpxd]{.muted{color:var(--clr-primary-700)}.converter-title{font-size:var(--fs-600);font-weight:600}.converter-panel{background:hsl(from var(--clr-primary-900) H S L / 6%);border-radius:var(--border-radius-card);display:grid;gap:var(--size-1);padding:var(--size-2)}.controls{display:grid;grid-template-columns:repeat(auto-fit,minmax(40rem,1fr));gap:var(--size-2);.converter-dropzone{background:hsl(from var(--clr-primary-900) H S L / 6%);border-radius:var(--border-radius-card);border:2px dashed var(--clr-primary-500);display:flex;flex-direction:column;height:100%;justify-content:space-evenly;padding:var(--size-3);position:relative;text-align:center;transition:background-color .2s ease,border-color .2s ease;.converter-input-group{display:flex;gap:var(--size-1);.converter-btn{height:4.5rem}}&.dragover{background:hsl(from var(--clr-secondary-900) H S L / 10%);border-color:var(--clr-secondary-900)}input[type=file]{display:none}}}.quality-resize-controls{display:grid;gap:var(--size-1);.resize-inputs{display:flex;gap:var(--size-1);label{display:grid;gap:1rem;width:50%;input{caret-color:var(--clr-primary-900);padding:1rem .5rem}}}.aspect-ratio-controls{display:flex;gap:var(--size-1);label{width:50%}}.converter-input{background:var(--clr-background);border-radius:var(--border-radius-input-field);border:1px solid var(--clr-primary-300);color:var(--clr-body);padding:.6rem .8rem;width:100%}.converter-grid{display:grid;gap:var(--size-2);grid-template-columns:1fr;@media (width >= 40em){grid-template-columns:repeat(2,1fr)}@media (width >= 62.5em){grid-template-columns:repeat(3,1fr)}}.converter-card{background:var(--clr-background);border-radius:var(--border-radius-card);border:1px solid var(--clr-primary-300);display:grid;gap:.6rem;grid-template-rows:auto 1fr auto;padding:var(--size-1);.converter-thumb{aspect-ratio:4 / 3;background:hsl(from var(--clr-primary-900) H S L / 8%);border-radius:var(--border-radius-img);border:1px solid var(--clr-primary-300);display:grid;overflow:hidden;place-items:center;img{height:100%;object-fit:contain;width:100%}}.converter-meta{font-size:var(--fs-300)}.converter-tags{display:flex;gap:.6rem;justify-content:space-between;.converter-tag{background:hsl(from var(--clr-primary-900) H S L / 10%);border-radius:999px;border:1px solid var(--clr-primary-300);color:var(--clr-primary-500);font-size:var(--fs-200);padding:.3rem .6rem}}.converter-card-actions{display:flex;gap:.6rem;justify-content:space-between}}}.converter-progress{background:hsl(from var(--clr-primary-900) H S L / 10%);border-radius:999px;border:1px solid var(--clr-primary-300);height:10px;overflow:hidden;div{background:linear-gradient(90deg,var(--clr-secondary-900),var(--clr-primary-900));height:100%;transition:width .15s ease-out;width:0%}}.converter-alerts{display:grid;gap:.6rem;margin-top:.8rem;.converter-alert{background:hsl(from var(--clr-alert-yellow-900) H S L / 14%);border-left:4px solid var(--clr-alert-yellow-900);border-radius:var(--border-radius-card);color:var(--clr-primary-900);padding:.8rem 1rem;&.error{background:hsl(from var(--clr-alert-red-900) H S L / 14%);border-left-color:var(--clr-alert-red-900);color:var(--clr-alert-red-900)}}}}.before-and-after-section[data-astro-cid-5tfvfpxr]{display:grid;gap:var(--size-3);margin-block:var(--size-5);padding:var(--size-5) 0;.section-title{display:grid;justify-content:center;margin-bottom:var(--size-3);text-align:center;h2{margin-bottom:var(--size-3)}}.image-wrapper{display:grid;gap:var(--size-2);grid-template-columns:repeat(auto-fit,minmax(250px,1fr));justify-items:center;width:100%;img{border-radius:var(--border-radius-img);box-shadow:var(--box-shadow);max-width:100%}}.compare-image-wrapper{display:grid;gap:var(--size-1);justify-items:center;margin-block-start:var(--size-5);text-align:center;.compare-image{border-radius:var(--border-radius-img);box-shadow:var(--box-shadow);margin-inline:auto;max-width:100%}span{color:var(--color-text-secondary);font-size:var(--size-0)}}}.cta-wrapper[data-astro-cid-lsnrhyke]{align-items:center;background:radial-gradient(#2e3c60,#071231);color:var(--clr-primary-100);display:flex;padding:var(--size-4) var(--size-5);border-radius:var(--border-radius-card);gap:var(--size-4);flex-direction:column;justify-content:center;text-align:center;width:100%;h2{color:var(--clr-primary-100);margin-block-end:var(--size-2)}}.faq-section[data-astro-cid-y3xkqasv]{display:grid;gap:var(--size-3);margin-block:var(--size-5);padding:var(--size-5) 0;h2{text-align:center;margin-bottom:var(--size-3)}article{display:grid;gap:var(--size-2);details{background-color:var(--clr-primary-100);border-radius:var(--border-radius-card);box-shadow:var(--box-shadow);summary{font-weight:700;cursor:pointer;padding:var(--size-2)}p{margin-block-start:var(--size-2);padding-block-end:var(--size-2);padding-inline-start:var(--size-2)}}}}.final-cta-section[data-astro-cid-tmceyo7p]{padding:var(--size-10) 0;margin-block-end:0;background:linear-gradient(315deg,#2e3c60b3,#071231cc),url(/images/remco-programming.webp);background-position:center;background-repeat:no-repeat;background-size:cover;.wrapper{display:grid;gap:var(--size-3);text-align:center;justify-content:center;color:var(--clr-primary-100);h2{color:var(--clr-primary-100)}.btn-wrapper{display:flex;gap:var(--size-1);justify-content:center}}}.optimal-image-size-section[data-astro-cid-qnbc43h6]{display:grid;div{h2{margin-block-end:var(--size-3)}article{display:grid;gap:var(--size-3);ul{margin-inline-start:var(--size-2)}}}table,th,td{border:1px solid black;border-collapse:collapse}th,td{padding:.5rem 1rem}}header[data-astro-cid-snx4yjwq]{align-items:center;display:flex;gap:var(--size-3);justify-content:space-between;padding-block:var(--size-10) var(--size-5);position:relative;.hero-copy{flex-grow:1;width:60%;span{font-size:var(--size-2)}h1{margin-block:var(--size-2)}.hero-copy{display:grid;gap:var(--size-1);width:100%}}.converter-tool-hero-image{align-items:center;border-radius:var(--border-radius-img);box-shadow:var(--box-shadow);display:flex;flex-shrink:0;height:auto;justify-content:center;max-width:100%;overflow:hidden;width:40%}}@media (width >= 870px){header[data-astro-cid-snx4yjwq]{padding-block:16rem var(--size-1)}}@media (width >= 984px){header[data-astro-cid-snx4yjwq]{.hero-copy{div{width:80%}}}}