<div class="crisper__content-row content-row">
<div class="content-row__box-items">
<div class="content-row__inner-cell">
<img src="@img/about_us_page/order.png" alt="Order" class="content-row__pic-circle" width="549" height="549">
</div>
</div>
<div class="content-row__desc-textbox">
<h2 class="content-row__title-our"><strong class="content-row__word">Our</strong> restautant</h2>
<div class="content-row__box-paragraph">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
//!BEM-Block
.advertisement {
// .advertisement__crisper
&__crisper {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
}
}
//!BEM-Block
.crisper {
// .crisper__content-row
&__content-row {
display: flex;
width: 100%;
// flex-wrap: wrap;
align-items: center;
justify-content: space-between;
row-gap: toRem(20);
column-gap: toRem(40);
}
}
//!BEM-Block
.content-row {
// .content-row__box-items
&__box-items{
flex: 0 0 67%;
position: relative;
display: flex;
align-items: center;
justify-content: center;
&::before{
position: absolute;
content: "";
aspect-ratio: 694 / 694;
max-width: 694px;
min-height: 694px;
border-radius: 100%;
opacity: 0.2;
background: var(--decodeSmallCardAbout);
z-index: -1;
padding: 0 170px;
}
&::after{
position: absolute;
content: "";
max-width: 862px;
min-height: 862px;
aspect-ratio: 862 / 862;
border-radius: 100%;
opacity: 0.1;
background: red;
z-index: 2;
padding: 0 180px;
}
}
// .content-row__inner-cell
&__inner-cell {
position: relative;
display: block;
aspect-ratio: 549 / 549;
max-width: toRem(549);
z-index: 3;
border-radius: 100%;
}
// .content-row__pic-circle
&__pic-circle {
overflow: hidden;
border-radius: 100%;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
// .content-row__desc-textbox
&__desc-textbox {
flex: 0 0 27%;
}
// .content-row__title-our
&__title-our {
color: #311F09;
font-family: var(--fonFamilyTinos);
font-size: 80px;
font-size: toRem(80);
line-height: 1.10;
}
// .content-row__word
&__word {
color: #FF8A00;
font-family: var(--fonFamilyTinos);
font-size: toRem(80);
font-weight: 700;
line-height: 1.10;
}
