<div class="container">
  <div class="container__inner">
    <article class="article">
        <a href="#" class="article__link">
          <h3 class="article__heading">汎用人型決戦エンジニア</h3>
          <div class="article__thumbnail">
            <img src="https://images.pexels.com/photos/1287145/pexels-photo-1287145.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="">
          </div>
          <span class="article__category">緊急</span>
          <p class="article__description">
            alignをセンターに入れてスイッチ!alignをセンターに入れてスイッチ!alignをセンターに入れてスイッチ!alignをセンターに入れてスイッチ!alignをセンターに入れてスイッチ!alignをセンターに入れてスイッチ!alignをセンターに入れてスイッチ!alignをセンターに入れてスイッチ!alignをセンターに入れてスイッチ!alignをセンターに入れてスイッチ!
          </p>
        </a>
      </article>
  </div>
</div>
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@700&display=swap');

img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

a {
  color: #000;
  text-decoration: none;
}

.container {
  padding-block: 80px;
}

.container__inner {
  max-width: 320px;
  margin-inline: auto;
  padding-inline: 24px;
}

.article__link {
  display: grid;
}

.article__heading {
  margin-top: 32px;
  text-align: center;
  font-family: 'Josefin Sans', sans-serif;
  font-weight: bold;
  font-size: 1.5rem;
}

.article__description {
  margin-top: 16px;
  font-size: 0.875rem;
  line-height: 2;
}

.article__thumbnail {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  order: -1;
}

.article__category {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  justify-self: start;
  align-self: start;
  padding: 8px;
  background-color: #46e678;
  color: #fff;
  font-size: 0.875rem;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.