.officiant-section {
.man-matron-wrap {
display: flex;
flex: 1;
flex-wrap: wrap;
justify-content: space-around;
text-align: center;
margin-top: 50px;
> div {
width: 32%;
}//div
.officiant-content-wrap {
margin-top: 60px;
}//.officiant-content-wrap
.officiant-title {
margin-top: 0;
margin-bottom: 0;
font-family: $font_secondary;
font-weight: 400;
color: $primary_color;
font-size: 2.6665em;
line-height: 1.25em;
svg {
margin-left: auto;
margin-right: auto;
margin-top: 10px;
}
}//.officiant-title
.officiant-subtitle {
display: block;
font-weight: 700;
font-size: 1.1112em;
margin-top: 25px;
}//.officiant-subtitle
}//.man-matron-wrap
.officiant-img {
width: 285px;
height: 285px;
margin: 0 auto;
position: relative;
@include border-radius(100%);
border: 8px solid $primary_color;
background-color: $white_color;
padding: 5px;
margin-bottom: 30px;
&:after {
content: "";
background-image: url('data:image/svg+xml; utf-8, ');
background-repeat: no-repeat;
width: 86px;
height: 42px;
position: absolute;
bottom: -37px;
left: 0;
right: 0;
margin: 0 auto;
}
img {
border: 1px solid $primary_color;
@include border-radius(100%);
}//img
}//.officiant-img
.matron-block {
.officiant-img {
margin-top: 30px;
margin-bottom: 0;
&:after {
width: 90px;
bottom: auto;
top: -36px;
background-image: url('data:image/svg+xml; utf-8, ');
}
}//.officiant-img
.officiant-content-wrap {
margin-top: 30px;
}//.officiant-content-wrap
}//.matron-block
.officiant-content {
margin-top: 15px;
font-size: 1.1112em;
}//.officiant-content
.bride-groom-wrap {
display: flex;
flex: 1;
flex-wrap: wrap;
position: relative;
margin-top: 100px;
padding: 20px 0;
&:before, &:after {
content: "";
background: rgba($primary_color, 0.3);
width: 20px;
height: 20px;
@include border-radius(100%);
position: absolute;
top: 0;
left: 0;
right: 0;
margin: 0 auto;
}
&:after {
top: auto;
bottom: 0;
}
> div {
width: 50%;
padding-top: 80px;
padding-bottom: 80px;
padding-right: 54px;
}//div
.groom-wrap {
+ .bride-wrap {
padding-right: 0;
padding-left: 54px;
border-left: 1px solid rgba($primary_color, 0.3);
}
}//groom-wrap
.section-block {
display: flex;
flex: 1;
flex-wrap: wrap;
align-items: flex-start;
margin-top: 35px;
}//.section-block
.officiant-img {
width: 153px;
height: 153px;
border-width: 3px;
margin-left: 0;
margin-bottom: 15px;
&:after {
width: 45px;
height: 22px;
bottom: -18px;
}
}//.officiant-img
.bride-wrap {
.officiant-img {
margin-top: 15px;
margin-bottom: 0;
&:after {
width: 50px;
bottom: auto;
top: -18px;
background-image: url('data:image/svg+xml; utf-8, ');
}
}//.officiant-img
}//.bride-wrap
.officiant-content-wrap {
width: calc(100% - 153px);
padding-left: 25px;
}//.officiant-content-wrap
.block-title {
margin-top: 0;
margin-bottom: 50px;
font-size: 2.6665em;
font-family: $font_secondary;
font-weight: 400;
letter-spacing: 1px;
color: $primary_color;
line-height: 1.25em;
}//.block-title
.officiant-title {
margin-top: 20px;
margin-bottom: 0;
font-size: 1.1112em;
}//.officiant-title
.officiant-subtitle {
color: #999;
font-size: 0.8888em;
display: block;
margin-top: 5px;
}//.officiant-subtitle
.officiant-content {
margin-top: 5px;
p {
margin-top: 0;
margin-bottom: 20px;
&:last-child {
margin-bottom: 0;
}
}//p
}//.officiant-content
}//.bride-groom-wrap
}//.officiant-section
@include media(md) {
.officiant-section {
.man-matron-wrap {
> div {
width: 40%;
}
}//.man-matron-wrap
}//.officiant-section
}//@include media(md)
@include media(sm) {
.officiant-section {
.man-matron-wrap {
> div {
width: 45%;
}
}//.man-matron-wrap
.bride-groom-wrap {
text-align: center;
.block-title {
svg {
margin-left: auto;
margin-right: auto;
}
}//.block-title
.section-block {
flex-direction: column;
}//.section-block
.officiant-img {
margin-left: auto;
margin-right: auto;
}//.officiant-img
.officiant-content-wrap {
width: 100%;
padding-left: 0;
}//.officiant-content-wrap
}//.bride-groom-wrap
}//.officiant-section
}//@include media(sm)
@include media(xs) {
.officiant-section {
.man-matron-wrap {
flex-direction: column;
> div {
width: 100%;
margin-bottom: 50px;
}
.officiant-title {
font-size: 2em;
}
}//.man-matron-wrap
.officiant-content {
font-size: 1em;
}//.officiant-content
.bride-groom-wrap {
margin-top: 5px;
padding: 0;
flex-direction: column;
&:before, &:after {
display: none;
}
> div {
width: 100%;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
}//div
.groom-wrap {
+ .bride-wrap {
padding-left: 0;
border-left: none;
}
}//.groom-wrap
.bride-wrap {
margin-top: 65px;
}
.block-title {
font-size: 2em;
}//.block-title
.officiant-content {
font-size: 1.1112em;
}//.officiant-content
}//.bride-groom-wrap
}//.officiant-section
}//@include media(xs)