期間限定などの告知に最適な左右に斜線が入ったタイトルのCSS

<div class="nya-title-container-wrap">
<div class="nya-title-container">
<div class="nya-title-with-lines">【期間限定】<br>
6月20日（木）～8月31日(土)まで<br>
最大30%OFFセール</div>
</div>
</div>

.nya-title-container-wrap {
display: flex;
justify-content: center;
align-items: center;
height: auto;
margin: 0;
}

.nya-title-container {
position: relative;
text-align: center;
}

.nya-title-with-lines {
position: relative;
display: inline-block;
padding: 0 20px;
font-size: 1.2em;
text-align: center;
}

.nya-title-with-lines::before,
.nya-title-with-lines::after {
content: "";
position: absolute;
top: 50%;
width: 2px;
height: 100%;
background: black;
transform: translateY(-50%);
}

.nya-title-with-lines::before {
left: -30px;
transform: rotate(-35deg) translateY(-50%);
}

.nya-title-with-lines::after {
right: -30px;
transform: rotate(35deg) translateY(-50%);
}

/* スマートフォン用のメディアクエリ */
@media (max-width: 767px) {
.nya-title-with-lines {
font-size: 1em;
padding: 0 10px;
}

.nya-title-with-lines::before {
transform: rotate(-25deg) translateY(-50%);
}

.nya-title-with-lines::after {
transform: rotate(25deg) translateY(-50%);
}
}