section.about {
display: flex;
flex-direction: column;
width: 100%;
align-items: center;
} .plx { position: relative; background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover; min-height: 400px;
width: 100%;
}
.plx::before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .2);
background-color: rgba(0, 0, 0, .4);
backdrop-filter: contrast(.5);
}  .plx_text {
width: 100%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
text-align: center;
isolation: isolate;
}
.plx_text::before {
content: "";
position: absolute;
z-index: -1;
inset: -90px -120px;
inset: -120px -160px;
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(18px);
border-radius: 50%; -webkit-mask-image: radial-gradient(
ellipse,
rgba(0,0,0,1) 20%,
rgba(0,0,0,.6) 45%,
rgba(0,0,0,.15) 70%,
rgba(0,0,0,0) 100%
);
mask-image: radial-gradient(
ellipse,
rgba(0,0,0,1) 20%,
rgba(0,0,0,.6) 45%,
rgba(0,0,0,.15) 70%,
rgba(0,0,0,0) 100%
);
} .plx_text .title {
padding: 0;
text-shadow: 0 2px 12px rgba(0,0,0,.35);
}
.plx_text .title,
.plx_text .intro_box {
color: white;
width: fit-content;
margin: 0 auto;
}
.plx_text .intro {
padding-top: 1rem;
padding-bottom: 0;
}
.plx_text .intro_p {
text-shadow: 0 2px 12px rgba(0,0,0,.35);
} @media all and (max-width: 1400px) {
.plx {
min-height: 300px;
}
}
@media all and (max-width: 1000px) {
.plx_text {
transform: translate(-50%, -50%);
}
}
@media all and (max-width: 700px) {
.plx {
min-height: 250px;
}
}
@media (max-width: 768px) {
.about .intro_box br {
display: none;
}
.about .intro_box br.mobile {
display: block;
}
}