.groom { $bottom_shadow_size: 2rem; @mixin mobile { @media screen and (max-width: 1000px) { @content; } } background-color: #ffffff; position: relative; flex: none; height: 15rem; background-image: url("//dd.unicraft.org/static/branding/groom/header/bg.png"); background-repeat: repeat-x; background-size: auto 65%; background-position: left bottom; box-shadow: 0 0 $bottom_shadow_size hsla(0, 0, 0, 0.25); margin-bottom: $bottom_shadow_size; &__logo { flex: none; position: absolute; left: 4rem; bottom: 0; z-index: 1; max-width: 580px; width: 60%; @include mobile { left: 2rem; width: auto; height: 35%; } } &__pic { position: absolute; bottom: -40%; height: 133%; left: 50%; z-index: 2; @include mobile { left: auto; right: 0; } } &__text { position: absolute; left: calc(55% + 12rem); right: 0; bottom: 1rem; z-index: 3; opacity: 1; max-width: 280px; &__img { margin-right: 1rem; float: left; } &--1 {} &--2 {} &--3 { // display: block; } @include mobile { left: 2rem; width: auto; max-width: none; bottom: 40%; &__img { margin-right: 0.25rem; height: 1.5rem; } } } }