.single-post article {
  width: 100%;
  padding-block: var(--space-3xl);
}

.single-post__image {
  width: 100%;

  margin-bottom: 40px;

  overflow: hidden;

  border-radius: 12px;
}

.single-post__image img {
  display: block;

  width: 100%;
  height: auto;
  border-radius: 12px;
}

.single-post__header {
  max-width: 850px;

  margin: 0 auto var(--space-2xl);
}

.single-post__date {
  margin: 0 0 var(--space-sm);

  color: var(--color-text-muted);

  font-size: 14px;
}

.single-post__title {
  margin: 0;

  font-size: clamp(32px, 5vw, 56px);

  line-height: 1.1;

  margin-bottom: 24px;
}

.single-post__categories {
  margin-top: var(--space-md);

  color: var(--color-text-muted);
}

.single-post__categories a {
  text-decoration: none;
}

.single-post__content {
  max-width: 800px;

  margin: 0 auto;

  font-size: 18px;

  line-height: 1.8;
}

.single-post__content img {
  max-width: 100%;

  height: auto;
}

.single-post__content h2 {
  margin-top: var(--space-2xl);
}

.single-post__content h3 {
  margin-top: var(--space-xl);
}

.single-post__tags {
  max-width: 800px;

  margin: var(--space-2xl) auto 0;
}

/*
|--------------------------------------------------------------------------
| Article Container
|--------------------------------------------------------------------------
*/

.single-post__content {
  width: 100%;

  max-width: 800px;

  margin-inline: auto;
}

/*
|--------------------------------------------------------------------------
| Post Content
|--------------------------------------------------------------------------
*/

.single-post__body {
  font-size: 18px;

  line-height: 1.8;
}

.single-post__body img {
  max-width: 100%;

  height: auto;
}

.single-post__body iframe {
  max-width: 100%;
}

/*
|--------------------------------------------------------------------------
| Tablet
|--------------------------------------------------------------------------
*/

@media (max-width: 768px) {
  .single-post__title {
    font-size: 36px;

    line-height: 1.15;
  }

  .single-post__body {
    font-size: 17px;

    line-height: 1.75;
  }

  .single-post__image {
    margin-bottom: 32px;

    border-radius: 8px;
  }
}

/*
|--------------------------------------------------------------------------
| Small Mobile
|--------------------------------------------------------------------------
*/

@media (max-width: 480px) {
  .single-post__title {
    font-size: 30px;
  }

  .single-post__body {
    font-size: 16px;

    line-height: 1.7;
  }
}