.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)