The template I am using has a media query for @media (min-width: 768px) { .md\:w-2\/3 { width: 66.666667%; } } and this is the element I came up with:
<picture>
<source srcset="<?= $image->thumb(['width' => 400, 'quality' => 80, 'format' => 'avif'])->url() ?> 400w, <?= $image->thumb(['width' => 800, 'quality' => 80, 'format' => 'avif'])->url() ?> 800w, <?= $image->thumb(['width' => 1200, 'quality' => 80, 'format' => 'avif'])->url() ?> 1200w, <?= $image->thumb(['width' => 1600, 'quality' => 80, 'format' => 'avif'])->url() ?> 1600w" sizes="(max-width: 767px) calc(0.8 * 100vw), calc(0.61 * 100vw)" type="image/avif">
<source srcset="<?= $image->thumb(['width' => 400, 'quality' => 80, 'format' => 'webp'])->url() ?> 400w, <?= $image->thumb(['width' => 800, 'quality' => 80, 'format' => 'webp'])->url() ?> 800w, <?= $image->thumb(['width' => 1200, 'quality' => 80, 'format' => 'webp'])->url() ?> 1200w, <?= $image->thumb(['width' => 1600, 'quality' => 80, 'format' => 'webp'])->url() ?> 1600w" sizes="(max-width: 767px) calc(0.8 * 100vw), calc(0.61 * 100vw)" type="image/webp">
<img src="<?= $image->url() ?>" srcset="<?= $image->thumb(['width' => 400, 'quality' => 80])->url() ?> 400w, <?= $image->thumb(['width' => 800, 'quality' => 80])->url() ?> 800w, <?= $image->thumb(['width' => 1200, 'quality' => 80])->url() ?> 1200w, <?= $image->thumb(['width' => 1600, 'quality' => 80])->url() ?> 1600w" sizes="(max-width: 767px) calc(0.8 * 100vw), calc(0.61 * 100vw)" decoding="async" loading="lazy" alt="" style="background-size: cover; background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns=\'http%3A//www.w3.org/2000/svg\' xmlns%3Axlink=\'http%3A//www.w3.org/1999/xlink\' viewBox=\'0 0 1280 853\'%3E%3Cfilter id=\'b\' color-interpolation-filters=\'sRGB\'%3E%3CfeGaussianBlur stdDeviation=\'.5\'%3E%3C/feGaussianBlur%3E%3CfeComponentTransfer%3E%3CfeFuncA type=\'discrete\' tableValues=\'1 1\'%3E%3C/feFuncA%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Cimage filter=\'url(%23b)\' x=\'0\' y=\'0\' height=\'100%25\' width=\'100%25\' xlink%3Ahref=\'data%3Aimage/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAGCAIAAACepSOSAAAACXBIWXMAAC4jAAAuIwF4pT92AAAAs0lEQVQI1wGoAFf/AImSoJSer5yjs52ktp2luJuluKOpuJefsoCNowB+kKaOm66grL+krsCnsMGrt8m1u8mzt8OVoLIAhJqzjZ2tnLLLnLHJp7fNmpyjqbPCqLrRjqO7AIeUn5ultaWtt56msaSnroZyY4mBgLq7wY6TmwCRfk2Pf1uzm2WulV+xmV6rmGyQfFm3nWSBcEIAfm46jX1FkH5Djn5AmodGo49MopBLlIRBfG8yj/dfjF5frTUAAAAASUVORK5CYII=\'%3E%3C/image%3E%3C/svg%3E'); ">
</picture>
The problem with this code is that always the highest width is provided even if I am emulating a small device screen/viewport with the browser developer tools. What am I missing?