<style>
.bc-product {
  display: flex;
  flex-direction: column-reverse;
  flex-wrap: wrap;
  margin: 1rem 0;
} @media screen and (min-width: 1024px) { .bc-product {
  display: block;
}}
.bc-product h2, .bc-product h3 {
  font-weight: 800;
  text-transform: uppercase;
}
.bc-product h2 {
  font-size: 30px;
  margin-bottom: 1rem;
}
.bc-product h3 {
  font-size: 20px;
  margin: 1rem 0 0;
}
.bc-product p {
  margin-bottom: 1rem;
}
.bc-product ul.bc-dims {
  list-style: none;
  margin: 0;
}

.bc-product .desc {
  margin: 0 0 2rem;
} @media screen and (min-width: 1024px) { .bc-product .desc {
  width: 65%;
    max-width: 1200px;
}}

@media screen and (min-width: 1024px) { .bc-product .table-wrapper {
  float: right;
  position: sticky;
    top: 150px;
  width: 30%;
    max-width: 500px;
}}
.bc-product table {
  background: none;
}
.bc-product table tr {
  border-bottom: #ccc solid 1px;
  display: flex;
}
.bc-product table tr:last-of-type {
  border-bottom: none;
}
.bc-product table th {
  text-transform: uppercase;
  width: 100%;
}
.bc-product table td {
  width: 70%;
}
.bc-product table td:first-of-type {
  font-weight: 600;
  width: 30%;
}
.bc-product table td ul {
  margin: 0;
}
</style>

<div class="bc-product">

  <table>
    <tr>
      <th>Spécifications</th>
    </tr>
    <tr>
      <td>Diamètre</td>
      <td>51"</td>
    </tr>
    <tr>
      <td>Hauteur</td>
      <td>3 options de hauteur réglable</td>
    </tr>
    <tr>
      <td>Poids assemblé</td>
      <td>22 lb</td>
    </tr>
    <tr>
      <td>Poids max. de l'utilisateur</td>
      <td>300 lb</td>
    </tr>
  </table>

  <div class="desc">
    <h2>Titre du produit</h2>
    <p>Il s'agit du modèle de base qui peut être appliqué à n'importe quel produit qui n'a pas de conception personnalisée sophistiquée. Une conception professionnelle et basique qui devrait être assez facile à copier-coller dans n'importe quel produit, pour la cohérence de la conception de nos produits. Si ce paragraphe est assez long, vous devriez pouvoir constater que la boîte de spécifications sur le côté défile avec ce contenu, pas avant ou après.</p>
    <p>Intensifiez vos entraînements d'aviron avec la plateforme d'aviron à double barre en T Body-Solid SPRTB. Conçue pour fonctionner avec des barres olympiques, la SPRTB est une option idéale pour développer les muscles et la force du milieu du dos, des deltoïdes arrière et des trapèzes. Supérieurs aux avirons avec haltères, les avirons à barre en T offrent la possibilité de travailler les deux bras en même temps pour une capacité de poids et un effort accrus.</p>
    <h3>Titre plus petit</h3>
    <ul>
      <li>Participez à des cours virtuels en studio boutique</li>
      <li>Des entraînements personnalisés, basés sur votre niveau de forme physique et vos intérêts, sont envoyés à votre équipement chaque jour</li>
      <li>Échangez votre essai iFit Coach de 30 jours* pour activer votre produit et avoir accès à un entraînement personnel de classe mondiale à domicile</li>
    </ul>
  </div>

</div>

<style>
.half-box-example {
  background: #ccc;
} @media screen and (min-width: 768px) { .half-box-example {
  display: flex;
}}
.half-box-example img {
  width: 100%;
} @media screen and (min-width: 768px) { .half-box-example img {
  width: 45%;
}}
.half-box-example article {
  direction: ltr;
  padding: 1rem;
  width: 100%;
} @media screen and (min-width: 768px) { .half-box-example article {
  width: 55%;
}}
.half-box-example h2 {
  margin: 0 0 .5rem;
}
.half-box-example p {
  margin: 0 0 .5rem;
}
</style>

<div class="half-box-example">
  <img class="lazyloaded" data-src="https://cdn.shopify.com/s/files/1/0529/7687/7730/files/crossfit-games-2022-partner.webp" src="https://cdn.shopify.com/s/files/1/0529/7687/7730/files/crossfit-games-2022-partner.webp" alt="Texte alternatif pour l'image">
  <article>
    <h2>Titre</h2>
    <p>Ce modèle comporte une zone de texte avec une image sur le côté. Sur mobile, il devrait être empilé, ne prenant la moitié de l'écran que si la taille de l'écran est plus grande. Le code clé ici est "display: flex;". Cela permet aux 2 parties de cette boîte de s'ajuster l'une à côté de l'autre plus facilement que la plupart des autres méthodes.</p>
    <ul>
      <li>Élément de liste 1</li>
      <li>Élément de liste 2</li>
      <li>Élément de liste 3</li>
    </ul>
  </article>
</div>

.half-box-example {
  direction: rtl;
}

.half-box-example:nth-of-type(even) {
  direction: rtl;
}

<style>
.row-box-example {
  display: flex;
  flex-wrap: wrap;
  padding: 0.5rem;
}
.row-box-example h3, .row-box-example p {
  line-height: 1.2;
}
.row-box-example h3 {
  margin: 0.5rem 0;
}
.row-box-example figure {
  margin: 0;
  padding: 0.5rem;
  width: 50%;
} @media screen and (min-width: 768px) { .row-box-example figure {
  width: 25%;
}}
</style>

<div class="row-box-example">
  <figure>
    <img class="lazyloaded padded-img" data-src="https://cdn.shopify.com/s/files/1/0529/7687/7730/files/crossfit-games-2022-partner.webp" src="https://cdn.shopify.com/s/files/1/0529/7687/7730/files/crossfit-games-2022-partner.webp" alt="Texte de description pour l'image">
    <h3>Fonctionnalité 1</h3>
    <p>Le Lorem Ipsum est simplement un faux texte de l'industrie de l'impression et de la composition.</p>
  </figure>
  <figure>
    <img class="lazyloaded padded-img" data-src="https://cdn.shopify.com/s/files/1/0529/7687/7730/files/crossfit-games-2022-partner.webp" src="https://cdn.shopify.com/s/files/1/0529/7687/7730/files/crossfit-games-2022-partner.webp" alt="Texte de description pour l'image">
    <h3>Fonctionnalité 2</h3>
    <p>Le Lorem Ipsum est simplement un faux texte de l'industrie de l'impression et de la composition.</p>
  </figure>
  <figure>
    <img class="lazyloaded padded-img" data-src="https://cdn.shopify.com/s/files/1/0529/7687/7730/files/crossfit-games-2022-partner.webp" src="https://cdn.shopify.com/s/files/1/0529/7687/7730/files/crossfit-games-2022-partner.webp" alt="Texte de description pour l'image">
    <h3>Fonctionnalité 3</h3>
    <p>Le Lorem Ipsum est simplement un faux texte de l'industrie de l'impression et de la composition.</p>
  </figure>
  <figure>
    <img class="lazyloaded padded-img" data-src="https://cdn.shopify.com/s/files/1/0529/7687/7730/files/crossfit-games-2022-partner.webp" src="https://cdn.shopify.com/s/files/1/0529/7687/7730/files/crossfit-games-2022-partner.webp" alt="Texte de description pour l'image">
    <h3>Fonctionnalité 4</h3>
    <p>Le Lorem Ipsum est simplement un faux texte de l'industrie de l'impression et de la composition.</p>
  </figure>
</div>

<style>
.row-box-example figure {
  width: 50%;
} @media screen and (min-width: 768px) { .row-box-example figure {
  width: 25%;
}}
</style>

<style>
@media screen and (min-width: 768px) { .row-box-example.width-of-3 figure {
  width: calc(100% / 3);
</style>

Pour les vidéos intégrées

<iframe src="https://player.vimeo.com/video/684783210?autoplay=1&loop=1&autopause=0&muted=1" width="640" height="360" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen=""></iframe>

Pour les vidéos que nous avons téléchargées

<video poster="https://cdn.shopify.com/s/files/1/0529/7687/7730/files/video-poster.webp?v=1648148203" muted loop autoplay src="https://cdn.shopify.com/s/files/1/0529/7687/7730/files/7-8_AT_Treadmill_banner_video.mp4?v=1648146809"></video>

.video-wrapper {
  position: relative;
  overflow: hidden;
  max-width: 100%;
  padding-bottom: 56.25%;
  height: 0;
  height: auto;
}

<style>
.video-wrapper {
  padding-bottom: 2rem;
}
.video-wrapper iframe, .video-wrapper video {
  height: 315px;
  position: unset;
  width: 560px;
}
</style>

<style>
.video-section .video-wrapper {
  margin: 0 auto;
  padding-bottom: 570px;
  max-width: 1000px;
}
</style>

<div class="video-section">
  <iframe src="https://player.vimeo.com/video/684783210?autoplay=1&loop=1&autopause=0&muted=1" width="640" height="360" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen=""></iframe>
</div>