.bdTitle {
position: relative;
width: 100vw;
border-radius: 24px;
overflow: hidden;
}
.bdTitle::after {
content: '';
position: absolute;
top: 0;
left: 0;
z-index: -1;
width: 100%;
height: 80%;
background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%);
}
.bdTitle__bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: var(--black);
z-index: -1;
}
.bdTitle__bg img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.bdTitle__inner {
position: relative;
width: 100%;
max-width: var(--maxwidth);
justify-content: space-between;
padding: 50px 0 200px 0;
}
.bdTitle__inner figure {
position: relative;
width: 130px;
height: 130px;
background-color: var(--white);
border-radius: 100%;
}
.bdTitle__inner figure img {
height: 70%;
width: 70%;
object-fit: contain;
}
.bdTitle__content {
position: relative;
width: calc(100% - 160px);
color: #fff;
align-items: flex-start;
}
.bdTitle__content h1 {
font-size: var(--fontSizeH1);
font-weight: 900;
text-transform: uppercase;
margin: 0;
}
.bdTitle__content p {
font-size: var(--fontSizeH5);
font-weight: 500;
margin: 10px 0 0 0;
line-height: 100%;
}
@media (max-width: 1280px) {
.bdTitle__inner {
padding-bottom: 150px;
}
}
@media (max-width: 600px) {
.bdTitle__inner {
padding-bottom: 100px;
}
.bdTitle__inner figure {
width: 100px;
height: 100px;
}
.bdTitle__content {
width: calc(100% - 120px);
}
}
@media (max-width: 360px) {
.bdTitle__inner figure {
width: 60px;
height: 60px;
}
.bdTitle__content {
width: calc(100% - 80px);
}
}