HTML-Prototype der OTH-Regensburg

<div class="o-container">
  <div class="frame-space-after-large">
    <div class="c-consent-box">
      <div class="c-consent-box__image">
        <picture>
          <source srcset="Images/consent-box/bg-blurry-large.webp" media="(min-width:768px)"/>
          <source srcset="Images/consent-box/bg-blurry-small.webp" media="(min-width:0)"/><img class="image__default" src="Images/consent-box/bg-blurry-large.jpg" alt="Blurred image of video background" width="940" height="529" loading="lazy"/>
        </picture>
      </div>
      <div class="c-consent-box__content">
        <h2 class="c-consent-box__heading">Externer Inhalt</h2>
        <p class="c-consent-box__description">Zur Darstellung dieser Inhalte werden externe Inhalte geladen.<br/> Diese übermitteln teilweise Nutzerdaten an Drittanbieter oder speichern Cookies.</p><a class="c-consent-box__privacy-link" href="#">Mehr Informationen und Widerruf
          <svg class="c-consent-box__icon" viewBox="0 0 36 36.111" role="img" aria-hidden="true" focusable="false">
            <use xlink:href="Images/svg/sprite.symbol.svg#icon-arrow-right"></use>
          </svg></a>
        <div class="btn-primary-wrap c-consent-box__button-consent">
          <button class="btn btn--primary" data-iframeswitch-submit="true">Externen Inhalt laden</button>
        </div>
      </div>
    </div>
  </div>
  <div class="o-grid o-grid-1-1@tablet frame-space-after-large">
    <div class="c-consent-box">
      <div class="c-consent-box__image">
        <picture>
          <source srcset="Images/consent-box/bg-blurry-large.webp" media="(min-width:768px)"/>
          <source srcset="Images/consent-box/bg-blurry-small.webp" media="(min-width:0)"/><img class="image__default" src="Images/consent-box/bg-blurry-large.jpg" alt="Blurred image of video background" width="940" height="529" loading="lazy"/>
        </picture>
      </div>
      <div class="c-consent-box__content">
        <h2 class="c-consent-box__heading">Externer Inhalt</h2>
        <p class="c-consent-box__description">Zur Darstellung dieser Inhalte werden externe Inhalte geladen.<br/> Diese übermitteln teilweise Nutzerdaten an Drittanbieter oder speichern Cookies.</p><a class="c-consent-box__privacy-link" href="#">Mehr Informationen und Widerruf
          <svg class="c-consent-box__icon" viewBox="0 0 36 36.111" role="img" aria-hidden="true" focusable="false">
            <use xlink:href="Images/svg/sprite.symbol.svg#icon-arrow-right"></use>
          </svg></a>
        <div class="btn-primary-wrap c-consent-box__button-consent">
          <button class="btn btn--primary" data-iframeswitch-submit="true">Externen Inhalt laden</button>
        </div>
      </div>
    </div>
    <div class="c-consent-box">
      <div class="c-consent-box__image">
        <picture>
          <source srcset="Images/consent-box/bg-blurry-large.webp" media="(min-width:768px)"/>
          <source srcset="Images/consent-box/bg-blurry-small.webp" media="(min-width:0)"/><img class="image__default" src="Images/consent-box/bg-blurry-large.jpg" alt="Blurred image of video background" width="940" height="529" loading="lazy"/>
        </picture>
      </div>
      <div class="c-consent-box__content">
        <h2 class="c-consent-box__heading">Externer Inhalt</h2>
        <p class="c-consent-box__description">Zur Darstellung dieser Inhalte werden externe Inhalte geladen.<br/> Diese übermitteln teilweise Nutzerdaten an Drittanbieter oder speichern Cookies.</p><a class="c-consent-box__privacy-link" href="#">Mehr Informationen und Widerruf
          <svg class="c-consent-box__icon" viewBox="0 0 36 36.111" role="img" aria-hidden="true" focusable="false">
            <use xlink:href="Images/svg/sprite.symbol.svg#icon-arrow-right"></use>
          </svg></a>
        <div class="btn-primary-wrap c-consent-box__button-consent">
          <button class="btn btn--primary" data-iframeswitch-submit="true">Externen Inhalt laden</button>
        </div>
      </div>
    </div>
  </div>
  <div class="o-grid o-grid o-grid-1-1@tablet o-grid-2-1@desktop frame-space-after-large">
    <div class="c-consent-box">
      <div class="c-consent-box__image">
        <picture>
          <source srcset="Images/consent-box/bg-blurry-large.webp" media="(min-width:768px)"/>
          <source srcset="Images/consent-box/bg-blurry-small.webp" media="(min-width:0)"/><img class="image__default" src="Images/consent-box/bg-blurry-large.jpg" alt="Blurred image of video background" width="940" height="529" loading="lazy"/>
        </picture>
      </div>
      <div class="c-consent-box__content">
        <h2 class="c-consent-box__heading">Externer Inhalt</h2>
        <p class="c-consent-box__description">Zur Darstellung dieser Inhalte werden externe Inhalte geladen.<br/> Diese übermitteln teilweise Nutzerdaten an Drittanbieter oder speichern Cookies.</p><a class="c-consent-box__privacy-link" href="#">Mehr Informationen und Widerruf
          <svg class="c-consent-box__icon" viewBox="0 0 36 36.111" role="img" aria-hidden="true" focusable="false">
            <use xlink:href="Images/svg/sprite.symbol.svg#icon-arrow-right"></use>
          </svg></a>
        <div class="btn-primary-wrap c-consent-box__button-consent">
          <button class="btn btn--primary" data-iframeswitch-submit="true">Externen Inhalt laden</button>
        </div>
      </div>
    </div>
    <div class="c-consent-box">
      <div class="c-consent-box__image">
        <picture>
          <source srcset="Images/consent-box/bg-blurry-large.webp" media="(min-width:768px)"/>
          <source srcset="Images/consent-box/bg-blurry-small.webp" media="(min-width:0)"/><img class="image__default" src="Images/consent-box/bg-blurry-large.jpg" alt="Blurred image of video background" width="940" height="529" loading="lazy"/>
        </picture>
      </div>
      <div class="c-consent-box__content">
        <h2 class="c-consent-box__heading">Externer Inhalt</h2>
        <p class="c-consent-box__description">Zur Darstellung dieser Inhalte werden externe Inhalte geladen.<br/> Diese übermitteln teilweise Nutzerdaten an Drittanbieter oder speichern Cookies.</p><a class="c-consent-box__privacy-link" href="#">Mehr Informationen und Widerruf
          <svg class="c-consent-box__icon" viewBox="0 0 36 36.111" role="img" aria-hidden="true" focusable="false">
            <use xlink:href="Images/svg/sprite.symbol.svg#icon-arrow-right"></use>
          </svg></a>
        <div class="btn-primary-wrap c-consent-box__button-consent">
          <button class="btn btn--primary" data-iframeswitch-submit="true">Externen Inhalt laden</button>
        </div>
      </div>
    </div>
  </div>
  <div class="o-grid o-grid o-grid-1-1@tablet o-grid-1-2@desktop frame-space-after-large">
    <div class="c-consent-box">
      <div class="c-consent-box__image">
        <picture>
          <source srcset="Images/consent-box/bg-blurry-large.webp" media="(min-width:768px)"/>
          <source srcset="Images/consent-box/bg-blurry-small.webp" media="(min-width:0)"/><img class="image__default" src="Images/consent-box/bg-blurry-large.jpg" alt="Blurred image of video background" width="940" height="529" loading="lazy"/>
        </picture>
      </div>
      <div class="c-consent-box__content">
        <h2 class="c-consent-box__heading">Externer Inhalt</h2>
        <p class="c-consent-box__description">Zur Darstellung dieser Inhalte werden externe Inhalte geladen.<br/> Diese übermitteln teilweise Nutzerdaten an Drittanbieter oder speichern Cookies.</p><a class="c-consent-box__privacy-link" href="#">Mehr Informationen und Widerruf
          <svg class="c-consent-box__icon" viewBox="0 0 36 36.111" role="img" aria-hidden="true" focusable="false">
            <use xlink:href="Images/svg/sprite.symbol.svg#icon-arrow-right"></use>
          </svg></a>
        <div class="btn-primary-wrap c-consent-box__button-consent">
          <button class="btn btn--primary" data-iframeswitch-submit="true">Externen Inhalt laden</button>
        </div>
      </div>
    </div>
    <div class="c-consent-box">
      <div class="c-consent-box__image">
        <picture>
          <source srcset="Images/consent-box/bg-blurry-large.webp" media="(min-width:768px)"/>
          <source srcset="Images/consent-box/bg-blurry-small.webp" media="(min-width:0)"/><img class="image__default" src="Images/consent-box/bg-blurry-large.jpg" alt="Blurred image of video background" width="940" height="529" loading="lazy"/>
        </picture>
      </div>
      <div class="c-consent-box__content">
        <h2 class="c-consent-box__heading">Externer Inhalt</h2>
        <p class="c-consent-box__description">Zur Darstellung dieser Inhalte werden externe Inhalte geladen.<br/> Diese übermitteln teilweise Nutzerdaten an Drittanbieter oder speichern Cookies.</p><a class="c-consent-box__privacy-link" href="#">Mehr Informationen und Widerruf
          <svg class="c-consent-box__icon" viewBox="0 0 36 36.111" role="img" aria-hidden="true" focusable="false">
            <use xlink:href="Images/svg/sprite.symbol.svg#icon-arrow-right"></use>
          </svg></a>
        <div class="btn-primary-wrap c-consent-box__button-consent">
          <button class="btn btn--primary" data-iframeswitch-submit="true">Externen Inhalt laden</button>
        </div>
      </div>
    </div>
  </div>
</div>