card

index.html

@@ -46,6 +46,29 @@ <h2 class="heading content__title">Что это за&nbsp;колода</h2>
           и&nbsp;один из&nbsp;основателей жанра эмбиент Брайан Ино
           и&nbsp;мультимедиа-художник Питер Шмидт.
         </p>
+      </div>
+      <figure class="content__figure">
+        <picture>
+          <source
+            srcset="./images/cards-1x.avif 1x, ./images/cards-2x.avif 2x"
+            type="image/avif"
+          />
+          <source
+            srcset="./images/cards-1x.webp 1x, ./images/cards-2x.webp 2x"
+            type="image/webp"
+          />
+          <img
+            loading="lazy"
+            class="content__picture"
+            srcset="./images/cards-1x.png 1x, ./images/cards-2x.png 2x"
+            alt="Колода Oblique Strategies на деревянном столе в окружении смартфона, блокнота, ручки, цветка"
+          />
+        </picture>
+        <figcaption class="content__picture-caption">
+          <p>Колода Oblique Strategies</p>
+        </figcaption>
+      </figure>
+      <div class="content__text-block">
         <p class="content__paragraph">
           Oblique Strategies в&nbsp;основном используют музыканты,
           но&nbsp;колода подходит для преодоления творческого кризиса
@@ -102,6 +125,12 @@ <h2 class="heading content__title">
           >.
         </p>
       </div>
+      <article class="content__card">
+        <h3 class="content__card-title heading">
+          Use an <span class="colored-text">old idea</span>
+        </h3>
+        <p class="content__card-subtitle">Воспользуйтесь старой идеей</p>
+      </article>
       <h2 class="heading content__title">Кто пользовался Oblique Strategies</h2>
       <div class="content__text-block">
         <ul class="content__list">

styles/style.css

@@ -116,4 +116,56 @@ figure {
   font-weight: 700;
   font-style: 30px;
   background-color: var(--accent-color);
+}
+
+.content__picture {
+  inline-size: 100%;
+}
+
+.content__figure {
+  position: relative;
+  inline-size: calc(100% + 10vi); /* для того, чтобы картинка занимала 100% + отступы по бокам */
+  margin: 7% auto;
+  inset-inline-end: 5vi; /* двигаем картинку на 5 единиц  */
+}
+
+.content__picture-caption {
+  border-block-end: 1px solid currentColor;
+  padding: 20px;
+  font-size: 18px;
+  text-align: center;
+}
+
+.content__card {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  margin-block-start: 7%;
+  border: 1px solid currentColor;
+  aspect-ratio: 4/3;
+}
+
+.content__card-title {
+  font-size: 60px;
+}
+
+.content__card-subtitle {
+  font-size: 18px;
+}
+
+.colored-text {
+  position: relative;
+  display: inline-block;
+}
+
+.colored-text::after {
+  content: '';
+  position: absolute;
+  z-index: -1;
+  inline-size: calc(100% + 8px); /* подчеркивание выходит за пределы текста */
+  block-size: 0.5ch;
+  background-color: var(--accent-color);
+  inset-block-end: 0.3ch;
+  inset-inline-start: -4px;
 }