汎用flexレイアウトボックスの『説明』と『使い方』

.page-header,.page-header::before{
    background-color: #F7F7F7;
}
.page-header{
    min-height: 1rem;
}
.page-header h1{
    color: #333;
    font-size: 1.2rem;
}

.ak_outer a:link,
.ak_outer a:visited,
.ak_outer a:hover,
.ak_outer a:active{
	color:#333;
	transition: .5s;
}
/*全幅レイアウト時にアウターdivに付与*/
.ak_fw{
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
}
/*アウターの余白と色*/
.ak_outer{
    padding-top: 2rem;
    padding-bottom: 3rem;
    position: relative;
    background-color: #f7f7f7;
}
/*インナーの幅と余白*/
.ak_outer .inner{
    max-width: 1110px;
    width: 100%;
    margin: auto;
    padding-left: 15px;
    padding-right: 15px;
}
/*見出しが入る場合のH2*/
.ak_outer .inner h2{
    font-size: 1.5rem;
    text-align: center;
    width: 100%;
}
/*全コンテンツが入っているdiv*/
.ak_outer .inner .contents{
    display: flex;
    flex-wrap:wrap;
}
/*★アイテム　横並びの数と余白*/
.ak_outer .inner .contents .item{
    width: 100%;
    padding: 10px;
}
/*★アイテム内の見た目*/
.ak_outer .inner .contents .item .box{
    background-color: #fff;
    padding: 10px;
    height: 100%;
}
/*★リンクの見た目*/
.ak_outer .inner .link{
    padding: 0 1rem;
    text-align: center;
}
.ak_outer .inner .link a{
    display: inline-block;
    padding: 0.5rem 1.5rem;
    color: #fff;
    background-color: #333;
}

/*ak_fw付けると全幅化↓↓*/
<section id="sect01" class="ak_fw ak_outer">
    <div class="inner">
        <h2>メイン<br><span>画像</span><br>ユニット</h2>
    </div>
</section>

/*ak_fw付けると全幅化↓↓*/
<section id="sect02" class="ak_fw ak_outer">
    <div class="inner">
        <h2>汎用flexレイアウトボックス</h2>
        <div class="contents">
            <div class="item item01">
                <div class="box">
                    コンテンツ
                </div>
            </div>
            <div class="item item02">
                <div class="box">
                    コンテンツ
                </div>
            </div>
            <div class="item item03">
                <div class="box">
                    コンテンツ
                </div>
            </div>
        </div>
        <div class="link">
            <a href="/" target="_blank" rel="noopener">リンク</a>
        </div>
    </div>
</section>

#sect01{
    background-color: #47a1bb;
    height: 25rem;
}
#sect01 h2{
    font-size: 1.8rem;
    margin-bottom: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    -webkit-transform: translateY(-50%) translateX(-50%);
    color: #fff;
}

<div id="sect03" class="ak_outer preset ak_flexW">
    <div class="inner">
        <div class="contents">
            <a href="/" class="item item01 ak_hov01">
                <div class="box">
                    <div class="left">
                        <img class="ak_subimg" alt="サンプル画像" src="https://rakunosato.naw-g.com/wp-content/uploads/sample_img.jpg">
                    </div>
                    <div class="right">
                        <h3 class="ak_subtitle">吾輩は猫である</h3>
                        <p class="ak_subdate">2023/01/01</p>
                        <p class="ak_subtext">どこで生れたかとんと見当けんとうがつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。</p>
                    </div>
                </div>
            </a>
            <a href="/" class="item item02 ak_hov01">
                <div class="box">
                    <div class="left">
                        <img class="ak_subimg" alt="サンプル画像" src="https://rakunosato.naw-g.com/wp-content/uploads/sample_img.jpg">
                    </div>
                    <div class="right">
                        <h3 class="ak_subtitle">吾輩は猫である</h3>
                        <p class="ak_subdate">2023/01/01</p>
                        <p class="ak_subtext">どこで生れたかとんと見当けんとうがつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。</p>
                    </div>
                </div>
            </a>
        </div>
        <div class="link">
            <a href="/" target="_blank" rel="noopener">リンク</a>
        </div>
    </div>
</div>

.ak_outer.preset .inner .contents .item .box{
    display: flex;
    flex-wrap:wrap;
}
.ak_outer.preset .ak_subtitle{
    margin: 0.5rem 0;
    font-size: 1.2rem;
}
.ak_outer.preset .ak_subdate{
    margin: 0.5rem 0;
    font-size: 0.85rem;
}
.ak_outer.preset .ak_subtext{
    margin: 0.5rem 0;
    font-size: 1rem;
}

/*縦並びレイアウト*/
.ak_outer.preset.ak_flexH .inner .contents .item .box .left{
    width: 100%;
}
.ak_outer.preset.ak_flexH .inner .contents .item .box .right{
    width: 100%;
}
/*横並びレイアウト*/
.ak_outer.preset.ak_flexW .inner .contents .item .box .left{
    width: 25%;
}
.ak_outer.preset.ak_flexW .inner .contents .item .box .right{
    width: 75%;
    padding-left: 1rem;
}
@media (min-width:992px) {
    /*PC縦並びレイアウト*/
    .ak_outer.preset.PC_ak_flexH .inner .contents .item .box .left{
        width: 100%;
    }
    .ak_outer.preset.PC_ak_flexH .inner .contents .item .box .right{
        width: 100%;
    }
    /*SP縦並びレイアウト*/
    .ak_outer.preset.PC_ak_flexW .inner .contents .item .box .left{
        width: 25%;
    }
    .ak_outer.preset.PC_ak_flexW .inner .contents .item .box .right{
        width: 75%;
        padding-left: 1.5rem;
    }
}

<div id="sect03" class="ak_outer preset ak_flexH PC_ak_flexW">
...
<div>