.IntroCard {
position: relative;
height: 100%;
color: #2b282c;
}
*, :after, :before {
box-sizing: border-box;
}
div {
display: block;
}
.IntroCard:before {
content: "";
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #c6b7a0;
}
.OutlineFrame {
position: relative;
height: 100%;
}
.IntroCard-content {
position: relative;
text-align: center;
}
@media (min-width: 1024px){
.IntroCard-figure {
position: relative;
overflow: hidden;
}
}
.IntroCard-figure {
position: relative;
width: 100%;
overflow: hidden;
}
figure {
margin: 0;
}
@media (min-width: 1024px){
.IntroCard-figure:before {
content: "";
display: block;
padding-top: 75%;
}
}
.IntroCard-figure:before {
content: "";
display: block;
padding-top: 88%;
}
.IntroCard-image {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
object-fit: cover;
object-position: 50% 0;
}
img {
border-style: none;
}
.IntroCard-figure:after {
content: "";
display: block;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 40%;
background: linear-gradient(180deg,rgba(207,198,191,0) 10%,#cfc6bf 90%);
}
.IntroCard-wrapper {
position: relative;
padding: 1.5rem 3rem 4.6rem;
background: linear-gradient(0deg,#c6b7a0,#cfc6bf 100%);
}
@media (min-width: 1024px){
.IntroCard-title {
font-size: 2.2rem;
}
}
.IntroCard-title {
color: #68482c;
margin-bottom: 0.6em;
width: 110%;
margin-left: -5%;
}