@import "_global.css";

#blog-content-1 {
  padding: 80px 20px;

  .content-wrap {
    max-width: var(--content-max-width);
    margin: 0 auto;
    display: flow-root;
  }

  .image {
    float: right;
    width: min(42%, 450px);
    margin: 0 0 24px 32px;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--rounding-medium);

    img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  .tagline {
    margin-bottom: 8px;
    color: var(--primary-color);
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.125em;
    text-transform: uppercase;
  }

  h1 {
    margin-bottom: 16px;
  }
  h2 {
    margin-bottom: 20px;
  }
  h3 {
        margin-bottom: 10px;
      }

  @media (max-width: 850px) {
    .image {
      float: none;
      width: 100%;
      max-width: 550px;
      margin: 0 auto 24px;
    }
  }
}