### Page Layout and Theming

Source: https://www.runroom.com/realworld/marketing-de-las-fintech-en-el-evento-finance-google

Defines base page styles, including background colors for different themes (dark, default) and specific article page styling with selection highlighting.

```css
.page:not(.page--dark) {
  background-color: #f2f2f2;
}

.page--dark {
  background-color: #191919;
  color: #fff;
}

.page--progress {
  padding-top: 5px;
}

.page--article.article ::-moz-selection {
  background: #0032c6;
  background: var(--primary);
  -webkit-text-fill-color: #ffc1bb;
  -webkit-text-fill-color: var(--secondary);
}

.page--article.article ::selection {
  background: #0032c6;
  background: var(--primary);
  -webkit-text-fill-color: #ffc1bb;
  -webkit-text-fill-color: var(--secondary);
}
```

--------------------------------

### Configure Google Tag Manager

Source: https://www.runroom.com/en/cases/mas-vision-1

Initializes the dataLayer and asynchronously loads the Google Tag Manager script. This is crucial for website analytics and tracking user behavior.

```javascript
window.dataLayer = window.dataLayer || [];
function gtag() {
  dataLayer.push(arguments);
}
gtag('set', 'ads_data_redaction', true);
(function(w,d,s,l,i){
  w[l]=w[l]||[];
  w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});
  var f=d.getElementsByTagName(s)[0],
  j=d.createElement(s),
  dl=l!='dataLayer'?'&l='+l:'';
  j.async=true;
  j.src=
  'https://www.googletagmanager.com/gtm.js?id='+i+dl;
  f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-MFGWTC');
```

--------------------------------

### Responsive Display and Flexbox Utilities

Source: https://www.runroom.com/en/cases/making-life-easier-360o-development-for-pension-scheme-leaders

This snippet contains a comprehensive set of CSS utility classes for managing responsive design. It includes classes for controlling display properties (`.u-hide`, `.u-show`), flexbox layouts (`.u-flex`, `.u-flex--sXXX`), and element sizing (`.u-flex--sXXX-Y`) across predefined breakpoints (e.g., 480px, 640px, 768px, 960px, 1024px, 1280px). These utilities enable developers to create flexible and adaptive user interfaces without writing custom CSS for each breakpoint.

```css
s480{display:none!important}.u-show--s480,html:not(.no-js) .u-show--s480{display:block!important}}@media screen and (min-width:640px){.u-flex--s640{display:flex!important}.u-flex--s640-center{align-items:center;justify-content:center}.u-flex--s640-wrap{flex-wrap:wrap}.u-flex--s640-inline{display:inline-flex!important}.u-flex--s640-4{flex-basis:16.6666666667%;max-width:16.6666666667%}.u-flex--s640-6{flex-basis:25%;max-width:25%}.u-flex--s640-8{flex-basis:33.3333333333%;max-width:33.3333333333%}.u-flex--s640-12{flex-basis:50%;max-width:50%}.u-flex--s640-18{flex-basis:75%;max-width:75%}.u-flex--s640-20{flex-basis:83.3333333333%;max-width:83.3333333333%}.u-flex--s640-24{flex-basis:100%;max-width:100%}.u-hide--s640{display:none!important}.u-show--s640,html:not(.no-js) .u-show--s640{display:block!important}}.billboard\ \__image:before{padding-top:37.5%}}@media screen and (min-width:720px){.u-wysiwyg .img-big{left:50%;padding-left:1.8rem;padding-right:1.8rem;position:relative;transform:translate(-50%);width:100vw!important}}@media screen and (min-width:768px){.animate--up,.navigation\ \__item{transform:translateY(35px)}.section{padding:3.6rem 0}.new-label-md{font-size:var(--typography-sizes-desktop-ui-elements-label-md);line-height:var(--typography-line-height-desktop-ui-elements-label-md)}.new-body-lg,.new-body-md{font-size:var(--typography-sizes-desktop-body-lg);line-height:var(--typography-line-height-desktop-body-lg)}.new-mobile-title-md{font-size:var(--typography-sizes-desktop-title-md);line-height:var(--typography-line-height-desktop-title-md)}.u-flex--s768{display:flex!important}.u-flex--s768-center{align-items:center;justify-content:center}.u-flex--s768-wrap{flex-wrap:wrap}.u-flex--s768-inline{display:inline-flex!important}.u-flex--s768-4{flex-basis:16.6666666667%;max-width:16.6666666667%}.u-flex--s768-6{flex-basis:25%;max-width:25%}.u-flex--s768-8{flex-basis:33.3333333333%;max-width:33.3333333333%}.u-flex--s768-12{flex-basis:50%;max-width:50%}.u-flex--s768-18{flex-basis:75%;max-width:75%}.u-flex--s768-20{flex-basis:83.3333333333%;max-width:83.3333333333%}.u-flex--s768-24{flex-basis:100%;max-width:100%}.u-hide--s768{display:none!important}.u-show--s768,html:not(.no-js) .u-show--s768{display:block!important}.u-wrapper:not(.u-wrapper--reading){padding-left:3.6rem;padding-right:3.6rem}.u-wysiwyg blockquote{margin:3.6rem 0;padding-left:3.6rem}.u-wysiwyg .img-big{padding-left:3.6rem;padding-right:3.6rem}.navigation\ \__close{top:1.8rem}.navigation\ \__item{opacity:1;transform:none}.navigation\ \__link{margin:0 .9rem}.billboard{padding-top:105px}.billboard\ \__wrapper{padding-top:3.6rem}.billboard--realworld .billboard\ \__wrapper{padding-bottom:3.6rem}.billboard\ \__illustration{margin-right:1.8rem}.billboard\ \__title h1{max-width:-moz-fit-content;max-width:fit-content}.billboard\ \__title h1.t-title3{font-size:2.0272865295rem;line-height:2.25rem}.billboard\ \__title h1 span:last-child{display:block}.billboard\ \__title .tag{margin-bottom:.9rem}.billboard:not(.billboard--realworld) .billboard\ \__title{padding-bottom:5.4rem}.billboard:not(.billboard--realworld) .billboard\ \__title h1{margin-left:0}.cookies-message{bottom:.9rem;left:auto;right:.9rem;width:380px}.header{padding:1.8rem 0}.header--banner{padding:3.6rem 0}.header\ \__logo{height:23px;width:122px}.header\ \__logo svg{height:100%;width:100%}.section\ \__content{margin-bottom:5.4rem}}@media screen and (min-width:864px){.u-wrapper--reading{padding-left:0;padding-right:0}}@media screen and (min-width:960px){.u-flex--s960{display:flex!important}.u-flex--s960-center{align-items:center;justify-content:center}.u-flex--s960-wrap{flex-wrap:wrap}.u-flex--s960-inline{display:inline-flex!important}.u-flex--s960-4{flex-basis:16.6666666667%;max-width:16.6666666667%}.u-flex--s960-6{flex-basis:25%;max-width:25%}.u-flex--s960-8{flex-basis:33.3333333333%;max-width:33.3333333333%}.u-flex--s960-12{flex-basis:50%;max-width:50%}.u-flex--s960-18{flex-basis:75%;max-width:75%}.u-flex--s960-20{flex-basis:83.3333333333%;max-width:83.3333333333%}.u-flex--s960-24{flex-basis:100%;max-width:100%}.u-hide--s960{display:none!important}.u-show--s960,html:not(.no-js) .u-show--s960{display:block!important}}@media screen and (min-width:1024px){.t-titleDisplay{font-size:4.1098906729rem}.t-title1,h1{font-size:2.8865075782rem;line-height:3.6rem}.label,.label-big{font-size:.7023319616rem}.u-wysiwyg blockquote{font-size:1.423828125rem}.u-wysiwyg blockquote:before{margin-left:-12px}body,html{font-size:22px}.billboard:not(.billboard--realworld) .billboard\ \__title{padding-bottom:7.2rem}}@media screen and (min-width:1280px){.u-flex--s1280{display:flex!important}.u-flex--s1280-center{align-items:center;justify-content:center}.u-flex--s1280-wrap{flex-wrap:wrap}.u-flex--s1280-inline{display:inline-flex!important}.u-flex--s1280-4{flex-basis:16.6666666667%;max-width:16.6666666667%}.u-flex--s1280-6{flex-basis:25%;max-width:25%}.u-flex--s1280-8{flex-basis:33.3333333333%;max-width:33.3333333333%}.u-flex--s1280-12{flex-b
```

--------------------------------

### Google Tag Manager Initialization

Source: https://www.runroom.com/realworld/entrevista-a-julio-villalobos-director-de-marketing-de-esade

Initializes the Google Tag Manager data layer and loads the GTM script. This is a standard setup for integrating Google Analytics and other marketing tags.

```javascript
window.dataLayer = window.dataLayer || []; function gtag() { dataLayer.push(arguments); } gtag('set', 'ads_data_redaction', true); (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-MFGWTC');
```

--------------------------------

### Section and Audio Styles

Source: https://www.runroom.com/realworld/marketing-de-las-fintech-en-el-evento-finance-google

Styles for content sections and audio players, including margins and specific styling for iVoox audio embeds.

```css
.section__content {
  margin-bottom: 2.7rem;
}

.audio {
  height: 35px;
  margin-top: .9rem;
  width: 100%;
}

.audio--ivoox {
  height: 50px;
}
```

--------------------------------

### Google Tag Manager Initialization

Source: https://www.runroom.com/realworld/component-driven-design-producto-digital

Initializes Google Tag Manager by pushing data to the dataLayer and asynchronously loading the GTM script. This is a standard setup for integrating Google Analytics or other tag management solutions.

```javascript
window.dataLayer = window.dataLayer || [];
function gtag() {
  dataLayer.push(arguments);
}
gtag('set', 'ads_data_redaction', true);
(function(w,d,s,l,i){
  w[l]=w[l]||[];
  w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});
  var f=d.getElementsByTagName(s)[0],
  j=d.createElement(s),
  dl=l!='dataLayer'?'&l='+l:'';
  j.async=true;
  j.src=
  'https://www.googletagmanager.com/gtm.js?id='+i+dl;
  f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-MFGWTC');
```

--------------------------------

### Initialize Google Tag Manager

Source: https://www.runroom.com/realworld/banca-ux-ana-perez-echevarria

Initializes Google Tag Manager (GTM) by pushing data to the dataLayer and asynchronously loading the GTM script. This is a standard setup for web analytics and marketing tags.

```javascript
window.dataLayer = window.dataLayer || [];
function gtag() {
  dataLayer.push(arguments);
}
gtag('set', 'ads_data_redaction', true);
(function(w,d,s,l,i){
  w[l]=w[l]||[];
  w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});
  var f=d.getElementsByTagName(s)[0],
  j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';
  j.async=true;
  j.src=
  'https://www.googletagmanager.com/gtm.js?id='+i+dl;
  f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-MFGWTC');
```

--------------------------------

### CSS Media Queries y Layout (s767)

Source: https://www.runroom.com/realworld/aprende-a-resolver-problemas

Clases CSS para diseño responsivo aplicadas a pantallas de tamaño 's767' (pantallas pequeñas/móviles). Incluyen ajustes para la navegación, el contenido del artículo y el manejo de tablas en dispositivos pequeños.

```css
@media screen and (max-width:1279px){.article__body{margin:0 auto}}@media screen and (max-width:959px){.article__aside{display:none}}@media screen and (max-width:767px){.u-wysiwyg table{display:block;overflow-x:scroll}#ot-sdk-btn-floating{display:none}.navigation{align-items:center;background-color:#191919;color:#fff;display:flex;flex-direction:column;height:95vh;justify-content:center;left:0;opacity:0;padding:3.6rem;position:fixed;top:0;transition:opacity .3s cubic-bezier(.31,.77,.38,1.01);visibility:hidden;width:100vw;will-change:opacity;z-index:10}.navigation.is-open{opacity:1;visibility:visible}.navigation__wrapper{align-items:center;flex-direction:column;flex-grow:1;justify-content:center}.navigation__link{font-size:1.8020324707rem;margin:1.8rem 0}.billboard__illustration{margin-bottom:.45rem}.billboard__content{padding-left:1.8rem;padding-right:1.8rem}.billboard__title{background-size:70%}}@media screen and (max-width:639px){.billboard__image:before{padding-top:100%}}
```

--------------------------------

### Page and Article Styling

Source: https://www.runroom.com/realworld/desarrollo-iterativo-incremental

Styles for the main page background and article content, including selection highlighting and article-specific sidebar layouts.

```css
.page:not(.page--dark) {
  background-color: #f2f2f2;
}

.page--dark {
  background-color: #191919;
  color: #fff;
}

.page--progress {
  padding-top: 5px;
}

.page--article.article ::-moz-selection {
  background: #0032c6;
  background: var(--primary);
  -webkit-text-fill-color: #ffc1bb;
  -webkit-text-fill-color: var(--secondary);
}

.page--article.article ::selection {
  background: #0032c6;
  background: var(--primary);
  -webkit-text-fill-color: #ffc1bb;
  -webkit-text-fill-color: var(--secondary);
}

.section__content {
  margin-bottom: 2.7rem;
}

.audio {
  height: 35px;
  margin-top: .9rem;
  width: 100%;
}

.audio--ivoox {
  height: 50px;
}

.progress-bar {
  height: 6px;
  overflow: hidden;
  position: fixed;
  top: 0;
  width: 0;
  z-index: 99;
}

.progress-bar__bar {
  background: -webkit-linear-gradient(-40deg, var(--primary) 40%, var(--secondary) 100%);
  display: block;
  height: 6px;
  width: 100vw;
}

.article__aside {
  align-items: flex-end;
  display: flex;
  flex-direction: column;
  grid-area: nav;
  line-height: 1.8rem;
  min-width: 13.8888888889rem;
  position: relative;
  row-gap: 1.8rem;
}

.article__aside a {
  color: #959595;
  display: block;
  max-width: 35ch;
  -webkit-text-decoration: none;
  text-decoration: none;
}

.article__aside a:hover {
  color: #000;
}

.article__aside h2 {
  color: #959595;
  display: block;
  font-size: 1rem;
  margin-bottom: .45rem;
  max-width: 35ch;
  -webkit-text-decoration: none;
  text-decoration: none;
}

.article__aside li:not(:last-child) {
  margin-bottom: .9rem;
}

.article__aside-space {
  height: 2.7rem;
}

.article__aside-nav {
  position: sticky;
  top: 5.4rem;
}

.article__aside-nav .active {
  color: #000;
}

.article__aside-share .u-wrapper--reading {
  margin: 0;
}

.article__aside-podcast {
  grid-area: podcast;
  max-height: 100vh;
  position: relative;
  top: 20%;
}
```

--------------------------------

### Google Tag Manager Initialization

Source: https://www.runroom.com/realworld/6-ideas-esenciales-para-elevar-tu-habilidad-en-diseno

Initializes Google Tag Manager by pushing data to the dataLayer and asynchronously loading the GTM script. This is a standard setup for integrating Google Analytics or other tag management solutions.

```javascript
window.dataLayer = window.dataLayer || [];
function gtag() {
  dataLayer.push(arguments);
}

gtag('set', 'ads_data_redaction', true);

(function(w,d,s,l,i){
  w[l]=w[l]||[];
  w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});
  var f=d.getElementsByTagName(s)[0],
  j=d.createElement(s),
  dl=l!='dataLayer'?'&l='+l:'';
  j.async=true;
  j.src=
  'https://www.googletagmanager.com/gtm.js?id='+i+dl;
  f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-MFGWTC');
```

--------------------------------

### Embed HubSpot Form (Main)

Source: https://www.runroom.com/en/cases/mas-vision-1

JavaScript snippet to embed a HubSpot form on a webpage. This specific instance is for the main contact form, identified by its unique formId and CSS class.

```javascript
hbspt.forms.create({
  region: "na1",
  portalId: "3569290",
  formId: "6814ad98-e526-4ab5-9515-4306d6bf0caa",
  cssRequired: "",
  cssClass: "hub-form"
});
```

--------------------------------

### PHP Basic Syntax and Control Flow

Source: https://www.runroom.com/realworld/eileens-mentoring-diary

Introduces fundamental PHP syntax, including the opening tag, echo statements, conditional logic (if, elseif, else), and variable usage. It draws parallels with JavaScript's similar constructs.

```php
<?php

// Echo statement similar to JavaScript
echo "Hello, PHP!";

// Conditional statements
$variable = 10;
if ($variable > 5) {
    echo "Variable is greater than 5.";
} elseif ($variable == 5) {
    echo "Variable is exactly 5.";
} else {
    echo "Variable is less than 5.";
}
```

--------------------------------

### Obtener Instancia de EventDispatcher (Inyección de Dependencias)

Source: https://www.runroom.com/realworld/eventdispatcher-el-sucesor-natural-de-los-hooks-en-drupal

La forma recomendada de obtener el EventDispatcher es a través de la inyección de dependencias en constructores o métodos.

```PHP
namespace App\Controller;

use Symfony\Component\EventDispatcher\EventDispatcherInterface;

class UserController
{
    private $eventDispatcher;

    public function __construct(EventDispatcherInterface $eventDispatcher)
    {
        $this->eventDispatcher = $eventDispatcher;
    }

    public function registerUserAction()
    {
        // ... lógica para registrar usuario ...
        $user = $this->createUser();
        $event = new UserRegisteredEvent($user);
        $this->eventDispatcher->dispatch($event, 'user.registered');
        // ... resto de la acción ...
    }
}
```

--------------------------------

### Embed HubSpot Form (Subscription)

Source: https://www.runroom.com/en/cases/mas-vision-1

JavaScript snippet to embed a HubSpot form for subscription purposes. This form has a different formId and CSS class compared to the main contact form.

```javascript
hbspt.forms.create({
  portalId: "3569290",
  formId: "ae5e0c81-0f68-4f08-a037-2d6ffb3625bc",
  cssRequired: "",
  cssClass: "hub-form hub-form--alt"
});
```

--------------------------------

### Responsive CSS Utility Classes

Source: https://www.runroom.com/cases/programa-business-agility-de-esade-por-runroom

This snippet contains a collection of CSS utility classes that enable responsive design patterns. It leverages media queries to apply styles such as flexbox layouts, element visibility toggles, and component-specific adjustments based on screen width breakpoints (e.g., s480, s640, s768, s960, s1280). These classes are designed to create adaptable user interfaces.

```css
ne!important}.u-show--s480,html:not(.no-js) .u-show--s480{display:block!important}}@media screen and (min-width:640px){.u-flex--s640{display:flex!important}.u-flex--s640-center{align-items:center;justify-content:center}.u-flex--s640-wrap{flex-wrap:wrap}.u-flex--s640-inline{display:inline-flex!important}.u-flex--s640-4{flex-basis:16.6666666667%;max-width:16.6666666667%}.u-flex--s640-6{flex-basis:25%;max-width:25%}.u-flex--s640-8{flex-basis:33.3333333333%;max-width:33.3333333333%}.u-flex--s640-12{flex-basis:50%;max-width:50%}.u-flex--s640-18{flex-basis:75%;max-width:75%}.u-flex--s640-20{flex-basis:83.3333333333%;max-width:83.3333333333%}.u-flex--s640-24{flex-basis:100%;max-width:100%}.u-hide--s640{display:none!important}.u-show--s640,html:not(.no-js) .u-show--s640{display:block!important}.billboard\ \__image:before{padding-top:37.5%}}@media screen and (min-width:720px){.u-wysiwyg .img-big{left:50%;padding-left:1.8rem;padding-right:1.8rem;position:relative;transform:translate(-50%);width:100vw!important}}@media screen and (min-width:768px){.animate--up,.navigation\ \__item{transform:translateY(35px)}.section{padding:3.6rem 0}.new-label-md{font-size:var(--typography-sizes-desktop-ui-elements-label-md);line-height:var(--typography-line-height-desktop-ui-elements-label-md)}.new-body-lg,.new-body-md{font-size:var(--typography-sizes-desktop-body-lg);line-height:var(--typography-line-height-desktop-body-lg)}.new-mobile-title-md{font-size:var(--typography-sizes-desktop-title-md);line-height:var(--typography-line-height-desktop-title-md)}.u-flex--s768{display:flex!important}.u-flex--s768-center{align-items:center;justify-content:center}.u-flex--s768-wrap{flex-wrap:wrap}.u-flex--s768-inline{display:inline-flex!important}.u-flex--s768-4{flex-basis:16.6666666667%;max-width:16.6666666667%}.u-flex--s768-6{flex-basis:25%;max-width:25%}.u-flex--s768-8{flex-basis:33.3333333333%;max-width:33.3333333333%}.u-flex--s768-12{flex-basis:50%;max-width:50%}.u-flex--s768-18{flex-basis:75%;max-width:75%}.u-flex--s768-20{flex-basis:83.3333333333%;max-width:83.3333333333%}.u-flex--s768-24{flex-basis:100%;max-width:100%}.u-hide--s768{display:none!important}.u-show--s768,html:not(.no-js) .u-show--s768{display:block!important}.u-wrapper:not(.u-wrapper--reading){padding-left:3.6rem;padding-right:3.6rem}.u-wysiwyg blockquote{margin:3.6rem 0;padding-left:3.6rem}.u-wysiwyg .img-big{padding-left:3.6rem;padding-right:3.6rem}.navigation\ \__close{top:1.8rem}.navigation\ \__item{opacity:1;transform:none}.navigation\ \__link{margin:0 .9rem}.billboard{padding-top:105px}.billboard\ \__wrapper{padding-top:3.6rem}.billboard--realworld .billboard\ \__wrapper{padding-bottom:3.6rem}.billboard\ \__illustration{margin-right:1.8rem}.billboard\ \__title h1{max-width:-moz-fit-content;max-width:fit-content}.billboard\ \__title h1.t-title3{font-size:2.0272865295rem;line-height:2.25rem}.billboard\ \__title h1 span:last-child{display:block}.billboard\ \__title .tag{margin-bottom:.9rem}.billboard:not(.billboard--realworld) .billboard\ \__title{padding-bottom:5.4rem}.billboard:not(.billboard--realworld) .billboard\ \__title h1{margin-left:0}.cookies-message{bottom:.9rem;left:auto;right:.9rem;width:380px}.header{padding:1.8rem 0}.header--banner{padding:3.6rem 0}.header\ \__logo{height:23px;width:122px}.header\ \__logo svg{height:100%;width:100%}.section\ \__content{margin-bottom:5.4rem}}@media screen and (min-width:864px){.u-wrapper--reading{padding-left:0;padding-right:0}}@media screen and (min-width:960px){.u-flex--s960{display:flex!important}.u-flex--s960-center{align-items:center;justify-content:center}.u-flex--s960-wrap{flex-wrap:wrap}.u-flex--s960-inline{display:inline-flex!important}.u-flex--s960-4{flex-basis:16.6666666667%;max-width:16.6666666667%}.u-flex--s960-6{flex-basis:25%;max-width:25%}.u-flex--s960-8{flex-basis:33.3333333333%;max-width:33.3333333333%}.u-flex--s960-12{flex-basis:50%;max-width:50%}.u-flex--s960-18{flex-basis:75%;max-width:75%}.u-flex--s960-20{flex-basis:83.3333333333%;max-width:83.3333333333%}.u-flex--s960-24{flex-basis:100%;max-width:100%}.u-hide--s960{display:none!important}.u-show--s960,html:not(.no-js) .u-show--s960{display:block!important}}@media screen and (min-width:1024px){.t-titleDisplay{font-size:4.1098906729rem}.t-title1,h1{font-size:2.8865075782rem;line-height:3.6rem}.label,.label-big{font-size:.7023319616rem}.u-wysiwyg blockquote{font-size:1.423828125rem}.u-wysiwyg blockquote:before{margin-left:-12px}body,html{font-size:22px}.billboard:not(.billboard--realworld) .billboard\ \__title{padding-bottom:7.2rem}}@media screen and (min-width:1280px){.u-flex--s1280{display:flex!important}.u-flex--s1280-center{align-items:center;justify-content:center}.u-flex--s1280-wrap{flex-wrap:wrap}.u-flex--s1280-inline{display:inline-flex!important}.u-flex--s1280-4{flex-basis:16.6666666667%;max-width:16.6666666667%}.u-flex--s1280-6{flex-basis:25%;max-width:25%}.u-flex--s1280-8{flex-basis:33.3333333333%;max-width:33.3333333333%}.u-flex--s1280-12{flex-basis:50%;max-wi
```

--------------------------------

### HubSpot Global Variables and Initialization

Source: https://info.runroom.com/curso-lean-product-management

Defines global HubSpot variables including render ID, page information, and portal details. This setup is crucial for HubSpot's tracking and rendering mechanisms on the page.

```javascript
var hsVars = {
  render_id: "60c8e9cc-16d7-4b75-baed-7a7e661e17f0",
  ticks: 1753455874635,
  page_id: 191590198676,
  content_group_id: 0,
  portal_id: 3569290,
  app_hs_base_url: "https://app.hubspot.com",
  cp_hs_base_url: "https://cp.hubspot.com",
  language: "en",
  analytics_page_type: "landing-page",
  scp_content_type: "",
  analytics_page_id: "191590198676",
  category_id: 1,
  folder_id: 0,
  is_hubspot_user: false
};
```

--------------------------------

### Sidebar and Responsive Layout Utilities

Source: https://www.runroom.com/en/cases/making-life-easier-360o-development-for-pension-scheme-leaders

Styles for sidebar sections and utility classes for responsive flexbox layouts, including alignment, wrapping, and basis/max-width configurations for different screen sizes.

```css
.sidebar-section { margin-bottom:0; position:relative }
.sidebar-section .u-wrapper--reading { padding:0 }
.sidebar-section__aside * { margin-bottom:0 }
.sidebar-section__aside .label-big { margin-bottom:.45rem }
@media screen and (min-width:480px) {
  .u-flex--s480 { display:flex!important }
  .u-flex--s480-center { align-items:center; justify-content:center }
  .u-flex--s480-wrap { flex-wrap:wrap }
  .u-flex--s480-inline { display:inline-flex!important }
  .u-flex--s480-4 { flex-basis:16.6666666667%; max-width:16.6666666667% }
  .u-flex--s480-6 { flex-basis:25%; max-width:25% }
  .u-flex--s480-8 { flex-basis:33.3333333333%; max-width:33.3333333333% }
  .u-flex--s480-12 { flex-basis:50%; max-width:50% }
  .u-flex--s480-18 { flex-basis:75%; max-width:75% }
  .u-flex--s480-20 { flex-basis:83.3333333333%; max-width:83.3333333333% }
  .u-flex--s480-24 { flex-basis:100%; max-width:100% }
  .u-hide--
}
```

--------------------------------

### PHP String Manipulation Functions

Source: https://www.runroom.com/realworld/eileens-mentoring-diary

Covers common PHP functions for manipulating strings, including getting the length (strlen), extracting substrings (substr), and changing case (strtoupper, strtolower).

```php
<?php

$batName = "B a t M a n";

// Get string length
echo "Length: " . strlen($batName) . "\n";

// Convert to uppercase
echo "Uppercase: " . strtoupper($batName) . "\n";

// Convert to lowercase
echo "Lowercase: " . strtolower($batName) . "\n";

// Get a substring (from index 2, length 3)
echo "Substring: " . substr($batName, 2, 3) . "\n";

// Rounding a number (example)
$decimalValue = 93165567.26548967382;
echo "Rounded value: " . round($decimalValue, 2);

```

--------------------------------

### CSS Media Queries y Layout (s960)

Source: https://www.runroom.com/realworld/aprende-a-resolver-problemas

Clases CSS para diseño responsivo aplicadas a pantallas de tamaño 's960' (pantallas medianas). Incluyen configuraciones de flexbox, ocultar/mostrar elementos y ajustes de grid para el contenido del artículo.

```css
@media screen and (min-width:1024px){.t-titleDisplay{font-size:4.1098906729rem}.t-title1,h1{font-size:2.8865075782rem;line-height:3.6rem}.label,.label-big{font-size:.7023319616rem}.u-wysiwyg blockquote{font-size:1.423828125rem}.u-wysiwyg blockquote:before{margin-left:-12px}body,html{font-size:22px}.billboard:not(.billboard--realworld) .billboard__title{padding-bottom:7.2rem}}
```

--------------------------------

### Angular Resource with Underscore.extend

Source: https://www.runroom.com/realworld/evita-obsesion-primitivas-resources-angular

Example demonstrating how to use Underscore.js's extend function to add behavior to an Angular resource prototype. This pattern encapsulates internal data structures and centralizes logic for managing resources.

```JavaScript
var Track = function(data) {
  // Internal data structure
  this._data = data;
};

var TrackMethods = {
  // Accessors and behavior methods
  getName: function() {
    return this._data.name;
  },
  getDuration: function() {
    return this._data.duration;
  }
};

// Extend the Track prototype with TrackMethods
_.extend(Track.prototype, TrackMethods);
```

--------------------------------

### PHP Loops and Iteration

Source: https://www.runroom.com/realworld/eileens-mentoring-diary

Demonstrates the use of PHP loops, specifically 'while' and 'foreach', for repetitive tasks. The 'foreach' loop is shown for iterating over collections or generating multiple items.

```php
<?php

// While loop example
$count = 0;
while ($count < 5) {
    echo "Count is: " . $count . "\n";
    $count++;
}

// Foreach loop example (simulated)
// Assuming $bats is an array or iterable
// foreach ($bats as $bat) {
//     echo "Processing bat...";
// }

// Example of generating multiple items using a loop
for ($i = 0; $i < 3; $i++) {
    echo "Generating bat number " . ($i + 1) . "\n";
}
```

--------------------------------

### Google Tag Manager Initialization

Source: https://www.runroom.com/realworld/youtube-exprimido-al-maximo

Initializes Google Tag Manager (GTM) by creating a dataLayer and asynchronously loading the GTM script. This snippet ensures proper tracking and analytics setup.

```javascript
window.dataLayer = window.dataLayer || [];
function gtag() {
  dataLayer.push(arguments);
}
gtag('set', 'ads_data_redaction', true);
(function(w,d,s,l,i){
  w[l]=w[l]||[];
  w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});
  var f=d.getElementsByTagName(s)[0],
  j=d.createElement(s),
  dl=l!='dataLayer'?'&l='+l:'';
  j.async=true;
  j.src=
  'https://www.googletagmanager.com/gtm.js?id='+i+dl;
  f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-MFGWTC');
```