yet-another-blog/frontend/public/css/blogSingle.scss

.page {
  .title {
    background-color: #222;
    padding: 10px;
    box-sizing: border-box;
    font-size: 24px;
  }

  .image-container {
    width: 100%;
    margin-bottom: 4px;

    img {
      width: 100%;
    }
  }

  .video-embed {
    width: 100%;
    min-height: 560px;
    display: flex;

    iframe {
      width: 100%;
      height: 560px;
      margin: auto;
    }
  }

  .side-by-side {
    display: flex;
    flex-flow: row wrap;
    place-content: space-around;

    .image-container {
      padding: 5px;
      box-sizing: border-box;
      width: 50%;
      margin-bottom: 0;
    }

    .video-embed {
      width: 50%;
      min-height: 280px;
      padding: 5px;
      box-sizing: border-box;

      iframe {
        width: 100%;
        height: 280px;
      }
    }
  }

  h1 {
    border-bottom: 1px solid #777;
  }

  h2 {
    width: 50%;
    border-bottom: 1px solid #777;
  }
  h3 {
    width: 25%;
    border-bottom: 1px solid #777;
  }

  h4 {
    width: 20%;
    border-bottom: 1px solid #777;
  }

  a {
    color: white;
  }
}

@media screen and (max-width: 500px) {
  .page {
    .side-by-side {
      .image-container {
        width: 100%;
      }
    }
  }
}