Destacado

<div class="panel-horizontal-content">
  <div class="panel-horizontal">
    <img src="/destacado.jpg" alt="descripción de imagen" class="panel-img" />
    <div class="panel-body">
      <h2 class="panel-title">Título del destacado</h2>
      <p class="panel-text">
        Este es el cuerpo de un destacado. Debe ser breve y conciso, de pocas
        líneas. No puede contener negritas ni enlaces. Este es el cuerpo de un
        destacado. Debe ser breve y conciso, de pocas líneas. No puede contener
        negritas ni enlaces
      </p>
      <div class="panel-footer">
        <a class="btn btn-primary btn-lg" href="#" rel="noopener noreferrer">
          Botón
        </a>
        <a class="btn btn-outline-primary btn-lg" href="#" rel="noopener noreferrer">
          Botón
        </a>
      </div>
    </div>
  </div>
</div>

<div class="panel-horizontal-content">
  <div class="panel-horizontal">
    <img src="/destacado.jpg" alt="descripción de imagen" class="panel-img" />
    <div class="panel-body">
      <h2 class="panel-title">Título del destacado</h2>
      <p class="panel-text">
        Este es el cuerpo de un destacado. Debe ser breve y conciso, de pocas
        líneas. No puede contener negritas ni enlaces. Este es el cuerpo de un
        destacado. Debe ser breve y conciso, de pocas líneas. No puede contener
        negritas ni enlaces
      </p>
      <div class="panel-footer">
        <a class="btn btn-primary btn-lg" href="#" rel="noopener noreferrer">
          Botón
        </a>
      </div>
    </div>
  </div>
</div>

<div class="panel-horizontal-content">
  <div class="panel-horizontal">
    <img src="/destacado.jpg" alt="descripción de imagen" class="panel-img" />
    <div class="panel-body">
      <h2 class="panel-title">Título del destacado</h2>
      <p class="panel-text">
        Este es el cuerpo de un destacado. Debe ser breve y conciso, de pocas
        líneas. No puede contener negritas ni enlaces. Este es el cuerpo de un
        destacado. Debe ser breve y conciso, de pocas líneas. No puede contener
        negritas ni enlaces
      </p>
      <div class="panel-footer">
        <a class="btn btn-secondary btn-lg" href="#" target="_blank" download="">
          <span class="material-symbols-rounded" aria-hidden="true">file_download</span>Descargar
        </a>
      </div>
    </div>
  </div>
</div>

<div class="panel-horizontal-content">
  <div class="panel-horizontal">
    <img src="/destacado.jpg" alt="descripción de imagen" class="panel-img" />
    <div class="panel-body">
      <h2 class="panel-title">Título del destacado</h2>
      <p class="panel-text">
        Este es el cuerpo de un destacado. Debe ser breve y conciso, de pocas
        líneas. No puede contener negritas ni enlaces. Este es el cuerpo de un
        destacado. Debe ser breve y conciso, de pocas líneas. No puede contener
        negritas ni enlaces
      </p>
      <div class="panel-footer">
        <a class="external" href="#" target="_blank" rel="noopener noreferrer">Enlace externo</a>
      </div>
    </div>
  </div>
</div>

<div class="panel-horizontal-content">
  <div class="panel-horizontal">
    <img src="/destacado.jpg" alt="descripción de imagen" class="panel-img" />
    <div class="panel-body">
      <h2 class="panel-title">Título del destacado</h2>
      <p class="panel-text">
        Este es el cuerpo de un destacado. Debe ser breve y conciso, de pocas
        líneas. No puede contener negritas ni enlaces. Este es el cuerpo de un
        destacado. Debe ser breve y conciso, de pocas líneas. No puede contener
        negritas ni enlaces
      </p>
      <div class="panel-footer">
        <a href="#" class="list-group-item item-sm">
          <span class="material-symbols-rounded o-icon" aria-hidden="true">info</span>
          <div class="access-content">
            <span class="access-title">Acceso</span>
          </div>
        </a>
      </div>
    </div>
  </div>
</div>

<div class="panel-horizontal-content">
  <div class="panel-horizontal">
    <p class="sr-only">Buenos Aires se escribe en plural</p>
    <video class="panel-img" controls="">
      <source src="/videoBuenosAires.mp4" type="video/mp4" />
      <track
        src="/videoBuenosAires.vtt"
        default=""
        kind="captions"
        srclang="es"
      />
      <p>Su navegador no soporta vídeos HTML5. Puedes ver el video haciendo clic en
        <a href="/videoBuenosAires.mp4">este enlace</a>.
      </p>
    </video>
    <div class="panel-body">
      <h2 class="panel-title">Título del destacado</h2>
      <p class="panel-text">
        Este es el cuerpo de un destacado. Debe ser breve y conciso, de pocas
        líneas. No puede contener negritas ni enlaces. Este es el cuerpo de un
        destacado. Debe ser breve y conciso, de pocas líneas. No puede contener
        negritas ni enlaces
      </p>
      <div class="panel-footer">
        <a class="btn btn-primary btn-lg" href="#" rel="noopener noreferrer">
          Botón
        </a>
        <a class="btn btn-outline-primary btn-lg" href="#" rel="noopener noreferrer">
          Botón
        </a>
      </div>
    </div>
  </div>
</div>

<div class="panel-horizontal-content">
  <div class="panel-horizontal">
    <iframe
      class="panel-img"
      src="https://www.youtube.com/embed/sXE613Oaxvc?si=iWSX1erqQxXOLojw"
      title="Buenos Aires se escribe en plural"
      frameborder="0"
      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
      allowfullscreen=""
    ></iframe>
    <div class="panel-body">
      <h2 class="panel-title">Título del destacado</h2>
      <p class="panel-text">
        Este es el cuerpo de un destacado. Debe ser breve y conciso, de pocas
        líneas. No puede contener negritas ni enlaces. Este es el cuerpo de un
        destacado. Debe ser breve y conciso, de pocas líneas. No puede contener
        negritas ni enlaces
      </p>
      <div class="panel-footer">
        <a class="btn btn-primary btn-lg" href="#" rel="noopener noreferrer">
          Botón
        </a>
        <a class="btn btn-outline-primary btn-lg" href="#" rel="noopener noreferrer">
          Botón
        </a>
      </div>
    </div>
  </div>
</div>

<div class="panel-horizontal-content">
  <div class="panel-horizontal">
    <div class="panel-body">
      <h2 class="panel-title">Título del destacado</h2>
      <p class="panel-text">
        Este es el cuerpo de un destacado. Debe ser breve y conciso, de pocas
        líneas. No puede contener negritas ni enlaces. Este es el cuerpo de un
        destacado. Debe ser breve y conciso, de pocas líneas. No puede contener
        negritas ni enlaces
      </p>
      <div class="panel-footer">
        <a class="btn btn-primary btn-lg" href="#" rel="noopener noreferrer">
          Botón
        </a>
        <a class="btn btn-outline-primary btn-lg" href="#" rel="noopener noreferrer">
          Botón
        </a>
      </div>
    </div>
  </div>
</div>

<div class="panel-horizontal-content bg-light">
  <div class="panel-horizontal">
    <img src="/destacado.jpg" alt="descripción de imagen" class="panel-img" />
    <div class="panel-body">
      <h2 class="panel-title">Título del destacado</h2>
      <p class="panel-text">
        Este es el cuerpo de un destacado. Debe ser breve y conciso, de pocas
        líneas. No puede contener negritas ni enlaces. Este es el cuerpo de un
        destacado. Debe ser breve y conciso, de pocas líneas. No puede contener
        negritas ni enlaces
      </p>
      <div class="panel-footer">
        <a class="btn btn-primary btn-lg" href="#" rel="noopener noreferrer">
          Botón
        </a>
        <a class="btn btn-outline-primary btn-lg" href="#" rel="noopener noreferrer">
          Botón
        </a>
      </div>
    </div>
  </div>
</div>

<div class="highlighted-items-2">
  <div class="col">
    <div class="panel-vertical">
      <img src="/destacado.jpg" alt="descripción de imagen" class="panel-img" />
      <div class="panel-body">
        <h2 class="panel-title">Título del destacado</h2>
        <p class="panel-text">Este es el cuerpo de un destacado. Debe ser breve y conciso, de pocas líneas. No puede contener negritas ni enlaces. Este es el cuerpo de un destacado. Debe ser breve y conciso, de pocas líneas. No puede contener negritas ni enlaces</p>
        <div class="panel-footer">
          <a class="btn btn-primary btn-lg" href="#" rel="noopener noreferrer">
            Botón
          </a>
        </div>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="panel-vertical">
      <img src="/destacado.jpg" alt="descripción de imagen" class="panel-img" />
      <div class="panel-body">
        <h2 class="panel-title">Título del destacado</h2>
        <p class="panel-text">Este es el cuerpo de un destacado. Debe ser breve y conciso, de pocas líneas. No puede contener negritas ni enlaces. Este es el cuerpo de un destacado. Debe ser breve y conciso, de pocas líneas. No puede contener negritas ni enlaces</p>
        <div class="panel-footer">
          <a class="btn btn-secondary btn-lg" href="#" target="_blank" download="">
            <span class="material-symbols-rounded" aria-hidden="true">file_download</span>Descargar
          </a>
        </div>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="panel-vertical">
      <img src="/destacado.jpg" alt="descripción de imagen" class="panel-img" />
      <div class="panel-body">
        <h2 class="panel-title">Título del destacado</h2>
        <p class="panel-text">Este es el cuerpo de un destacado. Debe ser breve y conciso, de pocas líneas. No puede contener negritas ni enlaces. Este es el cuerpo de un destacado. Debe ser breve y conciso, de pocas líneas. No puede contener negritas ni enlaces</p>
        <div class="panel-footer">
          <a class="external" href="#" target="_blank" rel="noopener noreferrer">Enlace externo</a>
        </div>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="panel-vertical">
      <img src="/destacado.jpg" alt="descripción de imagen" class="panel-img" />
      <div class="panel-body">
        <h2 class="panel-title">Título del destacado</h2>
        <p class="panel-text">Este es el cuerpo de un destacado. Debe ser breve y conciso, de pocas líneas. No puede contener negritas ni enlaces. Este es el cuerpo de un destacado. Debe ser breve y conciso, de pocas líneas. No puede contener negritas ni enlaces</p>
        <div class="panel-footer">
          <a href="#" class="list-group-item item-sm">
            <span class="material-symbols-rounded o-icon" aria-hidden="true">info</span>
            <div class="access-content">
              <span class="access-title">Acceso</span>
            </div>
          </a>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="highlighted-items-2">
  <div class="col">
    <div class="panel-vertical">
      <p class="sr-only">Buenos Aires se escribe en plural</p>
      <video class="panel-img" controls="">
        <source src="/videoBuenosAires.mp4" type="video/mp4" />
        <track
          src="/videoBuenosAires.vtt"
          default=""
          kind="captions"
          srclang="es"
        />
        <p>Su navegador no soporta vídeos HTML5. Puedes ver el video haciendo clic en
          <a href="/videoBuenosAires.mp4">este enlace</a>.
        </p>
      </video>
      <div class="panel-body">
        <h2 class="panel-title">Título del destacado</h2>
        <p class="panel-text">Este es el cuerpo de un destacado. Debe ser breve y conciso, de pocas líneas. No puede contener negritas ni enlaces. Este es el cuerpo de un destacado. Debe ser breve y conciso, de pocas líneas. No puede contener negritas ni enlaces</p>
        <div class="panel-footer">
          <a class="btn btn-primary btn-lg" href="#" rel="noopener noreferrer">
            Botón
          </a>
        </div>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="panel-vertical">
      <iframe
        class="panel-img"
        src="https://www.youtube.com/embed/sXE613Oaxvc?si=iWSX1erqQxXOLojw"
        title="Buenos Aires se escribe en plural"
        frameborder="0"
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
        allowfullscreen=""
      ></iframe>
      <div class="panel-body">
        <h2 class="panel-title">Título del destacado</h2>
        <p class="panel-text">Este es el cuerpo de un destacado. Debe ser breve y conciso, de pocas líneas. No puede contener negritas ni enlaces. Este es el cuerpo de un destacado. Debe ser breve y conciso, de pocas líneas. No puede contener negritas ni enlaces</p>
        <div class="panel-footer">
          <a class="btn btn-primary btn-lg" href="#" rel="noopener noreferrer">
            Botón
          </a>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="highlighted-items-2">
  <div class="col">
    <div class="panel-vertical">
      <div class="panel-body">
        <h2 class="panel-title">Título del destacado</h2>
        <p class="panel-text">Este es el cuerpo de un destacado. Debe ser breve y conciso, de pocas líneas. No puede contener negritas ni enlaces. Este es el cuerpo de un destacado. Debe ser breve y conciso, de pocas líneas. No puede contener negritas ni enlaces</p>
        <div class="panel-footer">
          <a class="btn btn-primary btn-lg" href="#" rel="noopener noreferrer">
            Botón
          </a>
        </div>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="panel-vertical">
      <div class="panel-body">
        <h2 class="panel-title">Título del destacado</h2>
        <p class="panel-text">Este es el cuerpo de un destacado. Debe ser breve y conciso, de pocas líneas. No puede contener negritas ni enlaces. Este es el cuerpo de un destacado. Debe ser breve y conciso, de pocas líneas. No puede contener negritas ni enlaces</p>
        <div class="panel-footer">
          <a class="btn btn-secondary btn-lg" href="#" target="_blank" download="">
            <span class="material-symbols-rounded" aria-hidden="true">file_download</span>Descargar
          </a>
        </div>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="panel-vertical">
      <div class="panel-body">
        <h2 class="panel-title">Título del destacado</h2>
        <p class="panel-text">Este es el cuerpo de un destacado. Debe ser breve y conciso, de pocas líneas. No puede contener negritas ni enlaces. Este es el cuerpo de un destacado. Debe ser breve y conciso, de pocas líneas. No puede contener negritas ni enlaces</p>
        <div class="panel-footer">
          <a class="external" href="#" target="_blank" rel="noopener noreferrer">Enlace externo</a>
        </div>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="panel-vertical">
      <div class="panel-body">
        <h2 class="panel-title">Título del destacado</h2>
        <p class="panel-text">Este es el cuerpo de un destacado. Debe ser breve y conciso, de pocas líneas. No puede contener negritas ni enlaces. Este es el cuerpo de un destacado. Debe ser breve y conciso, de pocas líneas. No puede contener negritas ni enlaces</p>
        <div class="panel-footer">
          <a href="#" class="list-group-item item-sm">
            <span class="material-symbols-rounded o-icon" aria-hidden="true">info</span>
            <div class="access-content">
              <span class="access-title">Acceso</span>
            </div>
          </a>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="panel-lateral">
  <div class="panel-body">
    <h2 class="panel-title">Título del destacado</h2>
    <p class="panel-text">Este es el cuerpo de un destacado. Debe ser breve y conciso, de pocas líneas. No puede contener negritas ni enlaces.</p>
    <div class="panel-footer">
      <a class="btn btn-primary btn-lg btn-block" href="#" rel="noopener noreferrer">
        Botón
      </a>
    </div>
  </div>
</div>

<div class="panel-lateral">
  <div class="panel-body">
    <h2 class="panel-title">Título del destacado</h2>
    <p class="panel-text">Este es el cuerpo de un destacado. Debe ser breve y conciso, de pocas líneas. No puede contener negritas ni enlaces.</p>
    <div class="panel-footer">
      <a class="btn btn-secondary btn-lg btn-block" href="#" target="_blank" download="">
        <span class="material-symbols-rounded" aria-hidden="true">file_download</span>Descargar
      </a>
    </div>
  </div>
</div>

<div class="panel-lateral">
  <div class="panel-body">
    <h2 class="panel-title">Título del destacado</h2>
    <p class="panel-text">Este es el cuerpo de un destacado. Debe ser breve y conciso, de pocas líneas. No puede contener negritas ni enlaces.</p>
    <div class="panel-footer">
      <a class="external" href="#" target="_blank" rel="noopener noreferrer">Enlace externo</a>
    </div>
  </div>
</div>

<div class="panel-lateral">
  <div class="panel-body">
    <h2 class="panel-title">Título del destacado</h2>
    <p class="panel-text">Este es el cuerpo de un destacado. Debe ser breve y conciso, de pocas líneas. No puede contener negritas ni enlaces.</p>
    <div class="panel-footer">
      <a href="#" class="list-group-item item-sm">
        <span class="material-symbols-rounded o-icon" aria-hidden="true">info</span>
        <div class="access-content">
          <span class="access-title">Acceso</span>
        </div>
      </a>
    </div>
  </div>
</div>