Grid framework (experiment 1)

HTML

              
                   <a href='#' class='button-collapse'><i class='material-icons'>menu</i></a>
    <menu role='menu' aria-label='Menú principal' aria-labelledby='logo'>
        <ul role='menubar'>
            <li id='logo' role='menuitem'>
                <a href='#'><img src='data:image/svg+xml;base64,' class='color'><span>Company</span>
                </a>
            </li>
            <li tabindex='0' id='search' role='menuitem'>
                <form role='search' method='get' id='searchform' action='' role='search'>
                    <label for='s'>
						<i class='material-icons'>search</i>
					</label>
                    <input type='text' value='' placeholder='Search' class='' id='s' />
                </form>
            </li>
            <li id='save' role='menuitem'><a href='#'><i class='material-icons'>save</i>Main</a>
            </li>
            <li id='datos' role='menuitem'><a href='#'><i class='material-icons'>file_download</i>File</a>
            </li>
            <li role='menuitem'><a href='#'><i class='material-icons'>&#xE8B4;</i>About</a>
            </li>
            <li role='menuitem'><a href='#'><i class='material-icons'>&#xE069;</i>Options</a>
            </li>
        </ul>
    </menu>
    <main id="principal" role='main'>
        <article>
            <section>
                <img tabindex='0' draggable='false' title='Imagen al azar' alt='Una imagen al azar sin descripción posible precisamente por ser al azar' src='https://picsum.photos/1024/?random=0' style='--col:1/1;--row:1/1'>
                <div class='center padding-2 text-invert text-shadow' style='--col:1/1;--row:1/1'>
                    <h1 contenteditable='false' class='upper font-size-300 no-padding line-height-100'>Change view to&nbsp;<span class='br font-size-600'>Full page</span></h1>
                </div>
            </section>
            <section class='padding-2' style='--rows: 2; --cols:4;--flow:column;'>
                <h1 contenteditable='false' class='text-center font-size-600 nopadding' style='--col: span 2; --as: end'>Titular</h1>
                <div style=' --col:span 2;'>
                    <div contenteditable='false' class='margin-25 width-50 text-center border-top padding-top border-critical' style='--col:2/span 2'>
                        <p>Appellat iis mentitum, mentitum sint varias iis dolore ad quo quo transferrem, id quorum commodo cernantur, do laborum transferrem, mentitum duis se arbitror illustriora, ubi si praetermissum ex ex dolore commodo transferrem. Ad multos cillum irure fabulas, ab anim ab labore. Sunt laborum et comprehenderit ubi iis fore nam enim. </p>
                    </div>
                </div>
                <div contenteditable='false'>
                    <h3>Titular</h3>
                    <p>Velit ullamco ab lorem multos do senserit ne fore ullamco, minim graviterque aliquip quid probant aut mandaremus duis nam cernantur exquisitaque. Noster probant ex mandaremus, eiusmod amet culpa sed aliqua, tempor enim te admodum praesentibus ita incididunt fore quid ex esse ea appellat lorem aliqua aliquip dolor o e minim duis et incididunt ita eram se admodum si culpa probant se sunt veniam. Ita do exquisitaque.</p>
                </div>
                <img tabindex='0' draggable='false' title='Imagen al azar' alt='Una imagen al azar sin descripción posible precisamente por ser al azar' src='https://picsum.photos/1024/?random=1'>
                <img tabindex='0' draggable='false' title='Imagen al azar' alt='Una imagen al azar sin descripción posible precisamente por ser al azar' src='https://picsum.photos/1024/?random=2'>
                <img tabindex='0' draggable='false' title='Imagen al azar' alt='Una imagen al azar sin descripción posible precisamente por ser al azar' src='https://picsum.photos/1024/?random=3'>
            </section>
            <section class='padding-2' style='--rows:3;--cols:4'>
                <h2 class="nopadding" contenteditable='false' style=' --as:end; --col: span 2'>Lo que quieras poner</h2>
                <div contenteditable='false' style='--as:end'>
                    <cite>Cillum admodum incididunt. Velit philosophari quibusdam summis nescius. Non ut eram duis legam, quo fugiat transferrem. Incurreret te enim ullamco, quibusdam amet fugiat voluptate sunt a malis quamquam expetendis, si elit eiusmod doctrina. Ex aliqua ullamco eiusmod. Offendit malis proident cernantur, de do amet illum noster, fore consequat o laboris.</cite>
                </div>
                <img tabindex='0' draggable='false' title='Imagen al azar' alt='Una imagen al azar sin descripción posible precisamente por ser al azar' src='https://picsum.photos/1024/?random=4'>
                <div contenteditable='false' style='--row: span 2'>
                    <p>Sint hic incididunt, admodum ad enim cupidatat te doctrina cohaerescant et incididunt, legam laborum praesentibus. Eram iis tempor, te quae dolore ita probant. Culpa litteris est amet velit ubi enim singulis efflorescere iis dolore consequat est proident eu mandaremus nam culpa nostrud ut aut et eruditionem si hic quid arbitror nescius quo ubi ad sunt singulis, ne occaecat philosophari. Aut eram nostrud ingeniis, culpa voluptate officia, nescius dolore ea iudicem philosophari, admodum a enim excepteur. Arbitror quis nulla ita nulla te summis qui mandaremus ut summis, nam labore duis elit incididunt est id a quae fabulas. Ita enim legam sed ingeniis, mentitum se quae litteris, ut veniam de fugiat.</p>
                </div>
                <img tabindex='0' draggable='false' title='Imagen al azar' alt='Una imagen al azar sin descripción posible precisamente por ser al azar' src='https://picsum.photos/1024/?random=5' style='--col:span 2; --row:span 2'>
                <div contenteditable='false' style='--row: span 2'>
                    <h4>Subtitular de la imagen para ilustrar</h4>
                    <p>Senserit amet est quamquam firmissimum aut offendit fore eiusmod mandaremus, ex malis officia tempor ad excepteur aut varias admodum, dolore e mandaremus, culpa proident excepteur ubi quem ita tempor nam anim, tempor iis arbitror. Summis quamquam qui comprehenderit, do aliquip exercitation hic qui iis concursionibus ut si eram malis qui doctrina, minim nescius ne ipsum velit, ullamco quid consequat, nulla hic litteris iis sed amet fidelissimae. An enim tempor tempor an eram ingeniis graviterque a doctrina fore mentitum proident, nescius magna incididunt quibusdam. Ab varias ne quis amet.</p>
                </div>
            </section>
            <section class='padding-2' style='--cols:4; --rows:2'>
                <div contenteditable='false'>
                    <p>Labore relinqueret senserit velit ullamco qui illum officia hic graviterque, aliquip nulla eiusmod, eu eu fidelissimae. Expetendis e quid qui ingeniis tamen ab laborum arbitrantur, o quo varias mentitum ne se malis aliqua se cernantur ad ipsum offendit incididunt, ex consequat despicationes se quis aut eu quid occaecat, summis aliquip est arbitrantur. Consequat noster culpa ea fore, incididunt ipsum summis laboris culpa. Nostrud sunt laborum, de summis nostrud praetermissum. Dolore appellat laborum.</p>
                </div>
                <img tabindex='0' draggable='false' title='Imagen al azar' alt='Una imagen al azar sin descripción posible precisamente por ser al azar' src='https://picsum.photos/1024/?random=1' style='--col:span 2;'>
                <div contenteditable='false' style='--row: span 2; --as:end'>
                    <h3>Titular de la noticia</h3>
                    <p>Vidisse quem in appellat philosophari nam multos de doctrina hic quorum. Nulla tempor appellat ab nostrud velit legam laborum legam ex si illum magna quo arbitror an fugiat ita an quorum pariatur ab sunt a consequat, eu eram quorum aliqua voluptate, te quamquam imitarentur, incurreret nam mentitum. Incurreret quis probant litteris, mentitum minim dolor iis quid ita pariatur non illum ut aut illum irure esse vidisse, commodo e quibusdam ab incurreret enim iudicem ubi litteris in veniam mentitum ut incididunt aut cillum. Arbitror magna senserit se illum officia non quis lorem, nam in summis vidisse, et quo familiaritatem. O de fore possumus nam singulis fugiat si commodo despicationes. Singulis ut quamquam nam de esse instituendarum ea nulla nescius aliquip, deserunt nisi ubi occaecat voluptatibus ita et ad distinguantur, an arbitror firmissimum do an tamen labore summis probant sed dolore hic possumus. Ubi duis irure an laborum.</p>
                </div>
                <img tabindex='0' draggable='false' title='Imagen al azar' alt='Una imagen al azar sin descripción posible precisamente por ser al azar' src='https://picsum.photos/1024/?random=2'>
                <img tabindex='0' draggable='false' title='Imagen al azar' alt='Una imagen al azar sin descripción posible precisamente por ser al azar' src='https://picsum.photos/1024/?random=3'>
                <div contenteditable='false'>
                    <p class='text-right width-50 float-right small'>Ex sint expetendis iudicem. Officia non senserit, id velit tamen ab tempor, de proident ad pariatur, labore eu fabulas an aute. Quo dolor non ipsum, in possumus id ingeniis, magna sempiternum nostrud veniam mentitum, non est sunt minim legam.</p>
                </div>
            </section>
            <section class='padding-2' style='--cols:4;'>
                <div contenteditable='false' style='--as:end'>
                    <h2>Titular</h2>
                    <h3>Subtitular que titule algo</h3>
                    <p>Arbitror quorum cupidatat incididunt, velit ita quamquam ex illum. Ad sint lorem ubi commodo ab culpa cernantur incurreret ita malis consequat concursionibus in malis ingeniis incurreret. Ea se sint noster culpa, quae fabulas ad comprehenderit, ea summis officia arbitrantur, qui occaecat ita ingeniis. Nulla si quamquam e esse, nostrud lorem excepteur excepteur. Doctrina si enim. A voluptate philosophari, se fugiat et velit. Esse hic sed legam vidisse.</p>
                </div>
                <img tabindex='0' draggable='false' title='Imagen al azar' alt='Una imagen al azar sin descripción posible precisamente por ser al azar' src='https://picsum.photos/1024/?random=4' style='--col: span 3'>
            </section>
            <section class='padding-2' style='--cols:4'>
                <img tabindex='0' draggable='false' title='Imagen al azar' alt='Una imagen al azar sin descripción posible precisamente por ser al azar' src='https://picsum.photos/1024/?random=1' style='--col: span 3'>
                <div contenteditable='false' style='--as:end'>
                    <h2>Titular</h2>
                    <h3>Subtitular que titule algo de algo</h3>
                    <p>Arbitror quorum cupidatat incididunt, velit ita quamquam ex illum. Ad sint lorem ubi commodo ab culpa cernantur incurreret ita malis consequat concursionibus in malis ingeniis incurreret. Ea se sint noster culpa, quae fabulas ad comprehenderit, ea summis officia arbitrantur, qui occaecat ita ingeniis. Nulla si quamquam e esse, nostrud lorem excepteur excepteur. Doctrina si enim. A voluptate philosophari, se fugiat et velit. Esse hic sed legam vidisse.</p>
                </div>
            </section>
            <section class='padding-2' style='--cols:4;--rows:2;'>
                <div contenteditable='false' style='--row:span 2'>
                    <h2>Titular</h2>
                    <h3>Subtitular que titule algo de algo</h3>
                    <p>Ullamco labore amet e anim. Expetendis dolore sed laborum fidelissimae, duis e litteris ab esse. Quid iudicem ingeniis, appellat esse quibusdam senserit, ab velit adipisicing, ea quo cohaerescant, ipsum pariatur relinqueret ut anim laborum nam sempiternum, nulla in singulis de se magna est amet. Mandaremus ea multos iis de quamquam familiaritatem de vidisse quorum minim iudicem esse aut cupidatat o legam, vidisse e veniam, nescius summis legam ita sint, mentitum sed irure, vidisse ita cillum occaecat. Si nisi aut nulla, senserit velit quid e fugiat. Si fore arbitror exercitation an aliquip lorem cernantur. Te tempor ex vidisse. Malis distinguantur vidisse veniam senserit, ubi eram praesentibus, sint arbitror familiaritatem, an enim nescius, aut esse distinguantur id summis singulis non laborum in voluptate an ullamco, illum pariatur nam quae lorem.</p>
                </div>
                <img tabindex='0' draggable='false' title='Imagen al azar' alt='Una imagen al azar sin descripción posible precisamente por ser al azar' src='https://picsum.photos/1024/?random=4' style='--col: span 3'>
                <img tabindex='0' draggable='false' title='Imagen al azar' alt='Una imagen al azar sin descripción posible precisamente por ser al azar' src='https://picsum.photos/1024/?random=5' style='--col: span 2'>
                <div contenteditable='false'>
                    <h4>Singulis cillum ullamco expetendis</h4>
                    <p>Et legam illustriora eu hic e veniam velit illum, vidisse est labore consequat non consequat quae si officia philosophari an expetendis enim nam laboris coniunctione, quibusdam non quid, cillum est admodum, enim consequat aut praetermissum. Incididunt sed amet ne qui labore quamquam occaecat. Aut possumus qui laboris si legam de ea fugiat offendit. Culpa nam cernantur ad duis, veniam nam nescius. Aliquip eu quem arbitror, elit in pariatur se enim, an cillum duis ubi nostrud do veniam.</p>
                </div>
            </section>
            <section class='padding-2' style='--cols:4;--rows:2;--gap: 1'>
                <div contenteditable='false' style='--row: span 2'>
                    <h2>Titular</h2>
                    <h3>Subtitular que titule algo de algo</h3>
                    <p>Ita quem laboris mandaremus, expetendis iis quid sed noster laborum exquisitaque ea se an legam ipsum sunt. Summis et quibusdam ex fugiat ad tempor aliqua do commodo concursionibus ubi o an instituendarum aut est quorum commodo graviterque non mandaremus veniam iudicem occaecat est nostrud minim ne pariatur exercitation qui admodum a malis, ne fore do multos. Esse arbitror ne exercitation ab veniam laborum ea doctrina. Eu ita culpa fore quid, culpa o aut aute probant iis aliqua singulis se arbitrantur, appellat in nisi, de noster singulis, de varias aliqua ad senserit ea hic aliqua labore eram pariatur, malis admodum iis exercitation.</p>
                </div>
                <img tabindex='0' draggable='false' title='Imagen al azar' alt='Una imagen al azar sin descripción posible precisamente por ser al azar' src='https://picsum.photos/1024/?random=1' style='--col: span 2'>
                <div contenteditable='false'>
                    <p>Ex quem tamen hic laboris, tempor consectetur do commodo, arbitror ut cillum do eu minim anim quem singulis, tamen ad ingeniis se legam an ubi do familiaritatem ut et nulla o aute, velit litteris tractavissent. Se eram esse et laboris. Non aute ad sunt. Non summis consequat. Non laborum et arbitror non quem pariatur coniunctione. Si ubi fugiat sunt nisi, ita lorem commodo incididunt iis dolore praetermissum voluptate nulla excepteur do mentitum do probant. Ex noster a tamen iis lorem ita eiusmod e velit ubi ipsum cernantur e officia et de labore nescius. Quo veniam incididunt ex ubi quo illum nescius.</p>
                </div>
                <div contenteditable='false'>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum dolor neque, assumenda quis itaque quo reprehenderit necessitatibus architecto voluptatum ea minus, nobis perferendis. Fugiat soluta beatae cupiditate autem voluptate consequatur.</p>
                    <p>Est illum anim de offendit, an elit eruditionem qui appellat summis deserunt, qui nam tractavissent, ingeniis esse e voluptate imitarentur ex aute voluptate et fabulas hic id admodum.</p>
                </div>
                <img tabindex='0' draggable='false' title='Imagen al azar' alt='Una imagen al azar sin descripción posible precisamente por ser al azar' src='https://picsum.photos/1024/?random=2' style='--col: span 2'>
            </section>
            <section class='padding-2' style='--cols:2;'>
                <div contenteditable='true' style='--as:end'>
                    <h1 class='upper font-size-200 no-padding padding-top line-height-100'>The first of&nbsp;<span class='br font-size-400'>Captions</span></h1>
                    <h2 class='width-75 margin-25'>Subcaption 2</h2>
                    <h3 class='width-75 margin-25'><em>Litteris an nisi incididunt. Si commodo id mandaremus id in a concursionibus.</em></h3>
                    <h4>Nisi excepteur senserit, occaecat quis summis ullamco legam ad quorum commodo reprehenderit, nulla excepteur ab consectetur si a culpa amet cillum laboris quo se minim admodum qui multos deserunt ubi litteris, ne multos legam varias fabulas. Deserunt magna enim laborum nisi.</h4>
                    <div class='columns-2'>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos tempora, cum laborum vero quia quam sequi, dolorem possimus asperiores necessitatibus dolorum impedit nulla beatae commodi repudiandae qui consequatur magnam fugit.</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro saepe harum eligendi, necessitatibus alias! Reprehenderit atque magni suscipit. Neque recusandae inventore possimus dolore velit vitae magnam optio, eum blanditiis! At.</p>
                    </div>
                </div>
                <img tabindex='0' draggable='false' title='Imagen al azar' alt='Una imagen al azar sin descripción posible precisamente por ser al azar' src='https://picsum.photos/1024/?random=4'>
            </section>
            <section class='padding-2' style='--cols:2;'>
                <img tabindex='0' draggable='false' title='Imagen al azar' alt='Una imagen al azar sin descripción posible precisamente por ser al azar' src='https://picsum.photos/1024/?random=0'>
                <div contenteditable='true' style='--as:end'>
                    <h1 class='upper font-size-200 no-padding padding-top line-height-100'>The first of&nbsp;<span class='br font-size-400'>Captions</span></h1>
                    <h2 class='width-75 margin-25'>Subcaption 2</h2>
                    <h3 class='width-75 margin-25'><em>Litteris an nisi incididunt. Si commodo id mandaremus id in a concursionibus.</em></h3>
                    <h4>Nisi excepteur senserit, occaecat quis summis ullamco legam ad quorum commodo reprehenderit, nulla excepteur ab consectetur si a culpa amet cillum laboris quo se minim admodum qui multos deserunt ubi litteris, ne multos legam varias fabulas. Deserunt magna enim laborum nisi.</h4>
                    <div class='columns-2'>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos tempora, cum laborum vero quia quam sequi, dolorem possimus asperiores necessitatibus dolorum impedit nulla beatae commodi repudiandae qui consequatur magnam fugit.</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro saepe harum eligendi, necessitatibus alias! Reprehenderit atque magni suscipit. Neque recusandae inventore possimus dolore velit vitae magnam optio, eum blanditiis! At.</p>
                    </div>
                </div>
            </section>
            <section class='padding-2' style='--cols:4;--rows:2;--flow:column'>
                <img tabindex='0' draggable='false' title='Imagen al azar' alt='Una imagen al azar sin descripción posible precisamente por ser al azar' src='https://picsum.photos/1024/?random=1'>
                <img tabindex='0' draggable='false' title='Imagen al azar' alt='Una imagen al azar sin descripción posible precisamente por ser al azar' src='https://picsum.photos/1024/?random=2'>
                <img tabindex='0' draggable='false' title='Imagen al azar' alt='Una imagen al azar sin descripción posible precisamente por ser al azar' src='https://picsum.photos/1024/?random=3'>
                <img tabindex='0' draggable='false' title='Imagen al azar' alt='Una imagen al azar sin descripción posible precisamente por ser al azar' src='https://picsum.photos/1024/?random=4'>

                <div contenteditable='false' style='--col: span 2; --row: span 2'>
                    <h1 class='upper font-size-200 no-padding padding-top line-height-100'>The first of&nbsp;<span class='br font-size-400'>Captions</span></h1>
                    <h2 class='width-75 margin-25'>Subcaption 2</h2>
                    <h3 class='width-75 margin-25'><em>Litteris an nisi incididunt. Si commodo id mandaremus id in a concursionibus.</em></h3>
                    <h4>Nisi excepteur senserit, occaecat quis summis ullamco legam ad quorum commodo reprehenderit, nulla excepteur ab consectetur si a culpa amet cillum laboris quo se minim admodum qui multos deserunt ubi litteris, ne multos legam varias fabulas. Deserunt magna enim laborum nisi.</h4>
                    <div class='columns-2'>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos tempora, cum laborum vero quia quam sequi, dolorem possimus asperiores necessitatibus dolorum impedit nulla beatae commodi repudiandae qui consequatur magnam fugit.</p>
                        <p>Do noster an cillum ea laboris adipisicing in excepteur. Quo se tractavissent. Ne ipsum tempor incurreret ex non eiusmod ea nostrud. Tempor aute quorum ullamco noster id eram despicationes aliquip anim expetendis, ab iis eram incurreret, commodo duis proident. Litteris qui pariatur. Possumus efflorescere ubi quibusdam.</p>
                        <p>Labore ne ex aute ingeniis, amet proident hic efflorescere. Sed anim graviterque do noster si incurreret eu fore ita aute a singulis ita aute id vidisse tamen et incurreret sempiternum. Ne aliqua dolore multos mandaremus non ingeniis minim lorem in culpa est si hic quae lorem culpa, ab esse quibusdam tractavissent. Aut tamen fabulas. Illum voluptatibus consequat summis incurreret. Expetendis quorum occaecat appellat, aliquip veniam in doctrina tractavissent, eu esse nulla do litteris, ad aliquip ea voluptate ex dolor te in eram officia, multos philosophari excepteur nisi singulis in fore ita laborum aut labore ab de quorum qui amet. A duis veniam se probant, culpa commodo an nescius ad qui qui nulla expetendis, consequat ipsum duis si quorum.</p>
                    </div>
                </div>
            </section>
            <section class='padding-2' style='--cols:4;--rows:2'>
                <div contenteditable='false' class='columns-3' style='--col: span 3; --row: span 2'>
                    <p>Noster o quo duis mandaremus hic an sint anim se doctrina quo ne aut transferrem qui veniam occaecat ea singulis. Laboris anim an occaecat comprehenderit, enim id mandaremus aut o summis deserunt iudicem ita enim offendit voluptate. Et ita sunt quorum quid ut minim fidelissimae arbitror fugiat consequat, enim ex eiusmod, nescius tamen mentitum. Commodo an quis. Non sunt exquisitaque, e quid exquisitaque. Qui a lorem magna quem, do ut illum admodum.</p>
                    <p>Legam doctrina te cernantur est ab quibusdam do probant nam tamen ab admodum et magna in summis laborum e adipisicing. Fabulas si litteris. O fore relinqueret an admodum fidelissimae id tempor a deserunt se cillum sed te veniam sunt dolor occaecat ubi veniam iis possumus, noster deserunt instituendarum, ne ne velit laboris id ullamco quid cillum officia aute. Doctrina in probant, voluptate malis ut probant concursionibus ita anim id ea aute mandaremus ad dolor ita ex tamen cernantur. Tamen ad incurreret ab velit. Ea lorem mentitum excepteur.</p>
                    <p>Ubi velit coniunctione ne amet si senserit qui irure ab mandaremus lorem nescius qui ullamco efflorescere de singulis. Velit tempor se quem culpa si do dolor duis aute laborum, aut quorum sint eu possumus, in commodo ubi nescius, quorum te incididunt ad quae sed deserunt tamen irure aliquip anim, elit ingeniis quo cillum malis, id sunt ab culpa. Velit est de sunt fabulas ita expetendis exquisitaque a appellat. Dolor ullamco deserunt, te aute amet elit ingeniis, doctrina duis amet vidisse minim, ne fore aliquip vidisse et offendit velit iis quamquam firmissimum, ubi nisi officia adipisicing ita laboris irure incididunt nostrud, si sed quae quamquam. Qui anim sed nulla, doctrina hic lorem aliquip id offendit illustriora id probant, quo quid arbitror. Dolor litteris do dolor aute. Et varias voluptatibus ex noster vidisse ad despicationes, in fore illum magna senserit, nostrud minim incididunt.</p>
                    <p>In quem esse sed pariatur, irure qui commodo te o non cillum proident aut offendit tamen ubi ingeniis domesticarum, ea quis amet hic cupidatat qui singulis quis cillum vidisse duis eu tamen pariatur despicationes do id aliqua senserit. An quid officia. Probant familiaritatem de cupidatat. Elit comprehenderit quibusdam sunt quamquam, vidisse eu eram incurreret.</p>
                    <p>Ad o irure summis eram, nam aute amet ab mentitum, a proident sempiternum, mentitum elit mandaremus qui a varias tempor, sint te occaecat id elit quo nostrud magna dolor aliquip aute, cupidatat irure consequat voluptate. Laborum sunt ea commodo domesticarum. Irure de iis nulla mentitum, quorum mandaremus ubi laboris. Nostrud iis tamen, in se quis fore aliqua, ne esse officia reprehenderit, offendit id fabulas. Sunt philosophari eiusmod noster officia.</p>
                </div>
                <img tabindex='0' draggable='false' title='Imagen al azar' alt='Una imagen al azar sin descripción posible precisamente por ser al azar' src='https://picsum.photos/1024/?random=1'>
                <img tabindex='0' draggable='false' title='Imagen al azar' alt='Una imagen al azar sin descripción posible precisamente por ser al azar' src='https://picsum.photos/1024/?random=2'>
            </section>
            <section class='padding-2' style='--cols:4;--rows:2;--flow: column'>
                <img tabindex='0' draggable='false' title='Imagen al azar' alt='Una imagen al azar sin descripción posible precisamente por ser al azar' src='https://picsum.photos/1024/?random=3'>
                <img tabindex='0' draggable='false' title='Imagen al azar' alt='Una imagen al azar sin descripción posible precisamente por ser al azar' src='https://picsum.photos/1024/?random=4'>
                <div contenteditable='false' class='columns-3' style='--col: span 3; --row: span 2'>
                    <p>Noster o quo duis mandaremus hic an sint anim se doctrina quo ne aut transferrem qui veniam occaecat ea singulis. Laboris anim an occaecat comprehenderit, enim id mandaremus aut o summis deserunt iudicem ita enim offendit voluptate. Et ita sunt quorum quid ut minim fidelissimae arbitror fugiat consequat, enim ex eiusmod, nescius tamen mentitum. Commodo an quis. Non sunt exquisitaque, e quid exquisitaque. Qui a lorem magna quem, do ut illum admodum.</p>
                    <p>Legam doctrina te cernantur est ab quibusdam do probant nam tamen ab admodum et magna in summis laborum e adipisicing. Fabulas si litteris. O fore relinqueret an admodum fidelissimae id tempor a deserunt se cillum sed te veniam sunt dolor occaecat ubi veniam iis possumus, noster deserunt instituendarum, ne ne velit laboris id ullamco quid cillum officia aute. Doctrina in probant, voluptate malis ut probant concursionibus ita anim id ea aute mandaremus ad dolor ita ex tamen cernantur. Tamen ad incurreret ab velit. Ea lorem mentitum excepteur.</p>
                    <p>Ubi velit coniunctione ne amet si senserit qui irure ab mandaremus lorem nescius qui ullamco efflorescere de singulis. Velit tempor se quem culpa si do dolor duis aute laborum, aut quorum sint eu possumus, in commodo ubi nescius, quorum te incididunt ad quae sed deserunt tamen irure aliquip anim, elit ingeniis quo cillum malis, id sunt ab culpa. Velit est de sunt fabulas ita expetendis exquisitaque a appellat. Dolor ullamco deserunt, te aute amet elit ingeniis, doctrina duis amet vidisse minim, ne fore aliquip vidisse et offendit velit iis quamquam firmissimum, ubi nisi officia adipisicing ita laboris irure incididunt nostrud, si sed quae quamquam. Qui anim sed nulla, doctrina hic lorem aliquip id offendit illustriora id probant, quo quid arbitror. Dolor litteris do dolor aute. Et varias voluptatibus ex noster vidisse ad despicationes, in fore illum magna senserit, nostrud minim incididunt.</p>
                    <p>In quem esse sed pariatur, irure qui commodo te o non cillum proident aut offendit tamen ubi ingeniis domesticarum, ea quis amet hic cupidatat qui singulis quis cillum vidisse duis eu tamen pariatur despicationes do id aliqua senserit. An quid officia. Probant familiaritatem de cupidatat. Elit comprehenderit quibusdam sunt quamquam, vidisse eu eram incurreret.</p>
                    <p>Ad o irure summis eram, nam aute amet ab mentitum, a proident sempiternum, mentitum elit mandaremus qui a varias tempor, sint te occaecat id elit quo nostrud magna dolor aliquip aute, cupidatat irure consequat voluptate. Laborum sunt ea commodo domesticarum. Irure de iis nulla mentitum, quorum mandaremus ubi laboris. Nostrud iis tamen, in se quis fore aliqua, ne esse officia reprehenderit, offendit id fabulas. Sunt philosophari eiusmod noster officia.</p>
                </div>
            </section>
            <section class='padding-2' style='--cols: 4; --rows: 6'>
                <h1 contenteditable='false' class='upper no-padding font-size-120 line-height-75' style='--col:1/span 2'>The first of&nbsp;<span class='br font-size-200'>Captions</span></h1>
                <img tabindex='0' draggable='false' title='Imagen al azar' alt='Una imagen al azar sin descripción posible precisamente por ser al azar' src='https://picsum.photos/1024/?random=5' style='--col: span 2; --row: span 3'>
                <img tabindex='0' draggable='false' title='Imagen al azar' alt='Una imagen al azar sin descripción posible precisamente por ser al azar' src='https://picsum.photos/1024/?random=1' style='--row: span 2'>
                <img tabindex='0' draggable='false' title='Imagen al azar' alt='Una imagen al azar sin descripción posible precisamente por ser al azar' src='https://picsum.photos/1024/?random=2' style='--row: span 2'>
                <div contenteditable='false' class='columns-2' style='--row: span 3; --col: span 2'>
                    <p>Sed enim legam do aliquip et nam an cillum laboris, ipsum ita possumus de magna, aliqua singulis concursionibus. Eram qui ingeniis de minim, mandaremus lorem varias aut velit, cernantur et ipsum, possumus iis cupidatat, in hic instituendarum se ad appellat comprehenderit, est in nisi quamquam, id in lorem aute veniam. Se quem cohaerescant, possumus enim eu pariatur firmissimum eu hic sint cupidatat, tempor ita fabulas. Sunt de iis nisi ingeniis, ipsum offendit hic multos velit, se aliqua voluptatibus est labore occaecat ita proident ne expetendis aute offendit probant, cupidatat eu quid, iis occaecat adipisicing, ubi eu nulla duis quorum. Incurreret sint quid quibusdam quae. Elit proident aut sint amet do admodum multos cupidatat appellat aut ita aute pariatur excepteur, eu ab esse lorem malis id duis offendit despicationes ita arbitror anim legam tempor dolor, laborum nulla id litteris distinguantur id dolore appellat eruditionem.</p>
                </div>
                <div contenteditable='false' style='--row: span 3; --col: span 2'>
                    <h2>Titular 2</h2>
                    <h3>Subtitular del titular 2</h3>
                    <div class='columns-2'>
                        <p>Ad sed familiaritatem, si minim ab velit aut ex velit varias nulla eiusmod se in lorem proident in illum ullamco transferrem hic non anim arbitror, doctrina malis an singulis praesentibus o incurreret sunt fabulas nescius. Veniam hic arbitror, si elit anim duis possumus. Quibusdam anim admodum incididunt, o eram proident mentitum in cillum laborum nam cernantur non quorum praetermissum possumus culpa probant, qui dolor sed sint, veniam voluptate ubi minim legam si minim eu e sunt probant, an singulis et aliquip. Qui cillum offendit senserit de o hic sunt proident.</p>
                    </div>
                </div>
            </section>
            <section class='padding-2' style='--cols:2;--rows:2;'>
                <img tabindex='0' draggable='false' title='Imagen al azar' alt='Una imagen al azar sin descripción posible precisamente por ser al azar' src='https://picsum.photos/1024/?random=3'>
                <img tabindex='0' draggable='false' title='Imagen al azar' alt='Una imagen al azar sin descripción posible precisamente por ser al azar' src='https://picsum.photos/1024/?random=4'>
                <div contenteditable='false' class='columns-4' style='--col: span 2;'>
                    <h2>Caption 2</h2>
                    <h3>Subcaption</h3>
                    <p>Laboris sint mentitum quibusdam. Ad aute coniunctione, quo consequat a cernantur est est a eruditionem, et in labore amet velit. Deserunt reprehenderit a doctrina iis quo est fore minim quorum ea incurreret ad malis a nostrud fore et ingeniis graviterque. Sed ne transferrem, laboris do veniam in doctrina malis nostrud, ab eram quorum ipsum cernantur ab sed elit ingeniis despicationes hic ne laborum in possumus, ad in tamen minim labore ne ut dolore occaecat consectetur. Esse adipisicing quamquam lorem nescius, quo mandaremus ita nostrud.</p>
                    <p>E summis probant domesticarum ab iudicem ea ipsum. Noster graviterque cernantur fore fabulas. Excepteur aute ipsum ab illum. Si ad cohaerescant, a sunt o dolor. Nisi ne nostrud in ipsum, hic noster occaecat iudicem iis quae quibusdam sed voluptatibus, mandaremus magna incididunt. Ex in ipsum ingeniis, multos laborum despicationes, consequat eruditionem iis mentitum, do fore fidelissimae aut sed illum aute aliqua fabulas id a quamquam sed laboris quo admodum si incurreret, proident dolor aute litteris aute. Mandaremus quis voluptate incididunt id et a duis eiusmod hic a ad dolore multos velit ut ullamco ab probant.</p>
                    <p>Se nulla noster ab litteris. Cillum commodo ea praetermissum iis ingeniis irure multos eu aliqua id dolor consequat proident de ea et aute labore esse ut tempor ex quae non illum litteris non enim quae.</p>
                </div>
            </section>
            <section class='padding-2' style='--cols:4;--rows:3;'>
                <img tabindex='0' draggable='false' title='Imagen al azar' alt='Una imagen al azar sin descripción posible precisamente por ser al azar' src='https://picsum.photos/1024/?random=5' class='raised' style='--row:span 2;--col:span 4;'>
                <div contenteditable='false' class='columns-2' style='--col:span 2'>
                    <p>Ad legam nulla nulla singulis de proident do labore, se quem deserunt fabulas, aliquip ab irure eiusmod, singulis cohaerescant se quamquam, tamen mandaremus ullamco iis aut do varias varias amet si nescius enim mentitum probant. Amet occaecat et coniunctione hic amet est vidisse. Ubi amet senserit ex noster possumus ne ingeniis, quid officia probant sed nisi do deserunt. Nam quis mentitum cupidatat, cillum nescius instituendarum eu excepteur irure est voluptate coniunctione, ut hic elit iudicem.</p>
                </div>
                <h3 contenteditable='false' class='text-right' style='--col: 4/span 1'><em>Possumus eruditionem non voluptate non expetendis esse senserit. Quibusdam ex velit sed doctrina a eram, singulis nisi illum ab tamen sed eu iis eruditionem.</em></h3>
            </section>
            <section class='padding-2' style='--cols:2;--rows:2; --flow:column;'>
                <h1 contenteditable='false' class='text-center nopadding' style='--as:end;'>Caption 1</h1>
                <div class='text-center grid' style='--cols:4; --rows:1'>
                    <div contenteditable='false' style='--col:2/4'>
                        <p><em>Nescius transferrem hic laborum. Veniam cupidatat voluptatibus id appellat si excepteur. Ne arbitror o arbitror, esse hic ingeniis se dolore. Ut o lorem anim velit, sed incididunt si cupidatat non ex hic sunt fore cillum si an lorem domesticarum a velit tempor an eram lorem in veniam litteris concursionibus, quorum non incididunt ita quem, arbitror nulla si mentitum coniunctione.</em>
                        </p>
                    </div>
                </div>
                <img tabindex='0' draggable='false' title='Imagen al azar' alt='Una imagen al azar sin descripción posible precisamente por ser al azar' src='https://picsum.photos/1024/?random=0' class='raised'>
                <div contenteditable='false'>
                    <p>Et quid nescius hic hic aliqua officia arbitrantur qui sunt ex doctrina ab elit ullamco laboris si appellat ad fore o amet cernantur deserunt, varias efflorescere appellat quae doctrina se dolore ut eu legam proident. Doctrina elit nescius in quorum a ullamco id et est dolore quae sunt, iudicem o enim laborum. Do duis amet ad probant, o lorem distinguantur, est in sunt fugiat illum, magna ullamco cernantur. Sint officia incididunt, nescius e voluptate ne iis sunt deserunt ingeniis, excepteur veniam sint nostrud quorum, si elit mandaremus praetermissum, laborum ne magna pariatur, ipsum mandaremus mandaremus, fore a aliquip. In mentitum familiaritatem, malis nam fabulas aut culpa. Te dolor aliqua ea ingeniis, quibusdam quis sint voluptate lorem. Se aute incurreret praesentibus, anim doctrina quo nostrud, deserunt lorem quae est irure ex si quem a dolor.</p>
                </div>
            </section>
            <section class='padding-2' style='--cols:8;--rows:1;'>
                <div contenteditable='false' style='--col:span 4;'>
                    <h2>Article caption</h2>
                    <h3>Do qui reprehenderit id anim ingeniis non summis noster</h3>
                    <div class='columns-2'>
                        <p>Proident nulla nulla nostrud summis. Officia id fugiat. Vidisse sunt culpa deserunt quorum, occaecat irure ea nescius exercitation, fabulas iis arbitror, e noster fore ubi occaecat. Nescius est quid, nam culpa laborum, amet eu cernantur, fabulas quo minim nostrud ita et est familiaritatem e summis quibusdam in domesticarum ne appellat fore illum o enim, ut nescius eruditionem. Nisi laboris ut litteris a arbitror veniam noster ullamco sunt. Anim probant ea cillum veniam, tempor non senserit ea do legam ullamco commodo, cupidatat anim possumus in ex velit cupidatat, possumus sed minim do summis cupidatat si arbitrantur de aute nam non legam incididunt. Magna appellat ad tamen sunt.</p>
                        <p>Et expetendis est doctrina, ad nisi consequat firmissimum ita a labore cillum ipsum aliquip, cillum fidelissimae admodum veniam arbitror. Te veniam velit ita admodum, ea sunt aut summis, culpa aliquip hic proident, labore cupidatat ad coniunctione. Ne fugiat eiusmod exquisitaque aut noster laboris ne adipisicing. Deserunt aute te quibusdam adipisicing, fore et a noster officia. Varias si commodo. Nam o malis illum tamen a arbitror aliqua dolor qui elit. Et amet expetendis.</p>
                    </div>
                </div>
                <blockquote contenteditable='false' class='text-right no-padding' style='--as:end'>
                    <cite>Aut sint nisi de proident, est mentitum hic offendit iis id admodum ita singulis 
				nam quorum cupidatat hic cillum anim o amet laboris illustriora</cite>
                </blockquote>
                <img tabindex='0' draggable='false' title='Imagen al azar' alt='Una imagen al azar sin descripción posible precisamente por ser al azar' src='https://picsum.photos/1024/?random=1' class='raised' style='--col:span 3'>
            </section>
            <section class='padding-2' style='--cols:2;--rows:2;--gap: 2'>
                <img tabindex='0' draggable='false' title='Imagen al azar' alt='Una imagen al azar sin descripción posible precisamente por ser al azar' src='https://picsum.photos/1024/?random=2'>
                <img tabindex='0' draggable='false' title='Imagen al azar' alt='Una imagen al azar sin descripción posible precisamente por ser al azar' src='https://picsum.photos/1024/?random=3'>
                <img tabindex='0' draggable='false' title='Imagen al azar' alt='Una imagen al azar sin descripción posible precisamente por ser al azar' src='https://picsum.photos/1024/?random=4'>
                <img tabindex='0' draggable='false' title='Imagen al azar' alt='Una imagen al azar sin descripción posible precisamente por ser al azar' src='https://picsum.photos/1024/?random=5'>
            </section>
            <hr>
            <section class='phi'>
                <div class='invert nomobile' style='--col: 1/1; --row:1/span 8'></div>
                <h2 class='align-center light grid phi line-height-120' style='--col:1/span 3; --row: 4/span 2; --as:center;'>
                    <span class='text-right' style='--col: 1/span 3; --row: 1/span 8'><span contenteditable='false' class='border-top text-invert'>Manda</span></span><span style='--col: span 5; --row: span 8'><span contenteditable='false' class='border-bottom'>remus</span></span>
                </h2>
                <div contenteditable='false' class='text-invert padding-1 text-right' style='--col: 1; --row: 1/span 8;'>
                    <p><em>Si non anim noster labore. Velit nostrud iis proident. Eiusmod dolore mandaremus ullamco, nulla id si minim incididunt.</em>
                    </p>
                </div>
                <div contenteditable='false' class='padding-1' style='--col: 2/ span 2; --row: 1/span 8; --as: end'>
                    <p>Mandaremus laborum sunt cernantur, irure ullamco litteris ita o irure comprehenderit ad admodum ita minim. Se noster probant ex id nulla arbitror sempiternum. </p>
                </div>
                <img tabindex='0' draggable='false' title='Imagen al azar' alt='Una imagen al azar sin descripción posible precisamente por ser al azar' src='https://picsum.photos/1024/?random=1' style='--col:4/span 5;--row:1/span 8;'>
                <figcaption class='text-invert text-shadow padding-title z-index' style='--col:4/8; --row:8/span 1; --as: end;--z-index:10'>Imágenes de unsplash</figcaption>
            </section>
            <section class='phi'>
                <div contenteditable='false' class='text-right' style='--col:1/span 2; --row: 1/span 1; --as:end;'>
                    <h3 contenteditable='false' class='nopadding'>Laboris non appellat</h3>
                </div>
                <img tabindex='0' draggable='false' title='Imagen al azar' alt='Una imagen al azar sin descripción posible precisamente por ser al azar' src='https://picsum.photos/1024/?random=2' style='--col: 1/span 2; --row: 2/span 3;'>
                <div contenteditable='false' style='--col:5/span 3;--row:2/span 3;'>
                    <p>Ipsum id eu velit vidisse, ex se familiaritatem ubi elit ingeniis ex concursionibus de mandaremus quis deserunt appellat. Mandaremus lorem sint qui magna ne ab esse praesentibus. Ne fugiat appellat. Fabulas transferrem nam officia, de quis ubi fore. Est nostrud quo incurreret, quo fugiat duis noster doctrina. Est aut malis aliqua veniam ad mentitum quo noster qui esse proident ab familiaritatem an cillum iudicem si senserit.</p>
                </div>
                <img tabindex='0' draggable='false' title='Imagen al azar' alt='Una imagen al azar sin descripción posible precisamente por ser al azar' src='https://picsum.photos/1024/?random=3' style='--col:3/span 6; --row:5/span 4;'>
            </section>
            <section class='phi'>
                <img tabindex='0' draggable='false' title='Imagen al azar' alt='Una imagen al azar sin descripción posible precisamente por ser al azar' src='https://picsum.photos/1024/?random=4' style='--row:1/-1; --col: 1/-1;'>
                <div class='secondary nomobile opacity' style='--col:2/span 2; --row: 1/span 8; --opacity: .7'></div>
                <h2 contenteditable='false' class='text-invert text-center light upper font-size-400 rotate' style='--col: 1/ span 4;--row:1/span 8; --as:center; --rotate: -90deg'>Caption</h2>
            </section>
            <section class='phi invert'>
                <img tabindex='0' draggable='false' title='Imagen al azar' alt='Una imagen al azar sin descripción posible precisamente por ser al azar' src='https://picsum.photos/1024/?random=5' style='--col: 1/span 8; --row:2/span 6;'>
                <div class='secondary nomobile opacity' style='--col: 2/span 2;--row:1/span 8; --opacity: .7'></div>
                <div contenteditable='false' class='padding-1 text-invert' style='--col: 2/span 2; --row: 2/span 6; --as:end'>
                    <p>Ex quis deserunt adipisicing. Probant qui eram et summis consequat distinguantur, iis excepteur imitarentur, ad enim quo fore. Cernantur quorum offendit eiusmod quo iis tamen labore multos nescius.</p>
                </div>
                <div class='secondary nomobile opacity' style='--col:6/span 3;--row:6/span 3; --opacity:.7'></div>
                <div contenteditable='false' class='padding-1 text-invert' style='--col: 6/span 3;--row:6/span 2; --as:end'>
                    <p>Sunt quibusdam de arbitrantur, dolore ut officia, ne anim praesentibus, magna ingeniis o multos elit. Multos ne an tamen litteris. Multos si nescius se ab te quae quem duis. Quibusdam o fugiat, cupidatat minim irure litteris dolore.</p>
                </div>
            </section>
            <section class='phi invert'>
                <img tabindex='0' draggable='false' title='Imagen al azar' alt='Una imagen al azar sin descripción posible precisamente por ser al azar' src='https://picsum.photos/1024/?random=1' style='--col:1/span 8;--row: 2/span 6;'>
                <div class='invert nomobile opacity' style='--col:6/span 2;--row:1/span 8;--opacity: .8'></div>
                <div contenteditable='false' class='padding-1 text-invert' style='--col: 6/span 2;--row:2/span 6; --as:top'>
                    <p>Cernantur te eram deserunt. Pariatur tamen ullamco offendit ut aut culpa nulla quae excepteur, de e nulla iudicem, velit vidisse commodo, aliquip aute minim non amet ex nescius relinqueret do expetendis iis laboris tamen singulis, tamen senserit ne comprehenderit. </p>
                </div>
                <div class='invert nomobile opacity' style='--col:8/span 1;--row:1/span 8;--opacity:.7'></div>
            </section>
            <section class='phi'>
                <img tabindex='0' draggable='false' title='Imagen al azar' alt='Una imagen al azar sin descripción posible precisamente por ser al azar' src='https://picsum.photos/1024/?random=2' class='padding-right nbg' style='--col:2/span 3;--row:2/span 6'>
                <div class='disabled nomobile opacity' style='--col:1/span 3;--row:7/span 2;--opacity:.8'></div>
                <figcaption contenteditable='false' class='padding-both text-center' style='--col:2/span 2;--row:6/span 2;--as:end'>
                    <h3 class='nopadding'>Lorem possumus ita officia</h3>
                </figcaption>
                <img tabindex='0' draggable='false' title='Imagen al azar' alt='Una imagen al azar sin descripción posible precisamente por ser al azar' src='https://picsum.photos/1024/?random=3' class='padding-left nbg' style='--col:5/span 3;--row:2/span 6'>
                <div class='disabled nomobile opacity' style='--col:6/span 3;--row:1/span 2;--opacity:.8'></div>
                <figcaption contenteditable='false' class='padding-both text-center' style='--col:6/span 2; --row:2/span 1;--as:top'>
                    <h3 class='nopadding'>Dolor iis ubi varias senserit</h3>
                </figcaption>
            </section>
            <section class='phi'>
                <img tabindex='0' draggable='false' title='Imagen al azar' alt='Una imagen al azar sin descripción posible precisamente por ser al azar' src='https://picsum.photos/1024/?random=4' class='padding-right nbg' style='--col:2/span 3;--row:2/span 5;'>
                <img tabindex='0' draggable='false' title='Imagen al azar' alt='Una imagen al azar sin descripción posible precisamente por ser al azar' src='https://picsum.photos/1024/?random=5' class='padding-left nbg' style='--col: 5/span 3;--row:3/span 5;'>
            </section>
            <section class='padding-05 disabled' style=''>
                <img tabindex='0' draggable='false' title='Imagen al azar' alt='Una imagen al azar sin descripción posible precisamente por ser al azar' src='https://picsum.photos/1024/?random=1' style='--row:1/-1;--col:1/-1'>
                <figcaption contenteditable='false' class='font-size-600 text-right upper nopadding text-invert text-shadow caption z-index' style='--col:1/-1;--row:1/-1;--as:end;--z-index: 100 '>Caption</figcaption>
            </section>
            <section class='phi padding-05 disabled' style='--gap:.5'>
                <div class='brand' style='--col:1/span 8;--row:1/span 2;'>
                    <h1 contenteditable='false' class='upper light font-size-400 padding-left'>Caption of article</h1>
                </div>
                <img tabindex='0' draggable='false' title='Imagen al azar' alt='Una imagen al azar sin descripción posible precisamente por ser al azar' src='https://picsum.photos/1024/?random=2' style='--col: span 4; --row: span 6'>
                <img tabindex='0' draggable='false' title='Imagen al azar' alt='Una imagen al azar sin descripción posible precisamente por ser al azar' src='https://picsum.photos/1024/?random=3' style='--col: span 3; --row: span 3'>
                <div class='brand text-right padding-1' style='--col: span 1; --row: span 6'>
                    <cite contenteditable='false'>An quid domesticarum, magna ne est dolor commodo. Ubi quis sunt multos laborum, e veniam veniam iis proident ex in probant exercitation, mandaremus amet officia, aliquip o magna non dolore do consequat, in doctrina de consequat, ad quid possumus cernantur.</cite>
                </div>
                <img tabindex='0' draggable='false' title='Imagen al azar' alt='Una imagen al azar sin descripción posible precisamente por ser al azar' src='https://picsum.photos/1024/?random=4' style='--col: span 3; --row: span 3'>
            </section>
            <section class='phi padding-05 disabled' style='--gap:.5'>
                <img tabindex='0' draggable='false' title='Imagen al azar' alt='Una imagen al azar sin descripción posible precisamente por ser al azar' src='https://picsum.photos/1024/?random=5' class='cols-6 rows-8' style='--col: span 6; --row: span 8;'>
                <div contenteditable='false' class='brand padding-1' style='--col: span 2; --row: span 8;'>
                    <p>Fugiat quo incurreret, quis probant senserit. De illum officia arbitror, esse arbitror laborum. Cernantur summis laboris id in proident ea senserit, se e familiaritatem, summis a appellat non cillum, nam proident exquisitaque, ea nulla consequat, probant an illum ita quo summis dolor malis cernantur. Velit iudicem in fore elit nam commodo tamen nisi id elit in legam ut doctrina sed eram ad irure quibusdam eu labore eram aut quem quo appellat ea sint, ad nulla eiusmod fabulas, ea amet fabulas comprehenderit, mandaremus dolore in aliquip fidelissimae. Ita amet arbitror. Eu labore aut quid, nam enim proident. Aute eu pariatur.
                    </p>
                </div>
            </section>
            <section class='phi padding-05 disabled' style='--gap:.5'>
                <img tabindex='0' draggable='false' title='Imagen al azar' alt='Una imagen al azar sin descripción posible precisamente por ser al azar' src='https://picsum.photos/1024/?random=1' style='--col:span 4; --row:span 5;'>
                <img tabindex='0' draggable='false' title='Imagen al azar' alt='Una imagen al azar sin descripción posible precisamente por ser al azar' src='https://picsum.photos/1024/?random=2' style='--col:span 4; --row:span 5;'>
                <div contenteditable='false' class='padding-1 brand' style='--col:span 4; --row:span 3;'>
                    <p>Quem ut arbitror aut varias se voluptate despicationes de cupidatat de laborum nulla deserunt senserit, labore illustriora proident labore quibusdam. Quo litteris imitarentur, an fugiat se multos an proident anim an eiusmod cohaerescant se nam labore offendit consectetur a quorum litteris philosophari, quis quo deserunt ex eu a labore nisi elit se offendit eram aliquip. Se ipsum nostrud philosophari, legam id incididunt et lorem quo ut fugiat nam fore, nisi appellat ne possumus, quid deserunt qui instituendarum do ullamco tamen ita proident exquisitaque.</p>
                </div>
                <div contenteditable='false' class='padding-1 brand' style='--col:span 4; --row:span 3;'>
                    <p>Se qui quem occaecat, admodum eram offendit. Quem illustriora singulis duis laboris sed ex esse fabulas, cernantur iis fabulas, ex aut noster aute magna. Illum incurreret de nescius an aliquip fugiat ipsum incididunt fugiat, officia ad expetendis te o officia eu proident, dolor e aliquip ita varias ne ipsum ad deserunt ne summis, noster arbitrantur aliquip culpa officia, hic sunt graviterque. Officia amet id doctrina praesentibus, ubi iis minim litteris an quo cupidatat quo ingeniis, nam non dolor quibusdam e fabulas magna elit mentitum ipsum.</p>
                </div>
            </section>
            <section class='phi padding-05 disabled' style='--gap:.5'>
                <div contenteditable='false' class='brand padding-1' style='--col: span 3; --row: span 8'>
                    <p>Doctrina varias fore consequat velit. Pariatur in anim, dolore nostrud officia. De sunt arbitror singulis ne ea eram senserit domesticarum si quorum vidisse in quibusdam a esse nescius eruditionem iis doctrina fugiat ipsum non varias, iudicem cohaerescant ubi quibusdam ita quorum despicationes probant esse nescius, nostrud aute excepteur. Id varias cohaerescant, ab senserit do aliquip. Malis nostrud ea legam velit, et lorem malis o mentitum, fabulas enim aliqua id multos, o aliqua ingeniis familiaritatem iis ad cernantur arbitrantur, elit sed proident eu culpa ut ne illum labore nisi tempor, nam illum labore e iudicem. Legam qui occaecat, nostrud quid qui offendit concursionibus. Cupidatat veniam singulis nostrud, nostrud dolore cillum aliquip quem an qui ipsum familiaritatem, tamen est ullamco ab anim, occaecat non deserunt ad occaecat ea ullamco aut veniam ullamco exercitation, sunt se proident.</p>
                </div>
                <img tabindex='0' draggable='false' title='Imagen al azar' alt='Una imagen al azar sin descripción posible precisamente por ser al azar' src='https://picsum.photos/1024/?random=3' style='--col: span 3;--row:span 3'>
                <img tabindex='0' draggable='false' title='Imagen al azar' alt='Una imagen al azar sin descripción posible precisamente por ser al azar' src='https://picsum.photos/1024/?random=4' style='--col: span 2;--row:span 3'>
                <img tabindex='0' draggable='false' title='Imagen al azar' alt='Una imagen al azar sin descripción posible precisamente por ser al azar' src='https://picsum.photos/1024/?random=5' style='--col: span 2;--row:span 3'>
                <img tabindex='0' draggable='false' title='Imagen al azar' alt='Una imagen al azar sin descripción posible precisamente por ser al azar' src='https://picsum.photos/1024/?random=1' style='--col: span 3;--row:span 3'>
                <div class='brand cols-5 nomobile' style='--col: span 5; --row: span 2'></div>
            </section>
            <section class='phi padding-05 disabled' style='--gap: .5'>
                <img tabindex='0' draggable='false' title='Imagen al azar' alt='Una imagen al azar sin descripción posible precisamente por ser al azar' src='https://picsum.photos/1024/?random=2' style='--col: span 2; --row: span 3'>
                <img tabindex='0' draggable='false' title='Imagen al azar' alt='Una imagen al azar sin descripción posible precisamente por ser al azar' src='https://picsum.photos/1024/?random=3' style='--col: span 2; --row: span 3'>
                <img tabindex='0' draggable='false' title='Imagen al azar' alt='Una imagen al azar sin descripción posible precisamente por ser al azar' src='https://picsum.photos/1024/?random=4' style='--col: span 4; --row: span 6'>
                <div contenteditable='false' class='secondary padding-2 text-center' style='--col: span 2; --row: span 3;'>
                    <p>Do admodum tractavissent.</p>
                </div>
                <div contenteditable='false' class='brand padding-2 text-center' style='--col: span 2; --row: span 3;'>
                    <p>Commodo quo amet. Nam incurreret qui laborum.</p>
                </div>
                <div contenteditable='false' class='brand padding-2 text-center' style='--col: span 2; --row: span 2;'>
                    <p>Aut multos consequat graviterque et e irure o nisi.</p>
                </div>
                <img tabindex='0' draggable='false' title='Imagen al azar' alt='Una imagen al azar sin descripción posible precisamente por ser al azar' src='https://picsum.photos/1024/?random=5' class='cols-2 rows-2' style='--col: span 2; --row: span 2;'>
                <div class='rows-2 cols-4 brand nomobile' style='--col: span 4; --row: span 2;'></div>
            </section>
            <section style='--cols: 1; --rows:1;'>
                <video class='' style='--col:1/1; --row:1/1;' src='std.mp4' autoplay loop playsinline muted></video>
                <div class='center text-invert' style='--col:1/1;--row:1/1'>
                    <h1 contenteditable='false' class='upper font-size-200 no-padding line-height-100'>The first of&nbsp;<span class='br font-size-400'>Captions</span></h1>
                </div>
            </section>
        </article>
    </main>

CSS

              
                @import url('https://fonts.googleapis.com/css?family=Material+Icons|Playfair+Display:700,700i|Source+Sans+Pro:200,400,400i,700');
:root {
	/* font variables */
	
	--font-size: 18px;
	--line-height: 1.7rem;
	--body: 'Source Sans Pro', sans-serif;
	--body-weight: 400;
	--italic: 'Source Sans Pro', sans-serif;
	--caption: 'Playfair Display', serif;
	--caption-weight: 400;
	--light: 'Playfair Display', sans-serif;
	--light-weight: 400;
	--condended: 'Arial Narrow', sans-serif;
	--condensed-weight: normal;
	--letter-spacing: normal;
	--xfont: 1;
	--h1: 4.25;
	--h2: 2.6;
	--h3: 1.6;
	--h4: 1;
	--h5: 1;
	--lh1: 3;
	--lh2: 2;
	--lh3: 1;
	--lh4: 1;
	--lh5: 1;
	/* */
	/* colors */
	
	--brand: #e0ac69;
	--ok: #739C0D;
	--warning: #f6e635;
	--critical: #c71f2e;
	--unknown: #848283;
	--background: #FFFDFD;
	--hover: #000000;
	--primary: #393537;
	--secondary: #848283;
	--disabled: #D3D1D2;
}

@media all and (min-width: 751px) {
	:root {
		/* */
		/* desktop variables */
		
		--font-size: calc(.7 * (1vw + 1vh));
		--line-height: 1.6em;
		--delay: 25%;
		--menu: 1rem;
		/* */
	}
}

@media (orientation: portrait) and (min-width: 751px) {
	:root {
		--font-size: calc(1vw + .875vh) !important;
	}
}

@media all and (max-width: 750px) {
	:root {
		/* */
		/* mobile variables */
		
		--font-size: 5vw;
		--line-height: 1.7rem;
		--menu: 4vw;
		/* */
	}
}
/* simple css main */

*,
*:before,
*:after {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	margin: 0;
	padding: 0;
	outline-color: transparent;
}

html,
body {
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

html {
	background-color: #fff;
	background-color: var(--background);
}

body {
	position: relative;
	width: 100%;
	max-width: 800px;
	background-color: #fff;
	background-color: var(--background);
	color: #000;
	color: var(--primary);
	float: left;
	margin: 0 auto;
	padding: 0 10%;
}

img {
	position: relative;
	width: 120%;
	height: auto;
	clear: both;
	display: block;
	margin: 1.5rem -10%;
}

.nobg,
no-bg {
	background-color: transparent;
	background-image: none;
}

html>body,
p {
	font-size: var(--font-size));
	line-height: 1.6rem;
	line-height: var(--line-height);
	font-family: sans-serif;
	font-family: var(--body);
	font-weight: normal;
	font-weight: var(--body-weight);
}

h1,
h2,
h3,
h4,
h5,
.h1,
.h2,
.h3,
.h4,
.h5,
.listad,
.caption,
nav a,
nav span {
	font-weight: 500;
	text-rendering: optimizeLegibility;
	margin: 0;
	padding: 0;
	letter-spacing: normal;
	font-family: sans-serif;
	font-family: var(--caption);
	font-weight: bold;
	font-weight: var(--caption-weight);
}

.body {
	font-family: var(--body);
}

.monospace {
	font-family: "American Typewriter", 'Courier New', Courier, monospace !important;
	text-align: left;
}

.thin,
.light {
	font-family: sans-serif;
	font-family: var(--light);
	font-weight: lighter;
	font-weight: var(--light-weight);
	letter-spacing: var(--letter-spacing);
}

.condensed {
	font-family: arial narrow, sans-serif;
	font-family: var(--condensed);
	font-weight: normal;
	font-weight: var(--condensed-weight);
	letter-spacing: normal;
}

.blod,
strong {
	font-weight: bold;
	font-weight: var(--caption-weight);
}

em,
cite {
	font-family: var(--italic);
	font-style: italic;
}

aside {
	font-variant: small-caps;
}

html {
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
}

a {
	background: none;
	text-decoration: none;
}

p a {
	-webkit-text-decoration-style: solid;
	text-decoration-style: solid;
	-webkit-text-decoration-color: var(--critical);
	text-decoration-color: var(--critical);
	-webkit-text-decoration-line: underline;
	text-decoration-line: underline;
}

p {
	word-wrap: break-word;
	word-break: normal;
	-webkit-hyphens: auto;
	-webkit-hyphenate-character: \2010;
	-webkit-hyphenate-limit-after: 1;
	-webkit-hyphenate-limit-before: 3;
	-ms-hyphens: auto;
	-webkit-hyphens: auto;
	hyphens: auto;
	orphans: 2;
	widows: 2;
	text-align: inherit;
	-webkit-margin-before: 0;
	-webkit-margin-after: 0;
	-webkit-margin-start: 0;
	-webkit-margin-end: 0;
}

*+p {
	text-indent: 0;
}

p+*:not(p) {
	margin-top: 1.5rem;
	margin-top: var(--line-height);
}

p+p {
	text-indent: 2em;
	padding: 0;
	margin: 0 inherit;
}

h1,
h2,
h3,
h4,
h5,
.h1,
.h2,
.h3,
.h4,
.h5 {
	letter-spacing: normal;
	letter-spacing: var(--letter-spacing);
	margin-bottom: var(--line-height);
}

h1,
.h1 {
	font-size: calc(var(--h1)*var(--font-size));
	line-height: calc(var(--lh1) * var(--line-height));
}

h2,
.h2 {
	font-size: calc(var(--h2)*var(--font-size));
	line-height: calc(var(--lh2) * var(--line-height));
}

h3,
.h3 {
	font-size: calc(var(--h3)*var(--font-size));
	line-height: calc(var(--lh3) * var(--line-height));
}

h4,
.h4 {
	font-size: calc(var(--h4)*var(--font-size));
	line-height: calc(var(--lh4) * var(--line-height));
}

h5,
.h5 {
	font-size: calc(var(--h5)*var(--font-size));
	line-height: calc(var(--lh5) * var(--line-height));
}

h4,
.h4 {
	text-transform: uppercase;
}

h5,
.h5 {
	font-variant: small-caps;
	letter-spacing: .125rem;
}

h5:before,
.h5:before {
	content: "- ";
}
/* h2 + h3 effect */

.h2+.h3,
h2+.h3,
h2+h3 {
	position: relative;
	clear: both;
	display: block;
	font-style: italic;
	width: 75%;
	/*	margin-top: calc(-1*var(--line-height));*/
	
	margin-bottom: calc(1.25 * var(--line-height));
	padding-bottom: calc(.75 * var(--line-height));
}

.h2+.h3:after,
h2+.h3:after,
h2+h3:after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 4em;
	height: 100%;
	max-width: 50%;
	height: .25rem;
	background-color: var(--critical);
}
/* */

blockquote {
	margin: 1.6rem 0 3.2rem 0;
	margin: var(--line-height) 0 calc(2*var(--line-height)) 0;
	padding: 0 1.6rem;
	padding: 0 var(--line-height);
}

small,
.small,
cite {
	display: block;
	font-size: 13px;
	line-height: 1.2rem;
	font-size: calc(var(--font-size) * 0.66667);
	line-height: calc(2/3 * var(--line-height)) !important;
}

object,
embed {
	clear: both;
	height: auto;
	left: 0;
	width: 100%;
	margin: 0;
	padding: 0;
}

ul {
	list-style-type: circle;
	padding-left: var(--line-height);
}

ol {
	list-style-type: decimal;
	padding-left: var(--line-height);
}

ul li,
ol li {
	padding-left: 1em;
	padding-bottom: .75rem;
	padding-bottom: calc(.5 * var(--line-height));
	margin: 0;
}

li p,
li ul {
	margin-bottom: 0;
	margin-top: 0;
}

ul,
.ul-none {
	list-style-type: none;
}

.ul-disc {
	list-style-type: disc;
}

.ul-circle {
	list-style-type: circle;
}

.ul-square {
	list-style-type: square;
}

ol,
.ol-decimal {
	list-style-type: decimal;
}

.ol-roman {
	list-style-type: upper-roman;
}

.ol-lower {
	list-style-type: lower-alpha;
}

.ol-upper {
	list-style-type: upper-alpha;
}

main~a>h3 {
	padding: calc(var(--line-height)*4);
}

main>li {
	padding: 0 calc(var(--line-height)*4);
}
/* material icons is hidden for very old browsers */

.nomobile,
.no-mobile,
.material-icons {
	visibility: hidden;
	display: none;
}
/* */
/* css desktop */

@supports ((display: -ms-grid) or (display: grid)) {
	@media all and (min-width: 751px) {
		:root {
			--z-index: 1;
			--opacity: 1;
			--rotate: 0;
		}
		.z-index {
			z-index: var(--z-index);
		}
		.opacity {
			opacity: var(--opacity);
		}
		.rotate {
			-webkit-transform: rotate(var(--rotate));
			transform: rotate(var(--rotate));
		}
		*/ html,
		body,
		p {
			font-size: var(--font-size);
			line-height: var(--line-height);
		}
		/* ajustamos los elementos al tamaño del dispositivo al 100% de alto y de ancho */
		
		section>* {
			display: block;
			z-index: 10;
		}
		p {
			z-index: 11;
		}
		html,
		body,
		main,
		article,
		section,
		footer,
		.full {
			position: absolute;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			margin: 0;
			padding: 0;
			overflow: hidden;
			-webkit-text-size-adjust: 100%;
			background-color: var(--background);
			color: var(--primary);
			box-sizing: border-box;
		}
		body {
			max-width: 100%;
		}
		article {
			margin-top: 2rem;
			height: calc(100% - 2rem);
			overflow: auto;
		}
		section {
			z-index: 2;
			position: sticky;
			position: -webkit-sticky;
			margin-bottom: var(--delay);
			box-shadow: 0 -1px 0 var(--disabled);
		}
		section:first-of-type {
			z-index: 1;
		}
		section:first-of-type,
		footer,
		section .relative {
			position: relative;
			margin-bottom: 0;
			box-shadow: none;
		}
		.fixed {
			position: fixed !important;
		}
		.relative {
			position: relative !important;
		}
		.absolute {
			position: absolute !important;
		}
		.square {
			position: relative;
			height: 100%;
		}
		.square:before {
			content: "";
			display: block;
			padding-top: 100%;
		}
		.square>* {
			position: absolute;
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;
		}
		footer {
			height: auto;
		}
		/* oculta las cajas con las siguientes clases, es útil para hacer que algo desaparezca en la versión escritorio y sin embargo aparezca en la versión móvil */
		
		.no,
		.nodesktop,
		.invisible {
			width: 0;
			height: 0;
			display: none;
			visibility: hidden;
			opacity: 0;
			filter: alpha(opacity=0);
		}
		.nomobile,
		.no-mobile {
			visibility: visible;
			display: block;
		}
		/* imágenes */
		
		img,
		video {
			top: 0;
			left: 0;
			margin: 0;
			padding: 0;
			box-shadow: none;
			-o-object-fit: cover;
			object-fit: cover;
			-o-object-position: center center;
			object-position: center center;
			background-repeat: no-repeat;
			background-position: center center;
			background-size: cover;
			overflow: hidden;
			clear: none;
		}
		img:hover:not(:focus) {
			-webkit-animation-name: imghover;
			animation-name: imghover;
			-webkit-animation-duration: 500ms;
			animation-duration: 500ms;
			-webkit-animation-delay: 1s;
			animation-delay: 1s;
			-webkit-animation-fill-mode: both;
			animation-fill-mode: both;
			-webkit-animation-direction: alternate;
			animation-direction: alternate;
		}
		@-webkit-keyframes imghover {
			from {}
			to {
				-webkit-transform: scale(1.05);
				transform: scale(1.05);
				z-index: 3;
				box-shadow: 0 1.75rem 2.5rem -1rem var(--secondary), 0 4px 8px var(--disabled), 0 0 8px var(--disabled) inset;
			}
		}
		@keyframes imghover {
			from {}
			to {
				-webkit-transform: scale(1.05);
				transform: scale(1.05);
				z-index: 3;
				box-shadow: 0 1.75rem 2.5rem -1rem var(--secondary), 0 4px 8px var(--disabled), 0 0 8px var(--disabled) inset;
			}
		}
		.grayscale {
			-webkit-filter: grayscale(100%);
			filter: grayscale(100%);
		}
		img.hrt,
		img.vrt,
		video.hrt,
		video.vrt {
			background-size: contain;
			-o-object-fit: contain;
			object-fit: contain;
			overflow: hidden;
		}
		video.hrt,
		img.hrt {
			width: 100%;
			height: auto;
		}
		video.vrt,
		img.vrt {
			height: 100%;
			width: auto;
		}
		video.left,
		img.left {
			-o-object-position: left;
			object-position: left;
			background-position: left;
		}
		video.right,
		img.right {
			-o-object-position: right;
			object-position: right;
			background-position: right;
		}
		video.top,
		img.top {
			-o-object-position: top;
			object-position: top;
			background-position: top;
		}
		video.bottom,
		img.bottom {
			-o-object-position: bottom;
			object-position: bottom;
			background-position: bottom;
		}
		/* si la imagen recibe foco se centra y tapa el resto */
		
		video:focus,
		img:focus {
			position: absolute;
			display: block;
			clear: both;
			grid-column: 1/-1;
			grid-row: 1/-1;
			-webkit-transform: translate(-50%, -50%);
			transform: translate(-50%, -50%);
			top: 50%;
			left: 50%;
			width: auto;
			height: auto;
			max-width: 90%;
			max-height: calc(90% - 4rem);
			margin: 0 !important;
			padding: 0 !important;
			-o-object-position: center center;
			object-position: center center;
			background-position: center center;
			z-index: 10;
			background-size: contain;
			-o-object-fit: contain;
			object-fit: contain;
			-webkit-filter: grayscale(0%);
			filter: grayscale(0%);
			border-radius: 0;
			outline: 100vmax solid #888;
			outline: 100vmax solid var(--secondary);
			border: 1rem solid var(--background);
			background-color: var(--background);
			-webkit-animation-name: toauto;
			animation-name: toauto;
			-webkit-animation-duration: 600ms;
			animation-duration: 600ms;
			-webkit-animation-fill-mode: backwards;
			animation-fill-mode: backwards;
			-webkit-animation-timing-function: ease-out;
			animation-timing-function: ease-out;
		}
		@-webkit-keyframes toauto {
			from {
				-webkit-transform: translate(-50%, -50%) scale(0);
				transform: translate(-50%, -50%) scale(0);
				outline-color: #444;
				opacity: .5;
			}
			to {
				-webkit-transform: translate(-50%, -50%) scale(1);
				transform: translate(-50%, -50%) scale(1);
				outline-color: #888;
				opacity: 1;
			}
		}
		@keyframes toauto {
			from {
				-webkit-transform: translate(-50%, -50%) scale(0);
				transform: translate(-50%, -50%) scale(0);
				outline-color: #444;
				opacity: .5;
			}
			to {
				-webkit-transform: translate(-50%, -50%) scale(1);
				transform: translate(-50%, -50%) scale(1);
				outline-color: #888;
				opacity: 1;
			}
		}
		img:focus~img {
			display: none;
			visibility: hidden;
		}
		img:focus+figcaption,
		img:focus+.nomobile+figcaption {
			font-size: 2rem;
			line-height: 3rem;
			z-index: 10;
			text-align: center;
			position: fixed;
			left: 0;
			bottom: 0;
			width: 90%;
			text-align: center;
			color: var(--background);
			margin: 0;
			padding: 5% 0 .5rem 5%;
			background-color: transparent;
			text-shadow: none;
		}
		/* */
		
		figure>img,
		a>img {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
		}
		.blur {
			-webkit-filter: blur(2px);
			filter: blur(2xp);
		}
		/* overflow y text-indent */
		
		.noscroll,
		.nooverflow,
		.no-scroll,
		.no-overflow {
			overflow: hidden;
		}
		.scroll,
		.overflow-y {
			overflow-y: auto !important;
		}
		.noindent,
		.no-indent {
			text-indent: 0 !important;
		}
		/* br, clear y display block */
		
		.br,
		.clear {
			clear: both;
		}
		.br,
		.block {
			display: block;
		}
		.br {
			position: relative;
		}
		/* modificadores de texto */
		
		.small-caps {
			font-variant: small-caps;
		}
		.upper {
			text-transform: uppercase;
		}
		.text-spacing {
			letter-spacing: var(--letter-spacing);
		}
		.text-center {
			text-align: center !important;
		}
		.text-right {
			text-align: right !important;
		}
		.text-left {
			text-align: left !important;
		}
		.text-justify {
			text-align: justify !important;
		}
		/* font size */
		
		.font-size {
			font-size: calc(var(--font-size) * var(--fsize, 1));
		}
		.font-size-1200 {
			font-size: calc(var(--font-size)*12) !important;
		}
		.font-size-900 {
			font-size: calc(var(--font-size)*9) !important;
		}
		.font-size-600 {
			font-size: calc(var(--font-size)*6) !important;
		}
		.font-size-400 {
			font-size: calc(var(--font-size)*4) !important;
		}
		.font-size-300 {
			font-size: calc(var(--font-size)*3) !important;
		}
		.font-size-250 {
			font-size: calc(var(--font-size)*2.5) !important;
			line-height: calc(1.875 * var(--line-height));
		}
		.font-size-200 {
			font-size: calc(var(--font-size)*2) !important;
		}
		.font-size-150 {
			font-size: calc(var(--font-size)*1.5) !important;
		}
		.font-size-140 {
			font-size: calc(var(--font-size)*1.4) !important;
		}
		.font-size-130 {
			font-size: calc(var(--font-size)*1.3) !important;
		}
		.font-size-120 {
			font-size: calc(var(--font-size)*1.2) !important;
		}
		.font-size-100 {
			font-size: var(--font-size) !important;
		}
		.font-size-75 {
			font-size: calc(var(--font-size)*.75) !important;
		}
		.font-size-50 {
			font-size: calc(var(--font-size)*.5) !important;
		}
		[class^=font-size],
		[class*=font-size] {
			line-height: 1em;
			margin: 0 0 calc((.5em/1rem)*var(--line-height)) 0;
			padding: 0;
		}
		/* float */
		
		.float-left {
			float: left;
		}
		.float-right {
			float: right;
		}
		.top {
			top: 0;
		}
		.bottom {
			bottom: 0;
		}
		.left {
			left: 0;
		}
		.right {
			right: 0;
		}
		.center {
			position: relative;
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			-webkit-box-pack: center;
			-ms-flex-pack: center;
			justify-content: center;
			-webkit-box-align: center;
			-ms-flex-align: center;
			align-items: center;
			-webkit-box-orient: vertical;
			-webkit-box-direction: normal;
			-ms-flex-direction: column;
			flex-direction: column;
			height: 100%;
		}
		/* bordes */
		
		[class^=border],
		[class*=" border"] {
			border-width: 2px;
			border-style: none;
			border-color: var(--secondary);
			box-sizing: border-box !important;
		}
		.border {
			border-width: 2px;
			border-style: solid;
		}
		.border-05,
		.border-05em {
			border-width: .5rem;
		}
		.border-1,
		.border-1em {
			border-width: 1rem;
		}
		.border-top {
			border-top-style: solid;
			padding-top: -2px;
		}
		.border-right {
			border-right-style: solid;
		}
		.border-bottom {
			border-bottom-style: solid;
			padding-bottom: -2px;
		}
		.border-left {
			border-left-style: solid;
		}
		/* paddings  */
		
		.padding-05 {
			padding: calc(.5 * var(--line-height));
		}
		.padding,
		.padding-1 {
			padding: var(--line-height);
		}
		.padding-2 {
			padding: calc(2 * var(--line-height));
		}
		.padding-4 {
			padding: calc(4 * var(--line-height));
		}
		.padding-left {
			padding-left: var(--line-height) !important;
		}
		.padding-right {
			padding-right: var(--line-height) !important;
		}
		.padding-both {
			padding-left: var(--line-height) !important;
			padding-right: var(--line-height) !important;
		}
		.padding-top {
			padding-top: var(--line-height) !important;
		}
		.padding-bottom {
			padding-bottom: var(--line-height) !important;
		}
		.padding-title {
			padding: calc( .5 * var(--line-height)) var(--line-height) !important;
		}
		.padding-small {
			margin: .25rem;
			padding: .25rem;
		}
		/* margins */
		
		.margin,
		.margin-1 {
			margin: var(--line-height);
		}
		.margin-2 {
			margin: calc(2 * var(--line-height));
		}
		.margin-4 {
			margin: calc(4 * var(--line-height));
		}
		.margin-left {
			margin-left: var(--line-height) !important;
		}
		.margin-right {
			margin-right: var(--line-height) !important;
		}
		.margin-both {
			margin-left: var(--line-height) !important;
			margin-right: var(--line-height) !important;
		}
		.margin-top {
			margin-top: var(--line-height) !important;
		}
		.margin-bottom {
			margin-bottom: var(--line-height) !important;
		}
		/* */
		
		.no-padding,
		.nopadding {
			margin: 0 !important;
			padding: 0 !important;
		}
		/*columns */
		
		[class^=columns-],
		[class*=columns-] {
			orphans: 2;
			widows: 2;
			-webkit-column-gap: calc(var(--col-gap, var(--gap, 1)) * var(--line-height));
			-moz-column-gap: calc(var(--col-gap, var(--gap, 1)) * var(--line-height));
			column-gap: calc(var(--col-gap, var(--gap, 1)) * var(--line-height));
			height: 100%;
			min-height: 100%;
		}
		.columns-2 {
			-webkit-column-count: 2;
			-moz-column-count: 2;
			column-count: 2;
		}
		.columns-3 {
			-webkit-column-count: 3;
			-moz-column-count: 3;
			column-count: 3;
		}
		.columns-4 {
			-webkit-column-count: 4;
			-moz-column-count: 4;
			column-count: 4;
		}
		/* shadows */
		
		.shadow {
			box-shadow: .5rem .5rem 2rem var(--secondary);
		}
		.shadow-right {
			box-shadow: .5rem 0 2rem var(--secondary);
		}
		.shadow-left {
			box-shadow: -.5rem 0 2rem var(--secondary);
		}
		.shadow-top {
			box-shadow: 0 -.5rem 2rem var(--secondary);
		}
		.shadow-bottom {
			box-shadow: 0 .5rem 2rem var(--secondary);
		}
		.inshadow {
			box-shadow: inset .5rem .5rem 2rem 0 var(--secondary);
		}
		.raised,
		img,
		video {
			box-shadow: 0 1.5em 1em -1em var(--secondary), 0 1px 4px var(--disabled), 0 0 4px var(--disabled) inset;
		}
		.noshadow,
		.no-shadow {
			box-shadow: none !important;
		}
		.text-shadow {
			text-shadow: 1px 1px 1px var(--secondary);
		}
		.primary {
			background-color: var(--primary);
			color: var(--disabled);
		}
		.primary a {
			color: var(--hover);
		}
		.text-primary {
			color: var(--primary);
		}
		.text-primary.stroke {
			-webkit-text-stroke-color: var(--primary);
			-moz-text-stroke-color: var(--primary);
		}
		.border-primary {
			border-color: var(--primary);
		}
		.invert {
			background-color: var(--primary);
			color: var(--background);
		}
		.invert a {
			color: var(--disabled);
		}
		.text-invert {
			color: var(--background);
		}
		.border-invert {
			border-color: var(--background);
		}
		.secondary {
			background-color: var(--secondary);
			color: var(--background);
		}
		.secondary a {
			color: var(--secondary);
		}
		.text-secondary {
			color: var(--secondary);
		}
		.border-secondary {
			border-color: var(--secondary);
		}
		.disabled {
			background-color: var(--disabled);
			color: var(--background);
		}
		.disabled a {
			color: var(--disabled);
		}
		.text-disabled {
			color: var(--disabled);
		}
		.border-disabled {
			border-color: var(--disabled);
		}
		.brand {
			background-color: var(--brand);
			color: var(--background);
		}
		.brand a {
			color: var(--disabled);
		}
		.text-brand {
			color: var(--brand);
		}
		.border-brand {
			border-color: var(--brand);
		}
		.ok {
			background-color: var(--ok);
			color: var(--secondary);
		}
		.ok a {
			color: var(--disabled);
		}
		.text-ok {
			color: var(--ok);
		}
		.border-ok {
			border-color: var(--ok);
		}
		.warning {
			background-color: var(--warning);
			color: var(--primary);
		}
		.warning a {
			color: var(--hover);
		}
		.text-warning {
			color: var(--warning);
		}
		.border-warning {
			border-color: var(--warning);
		}
		.critical {
			background-color: var(--critical);
			color: var(--disabled);
		}
		.critical a {
			color: var(--secondary);
		}
		.text-critical {
			color: var(--critical);
		}
		.border-critical {
			border-color: var(--critical);
		}
		.unknown {
			background-color: var(--unknown);
			color: var(--disabled);
		}
		.unknown a {
			color: var(--secondary);
		}
		.text-unknown {
			color: var(--unknown);
		}
		.border-unknown {
			border-color: var(--unknown);
		}
		a:visited {
			opacity: .8;
		}
		.rotate-origin-top {
			transform-origin: top;
			-webkit-transform-origin: top;
		}
		.rotate-origin-bottom {
			transform-origin: bottom;
			-webkit-transform-origin: bottom;
		}
		.rotate-origin-left {
			transform-origin: left;
			-webkit-transform-origin: left;
		}
		.rotate-origin-right {
			transform-origin: right;
			-webkit-transform-origin: right;
		}
		/* border radius */
		
		.round {
			border-radius: .5rem;
		}
		.round-top {
			border-top-left-radius: .5rem;
			border-top-right-radius: .5rem;
		}
		.round-bottom {
			border-bottom-left-radius: .5rem;
			border-bottom-right-radius: .5rem;
		}
		.round-left {
			border-top-left-radius: .5rem;
			border-bottom-left-radius: .5rem;
		}
		.round-right {
			border-top-right-radius: .5rem;
			border-bottom-right-radius: .5rem;
		}
		.circle {
			border-radius: 100%;
		}
		.height-200 {
			height: 200% !important;
		}
		.height-300 {
			height: 300% !important;
		}
		.height-400 {
			height: 400% !important;
		}
		.line-height-200 {
			line-height: 2em;
		}
		.line-height-150 {
			line-height: 1.5em;
		}
		.line-height-125 {
			line-height: 1.25em;
		}
		.line-height-100 {
			line-height: 1em;
			;
		}
		.line-height-75 {
			line-height: .75em;
		}
		.line-height-50 {
			line-height: .5em;
		}
		.width-25 {
			width: 25%;
		}
		.width-33 {
			width: 33.333333%;
		}
		.width-50 {
			width: 50%;
		}
		.width-66 {
			width: 66.666666%;
		}
		.width-75 {
			width: 75%;
		}
		.margin-25 {
			margin-left: 25%;
		}
		.margin-33 {
			margin-left: 33.333333%;
		}
		.margin-50 {
			margin-left: 50%;
		}
		.margin-66 {
			margin-left: 66.666666%;
		}
		.margin-75 {
			margin-left: 75%;
		}
		/* css grid */
		/* http://korywakefield.com/iota/ */
		/* https://github.com/korywakefield/iota */
		/* A responsive micro-framework for the grid spec powered by CSS custom properties. */
		
		.grid,
		section {
			display: -ms-grid;
			display: grid;
			grid-gap: calc(var(--gap, 1) * var(--line-height));
			grid-auto-flow: var(--flow, row);
			grid-auto-columns: var(--auto-cols, auto);
			grid-auto-rows: var(--auto-rows, auto);
			-ms-grid-columns: var(--template-cols, (var(--cols-size, 1fr))[var]);
			grid-template-columns: var(--template-cols, repeat(var(--cols, 1), var(--cols-size, 1fr)));
			-ms-grid-rows: var(--template-rows, (var(--rows-size, 1fr))[var]);
			grid-template-rows: var(--template-rows, repeat(var(--rows, 1), var(--rows-size, 1fr)));
			-webkit-box-pack: var(--jc, center);
			-ms-flex-pack: var(--jc, center);
			justify-content: var(--jc, center);
			-ms-grid-column-align: var(--ji, stretch);
			justify-items: var(--ji, stretch);
			-ms-flex-line-pack: var(--ac, stretch);
			align-content: var(--ac, stretch);
			-ms-grid-row-align: var(--ai, stretch);
			align-items: var(--ai, stretch);
		}
		.grid.is-inline {
			display: -ms-inline-grid;
			display: inline-grid;
		}
		.phi {
			--template-cols: 14.5898033750384fr repeat(6, 11.8033988749872fr) 14.5898033750384fr;
			--template-rows: 14.5898033750384fr repeat(6, 11.8033988749872fr) 14.5898033750384fr;
			--gap: 0;
		}
		.phi>img {
			box-shadow: none;
		}
		.grid>*,
		section>* {
			min-width: 0px;
			max-width: 100%;
			max-height: 100%;
			min-height: 0px;
			-ms-grid-column: var(--col, auto);
			grid-column: var(--col, auto);
			-ms-grid-row: var(--row, auto);
			grid-row: var(--row, auto);
			justify-self: var(--js, auto);
			-ms-flex-item-align: var(--as, auto);
			align-self: var(--as, auto);
			z-index: 2;
			overflow: hidden;
		}
		.grid>.full,
		section>.full {
			--col: 1/-1;
			--row: 1/-1;
		}
		.align-bottom {
			position: absolute;
			bottom: 0;
			width: 100%;
		}
		/* menu */
		
		.material-icons {
			visibility: visible;
			display: block;
		}
		.button-collapse,
		.close {
			display: none;
			visibility: hidden;
		}
		menu {
			position: relative;
			top: 0;
			left: 0;
			margin: 0;
			width: 100%;
			z-index: 10;
		}
		menu ul {
			position: fixed;
			top: -3.5rem;
			left: 0;
			margin: 0;
			padding: 0 var(--line-height);
			width: 100%;
			height: 5.5rem;
			text-align: right;
			list-style: none;
			padding: 0 var(--line-height);
			border-bottom: 1px solid var(--disabled);
			background-color: var(--background);
		}
		menu,
		menu #logo,
		menu ul,
		menu a,
		menu a:after,
		menu a .material-icons,
		main,
		article {
			-webkit-transition: all .4s ease-in-out;
			transition: all .4s ease-in-out;
		}
		menu:hover~main {
			-webkit-transform: translateY(5.5rem);
			transform: translateY(5.5rem);
			overflow: hidden;
		}
		menu:hover~main > article {
			margin-top: 0;
		}
		menu:hover ul {
			-webkit-transform: translateY(3.5rem);
			transform: translateY(3.5rem);
		}
		menu #logo {
			position: relative;
			float: left;
		}
		menu #logo img {
			position: relative;
			top: 0;
			left: 0;
			margin-top: 0;
			height: 3.5rem;
			width: auto;
			box-shadow: none;
		}
		menu li {
			display: inline-block;
			text-align: center;
		}
		menu a {
			position: relative;
			display: block;
			text-decoration: none;
			width: auto;
			height: 5.5rem;
			padding: 0 1rem;
			color: var(--gray) !important;
		}
		menu a:hover,
		menu a:active,
		menu a:focus {
			color: var(--black) !important;
		}
		menu a .material-icons {
			color: var(--gray);
			text-shadow: none;
			speak: none;
			font-style: normal;
			font-weight: normal;
			font-variant: normal;
			text-transform: none;
			line-height: 1.3333334rem;
			-webkit-font-smoothing: antialiased;
			clear: both;
			position: relative;
			display: block;
			margin: .25rem auto .5rem auto;
			width: 2.75rem;
			padding: 0.5rem;
			border: 0.2rem solid var(--secondary);
			border-radius: 100%;
			font-size: 1rem;
			background-color: var(--background);
			box-shadow: 0 0 0 1rem transparent;
			box-sizing: border-box;
		}
		/* Animate the box-shadow to create the effect */
		
		menu a:hover .material-icons,
		menu a:active .material-icons,
		menu a:focus .material-icons {
			box-shadow: 0 0 0 0 rgba(0, 0, 0, .5);
			color: var(--black);
			font-size: 160%;
			padding-left: 0;
			padding-right: 0;
			background-color: var(--background);
			border: 0.2rem solid var(--primary);
		}
		#searchform {
			border-radius: 16rem;
			border: 0.2rem solid var(--primary);
			background-color: var(--background);
			height: 2.75rem !important;
			float: right;
			margin-top: -3.5rem;
			padding: 0;
		}
		#s {
			-webkit-transition: all 0.2s ease-out;
			transition: all 0.2s ease-out;
			width: 1px;
			border-radius: 0;
			box-shadow: none;
			outline: none;
			border: 0;
			background-color: transparent;
			color: var(--primary);
			opacity: 0;
			font-size: 2rem;
			height: 2rem;
			max-height: 2rem;
			line-height: 2rem;
		}
		#s:focus {
			width: 16rem;
			opacity: 1;
		}
		label {
			padding-left: 1px;
			display: inline-block;
			color: var(--primary);
			position: relative;
			left: 0.2rem;
		}
		#searchform .material-icons {
			margin: .5rem 0;
			font-size: 2rem;
			line-height: 1.5rem;
			color: var(--primary);
		}
		#search:hover .material-icons {
			color: var(--primary);
		}
		/* vertical rhythm test * /
        section {
            background-image: -webkit-linear-gradient(hsla(0, 0%, 0%, 0) 95%, hsla(0, 25%, 50%, .5) 95%);
            background-image: linear-gradient(hsla(0, 0%, 0%, 0) 95%, hsla(0, 25%, 50%, .5) 95%);
            background-position: 50% 0;
            background-size: var(--line-height) var(--line-height);
        }
        /* parallax css */
		
		:root {
			--plx-perspective: 1;
		}
		main > article,
		.parallax {
			-webkit-transform-style: preserve-3d;
			transform-style: preserve-3d;
			-webkit-perspective: calc(var(--plx-perspective) * 1px);
			perspective: calc(var(--plx-perspective) * 1px);
			-webkit-perspective-origin: 0 0;
			perspective-origin: 0 0;
			perspective-origin-x: 100%;
			-webkit-transform: translate3d(0, 0, 0);
			transform: translate3d(0, 0, 0);
		}
		main>article>section:first-of-type,
		.plx {
			position: relative;
			--plx-scale: calc(var(--plx-perspective) - var(--plx-z, -.9));
			-webkit-transform: translateZ(calc(var(--plx-z, -.9) * 1px)) translateY(calc(50% - 50vh)) scale(var(--plx-scale));
			transform: translateZ(calc(var(--plx-z, -.9) * 1px)) translateY(calc(50% - 50vh)) scale(var(--plx-scale));
			-webkit-transform-origin: 0 0;
			transform-origin: 0 0;
			transform-origin-x: 100%;
		}
		.fast {
			--plx-z: .3;
		}
		.slow {
			--plx-z: -.9;
		}

	}
	/* */
	
	@media screen and (orientation: portrait) and (min-width: 751px) {
		/* si el dispositivo está en modo retrato en lugar de apaisado duplica el tamaño de cada página y de las tipografías de forma que se visualiza como si fueran las dos páginas de una revista */
		
		:root {
			--font-size: calc();
		}
		article {
			width: 200%;
			max-width: 200%;
		}
		main, 
    article {
			overflow: auto !important;
		}
		menu {
			width: 100vw;
			position: absolute;
			font-size: 75%;
		}
	}
	@media print {
		@page {
			size: A4 landscape !important;
			page-break-inside: always;
			page-break-after: always;
			page-break-before: always;
			overflow: hidden;
			margin: 0;
			padding: 0;
			zoom: 1;
		}
		:root {
			--font-size: 14px;
		}
		body {
			background-image: url();
			background-color: var(--background);
		}
		body,
		section {
			position: relative !important;
			width: 297mm !important;
			height: auto !important;
			opacity: 1 !important;
			overflow: hidden;
			border: 0px;
			border: none;
			-webkit-text-size-adjust: 100% !important;
			-webkit-font-size: 80% !important;
		}
		section {
			height: 210mm !important;
			overflow: hidden !important;
			page-break-after: auto;
			page-break-inside: avoid;
			z-index: 10;
		}
		* {
			text-shadow: none !important;
			-webkit-text-stroke: none !important;
			box-shadow: none;
		}
	}
}

@media screen and (max-width: 750px) {
	html,
	body,
	p {
		font-size: var(--font-size);
		line-height: var(--line-height);
	}
	section {
		width: 100%;
	}
	.material-icons,
	.mobile {
		visibility: visible;
		display: inline-block;
	}
	* + div {
		margin-top: var(--line-height);
	}
	.button-collapse,
	.close {
		position: fixed;
		top: 0;
		display: block;
		z-index: 11;
		color: #000;
		line-height: 2rem;
		padding: .1rem;
		text-shadow: 1px 1px 0 var(--background), -1px 1px 0 var(--background), -1px -1px 0 var(--background), 1px -1px 0 var(--background), 1px 0 0 var(--background), -1px 0 0 var(--background), 0 1px 0 var(--background), 0 -1px 0 var(--background);
	}
	.button-collapse .material-icons,
	.close .material-icons {
		font-size: calc(2*var(--menu));
	}
	.button-collapse {
		left: .25rem;
	}
	.button-collapse:hover~menu,
	menu:hover {
		display: block;
		left: 0;
		box-shadow: .5em 0 .25rem rgba(136, 136, 136, 0.50);
	}
	.button-collapse:hover~section,
	menu:hover~section {
		margin-left: 50%;
		margin-right: -50%;
		opacity: .5;
	}
	menu,
	menu a,
	.button-collapse,
	.close,
	section {
		-webkit-transition: all .6s ease-out;
		transition: all .6s ease-out;
	}
	menu {
		position: fixed;
		top: 0;
		left: -75%;
		width: 75%;
		background-color: var(--brand);
		color: var(--primary);
		height: 100%;
		z-index: 11;
		font-size: var(--menu);
	}
	menu a {
		font-size: 1.5rem;
		line-height: 1.5rem;
		overflow: hidden;
		color: var(--primary);
	}
	menu a:after,
	menu #search:after {
		content: "";
		background: rgba(127, 127, 127, 0.3);
		display: block;
		position: absolute;
		border-radius: 50%;
		padding-top: 0;
		padding-left: 0;
		margin-top: 0;
		margin-left: 0;
		opacity: 0;
		-webkit-transition: all 1s ease-out;
		transition: all 1s ease-out;
	}
	menu a:active:after,
	menu a:focus:after {
		padding-top: 240%;
		padding-left: 240%;
		margin-top: -120%;
		margin-left: -120%;
		opacity: 1;
	}
	menu a:hover,
	menu a:active,
	menu a:focus,
	menu #search:hover {
		color: var(--primary);
		background-color: var(--background);
		box-shadow: none;
	}
	menu ul {
		list-style-type: none;
	}
	menu ul,
	menu ul li {
		margin: 0;
		padding: 0;
	}
	menu a,
	menu #search {
		position: relative;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		color: var(--disabled);
		display: block;
		line-height: 2rem;
		width: 100%;
		font-size: 1em;
		padding-left: 2em;
	}
	menu #search a {
		display: none;
		visibility: hidden;
	}
	menu a .material-icons,
	menu #search .material-icons {
		padding-right: 1em;
		padding-top: 1em;
	}
	menu ul li ul li a {
		padding-left: 3em;
		font-size: .8em;
	}
	menu #logo {
		width: 100%;
		text-align: left;
		line-height: 1em;
		margin: 0;
	}
	menu #logo span {
		clear: both;
		display: block;
		padding: 0 var(--line-height);
	}
	menu #logo img {
		position: relative;
		width: 75%;
		height: auto;
		padding-left: 4rem;
		box-shadow: none;
		-webkit-filter: drop-shadow(2px 2px 0 var(--white));
		filter: drop-shadow(2px 2px 0 var(--white));
	}
}

JS

999px

Insecure Resource

About JavaScript Preprocessors

About External Resources

About Packages

HTML

CSS

JS

Console

HTML

HTML Preprocessor

About HTML Preprocessors

Add Class(es) to <html>

Adding Classes

Stuff for <head>

About the <head>

Insecure Resource

CSS

CSS Preprocessor

About CSS Preprocessors

CSS Base

About CSS Base

Vendor Prefixing

About Vendor Prefixing

Add External Stylesheets/Pens

About External Resources

JavaScript

JavaScript Preprocessor

About JavaScript Preprocessors

Add External Scripts/Pens

About External Resources

Packages

Add Packages

About Packages

Behavior

Auto Save

Auto-Updating Preview

Format on Save

Editor Settings

Code Indentation

Code Indent width

Want to change your Syntax Highlighting theme, Fonts and more?

HTML

CSS

JS

Console

Editor Commands

Editor Focus

Misc

HTML Specific

Pen Actions