Rails 横並べ　分割

上記の画像と文字をセットにして以下のように横並びにしたいです。

また画像をクリックした際に画像の詳細ページへ行けるように設定したいのですが中々エラーが出て飛びません。

#htmlのviewファイル
.wrapper
  .main
    .mainindex
      - @tweets.each do |tweet|
        .content{:style => "background-image: url(#{tweet.image});"}
          = link_to("/tweets/#{tweet.id}", method: :get) do
            = image_tag(@tweet.image_url)
        .mainname
          a

#CSSファイル
* {
  box-sizing: border-box;
}
.wrapper{
  width: 100%;
  .main{
    padding-top: 70px;
    
      .mainindex{
        min-height :100vh;
        width: 100%;
        background-color: rgba(var(--b3f,250,250,250),1);
        display: flex;
        flex-wrap:wrap; 
        // flex-direction: column
      }
    .content{
      margin: 0 auto;
      // margin: 50px auto 0;
      background-color: #fff;
      width: 614px;
      height: 400px;
      background-size: 100% auto;
      zoom: 0.5;
      position: relative;
      a{
        color: #DA8E00;
        text-decoration: none;
        font-size: 40px;
        top: 330px;
      bottom: 0;
      left: 5px;
      right: 0;
      border-radius: 3px;
        position: absolute;
        opacity: 0.9;
        transition:all 0.3s;
      }
      a:hover {
        color: white;
        font-size: 40px;
        opacity: 2.9;
        }
    }
    .mainname{
      height: 30px;
      text-align: center;
    }
}
}

最終的な形態としては以下のようなものを想定しています。
※画像をクリックしたら画像の詳細ページへリンクする。画像の下に自分のプロフィールの名前を表示できるようにする。

解決策は何かないでしょうか？